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

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,300);

body,html{
	width:100%;
	height:100%;
	font-family: 'Quicksand', sans-serif;
	font-weight:700;
	color:#333333;
	font-size:16px;
	background:#ececec;
}
a{
	text-decoration:none;
	color:#F96;
	transition:color ease-in-out 0.4s;
}
a:hover{
	color:#66CC99;
}
.coloredTitle{
	font-size:2.0em;
	color:#FF9966;
}
.coloredLink{
	color:#FF9966;
	transition:color ease-in-out 0.4s;
}
.coloredLink:hover{
	color:#E08F66;
}
.coloredSection{
	border-radius:10px;
	background:#F96;
	padding:12px;
	display:block;
}
::selection {
  background: #FF9966; /* WebKit/Blink Browsers */
  color:#FFF;
}
::-moz-selection {
  background: #FF9966; /* Gecko Browsers */
  color:#FFF;
}
	
.light{
	font-weight:400;
}
.button,.buttonElement{
	border:none;
	background:#FF9966;
	color:#FFF;
	border-radius:8px;
	padding:8px 50px;
	display:inline-block;
	text-transform:uppercase;
	cursor:pointer;
	transition:all ease-in-out 0.4s;
}
.lightForm .buttonElement{
	margin-top:6px;
}
.button.full{
	display:block;
	text-align:center;
}
.button:hover,.buttonElement:hover{
	background:#E08F66 !important;
}
.loginButton{
	background-color: #F96;
    display: inline-block;
    padding: 12px;
    height: 20px;
    color: #FFF;
	cursor:pointer;
}

.click{
	cursor:pointer;
}
.center{
	text-align:center !important;
}
.left{
	text-align:left !important;
}
.margined{
	margin:12px 0;
}
.container{
	display:inline-block;
	width:100%;
	width:calc(100% - 30px);
	margin:5px;
	padding:10px;
	max-width:800px;
	background:#FFF;
}
.clearBox{
	background:none !important;
}
.box{
	background:rgba(255,255,255,0.3);
	padding:6px;
	width:calc(100% - 12px);
	max-width:600px;
	display:inline-block;
	border-radius:12px;
	vertical-align:top;
	margin-right:6px;
}
.widebox{
	background:rgba(255,255,255,0.3);
	padding:6px;
	width:calc(100% - 12px);
	display:inline-block;
	border-radius:12px;
	vertical-align:top;
	margin-top:6px;
}
.tinyBox{
	background:rgba(255,255,255,0.3);
	padding:6px;
	width:calc(100% - 12px);
	max-width:220px;
	display:inline-block;
	border-radius:12px;
	vertical-align:top;
}
.box .boxInsert, .widebox .boxInsert, .tinyBox .tinyBoxInsert{
	width:100%;
	width:calc(100% - 12px);
	padding:6px;
	height:100%;
	background:#FFF;
	display:inline-block;
	position:relative;
	border-radius:8px;
	text-align:center;
	margin:0;
}

.wide{
	padding:6px;
	width:calc(100% - 12px);
	max-width:600px;
	display:inline-block;
	border-radius:12px;
}
.button.wide{
	text-align:center;
	margin-top:6px;
	margin-bottom:0;
}
.halfWidth{
	display:inline-block;
	width:50%;
	width:calc(50% - 12px);
	vertical-align:bottom;
	margin-right:12px;
}
.third {
    display: inline-block;
    vertical-align: top;
    width: calc(33.333333% - 10px);
    padding: 5px;
}
#coverall{
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	top:0;
	left:0;
	opacity:0;
	position:fixed;
	display:none;
	z-index:9000;
}
#busycoverall{
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	top:0;
	left:0;
	opacity:0;
	position:fixed;
	display:none;
	z-index:9010;
}
#navCoverall{
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	top:0;
	left:-100%;
	position:fixed;
	z-index:19;
	transition:all ease-in-out 0.3s;
}
#home.navOn #navCoverall{
	left:0%;
}

#busy{
	position:fixed;
	top:50%;
	left:50%;
	margin-left:-98px;
	margin-top:-19px;
	z-index:9011;
	display:none;
	background:url(../media/images/assets/loading.gif) no-repeat center;
	height:38px;
	width:196px;
}
.window{
	background:rgba(255,255,255,0.3);
	padding:6px;
	
	width:calc(100% - 12px);
	height:calc(100% - 12px) !important;
	max-height:650px;
	max-width:400px;
	display:inline-block;
	opacity:0;
	margin:auto;
	margin:auto;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:9001;
	border-radius:12px;
}
.window .rel{
	width:100%;
	height:100%;
	background:#FFF;
	display:inline-block;
	position:relative;
	overflow:hidden;
	border-radius:8px;
}
.window .container{
	display:inline-block;
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	margin:0 !important;
	padding:0 !important;
	max-width:none !important;
}
.window .block{
	display:inline-block;
	width:100%;
	height:100%;
	float:left;
	overflow:hidden;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
}

.window .backContainer{
	width:0px;
	height:0px;
	position:relative;
	z-index:100;
}
.window .back{
	width:50px;
	height:50px;
	top:0;
	left:0;
	display:inline-block;
	position:absolute;
	background: url(/spectrum/media/images/icons/backArrow.png) no-repeat #FF9966;
	background-size:50px 50px;
	z-index:100;
	cursor:pointer;
	border-radius: 0 0 8px 0;
}
.window .closeWindow{
	width:50px;
	height:50px;
	top:0;
	left:0;
	display:inline-block;
	position:absolute;
	background: url(/spectrum/media/images/icons/delete.png) no-repeat #FF9966;
	background-size:50px 50px;
	z-index:100;
	cursor:pointer;
	border-radius: 0 0 8px 0;
}
.prompt{
	
	
	height:0%;
	max-height:250px;
	display:inline-block;
	opacity:0;
	margin:auto;
	margin:auto;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:9001;
	background:rgba(255,255,255,0.3);
	padding:6px;
	width:calc(100% - 12px);
	max-width:400px;
	border-radius:12px;
}
.prompt .rel{
	
	
	
	position:relative;
	overflow:hidden;
	
	width:100%;
	width:calc(100% - 12px);
	padding:6px;
	height:100%;
	height:calc(100% - 26px);
	background:#FFF;
	display:inline-block;
	position:relative;
	border-radius:8px;
	text-align:center;
	margin:0;
	padding-bottom:20px;
}
.prompt .button{
	margin:6px;
}
.prompt h2{
	color:#333;
}
.divider{
	display:block;
	margin:6px 0;
	background:#ececec;
	height:2px;
}
.small{
	font-size:0.5em;
}
.absoluteCenter{
	display:inline-table;
	width:100%;
	height:100%;
}
.absoluteCenter>div{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	width:100%;
	height:100%;
}
.absoluteCenter>div>div{
	display:inline-block;
}
.leaderDivider {
    display: block;
    border-top: rgba(0,0,0,0.1) solid 1px;
    border-bottom: rgba(255,255,255,0.8) solid 1px;
    margin: 12px;
}

/************Page Styles************/

header{
	display:inline-block;
	height:44px;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	background:url(../media/images/assets/spark.png) no-repeat center #FFF;
	background-size:36px 36px;
}
#openNav{
	display:inline-block;
	background:url(../media/images/icons/navIcon.png) no-repeat center #F96;
	background-size:44px 44px;
	float:left;
	width:44px;
	height:44px;
	cursor:pointer;
	
}
nav>a{
	color:inherit;
	text-decoration:none;
}

nav#side{
	width:100%;
	max-width:250px;
	height:100%;
	background:#FFF;
	vertical-align:top;
	display:inline-block;
	overflow:auto;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
	position:fixed;
	top:0;
	left:-250px;
	z-index:20;
	transition:all ease-in-out 0.4s;
}
nav#side a{
	color:inherit;
	text-decoration:none;
}
.navOn nav#side{
	left:0;
}
#userPhoto{
	width:80px;
	height:80px;
	display:inline-block;
	vertical-align:middle;
	border-radius:100%;
	overflow:hidden;
	margin:12px;
}
#userPhoto img{
	width:100%;
}
nav#side>ul{
	list-style:none;
	display:block;
	padding:0;
}
nav#side>ul>li{
	display:block;
	padding:0 16px;
	padding-left:16px;
	transition:border linear 0.2s, padding-left linear 0.2s;
	border-left:solid 0px #FF9966;
	position:relative;
}
nav#side>ul>li .gatewayLabel{
	display:block;
	padding:10px 6px;
	border-top:solid 2px #ECECEC;
	font-weight:400;
	text-transform:uppercase;
	font-size:1.25em;
	background:#FFF;
	transition:background ease-in-out 0.4s;
}
nav#side>ul>li .gatewayLabel:hover{
	background:#ececec;
	cursor:pointer;
}
nav#side>ul>li:first-child .gatewayLabel{
	border-top:none;
}
nav#side>ul>li.on{
	border-left:solid 5px #FF9966;
	padding-left:11px;
}
nav#side>ul>li>ul{
	display:none;
	list-style: none;
	padding:0;
}
nav#side>ul>li>ul>li{
	color:#999;
}
nav#side>ul>li>ul>li>.gatewayLabel{
	border-color:#FAFAFA;
}
#main{
	display:inline-block;
	vertical-align:top;
	width:100%;
	height:100%;
	height:calc(100% - 44px);
	margin-top:44px;
	overflow:auto;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
	position:relative;
}
.copyAndPaste{
	display:block;
	background:rgba(0,0,0,0.1);
	padding:10px;
	border-radius:12px;
}
.registrationEarly{
	width:200px;
	height:200px;
	display:inline-block;
	vertical-align:middle;
	border-radius:100%;
	overflow:hidden;
	margin:12px;
	background:url(../media/images/assets/clock.png) center center no-repeat #F96;
	background-size:120px 120px;
}
.registrationLate{
	width:200px;
	height:200px;
	display:inline-block;
	vertical-align:middle;
	border-radius:100%;
	overflow:hidden;
	margin:12px;
	background:url(../media/images/assets/closed.png) center center no-repeat #F96;
	background-size:120px 120px;
}
.errorIcon{
	width:200px;
	height:200px;
	display:inline-block;
	vertical-align:middle;
	border-radius:100%;
	overflow:hidden;
	margin:12px;
	background:url(../media/images/assets/error.png) center center no-repeat #F96;
	background-size:120px 120px;
}

/***************************/
@media screen and (min-width: 700px) {
	.coloredTitle{
		font-size:4.1em;
	}
	nav#side{
		position:static;
		top:auto;
		left:auto;
	}
	#main{
		width:80%;
		width:calc(100% - 250px);
		height:100%;
		margin-top:0;
	}
	#userPhoto{
		width:226px;
		height:226px;
	}
	header{
		display:none;
	}
	#profileMenu{
		display:block;
	}
}

.subMenu{
	padding:0 6px;
	margin-bottom:12px;
}
.subMenu .button{
	margin-top:6px;
}

.subMenu.settingsMenu{
	display:block;
	background: rgba(255,255,255,0.3);
	padding: 6px;
	border-radius: 12px;
}
.subMenu.settingsMenu .button{
	display:block;
	text-align:center;
}
.subMenu.settingsMenu .button.currentSetting{
	background-color:#CCC;
}
.accordian {
   	max-height: 0px;
	overflow: hidden;
	margin-bottom:8px;
	-webkit-transition: max-height .25s ease-in-out;
	transition: max-height .25s ease-in-out;
}

.accordianTitle {
    display: block;
    padding: 8px;
	border-radius: 8px;
	background-color:#FFF;
    transition: all ease-in-out 0.4s;
    cursor: pointer;
}
.settingsButton{
	display:block;
	text-align:left;
	padding:8px 24px;
    transition: all ease-in-out 0.4s;
	cursor:pointer;
}
.settingsButton:hover{
	color:#F96;
}
.viewSubtitle {
    margin-top: -24px;
    font-size: 18px;
    color: #666;
}
.accordianIcon {
    display: inline-block;
    width: 20%;
    padding: 8px;
    width: calc(20% - 32.8px);
    background-color: #FFF;
    border-radius: 8px;
    margin-left: 6px;
    cursor: pointer;
    border: solid 6px #FFF;
    transition: all ease-in-out 0.4s;
}
.accordianIcon:first-child {
	margin-left:0;
}
.accordianIcon>img{
	display:block;
	width:100%;
}
.accordianIcon.on {
    border: solid 6px #F96;
}

.box.leftPush {
    margin-left: 0;
    margin-top: 6px;
}
@media screen and (min-width: 768px) {
	.subMenu.settingsMenu{
		display:inline-block;
		width:300px;
	}
	.accordianIcon{
		display:none;
	}
	.accordian {
   		max-height: 36px;
	}
	
}
@media screen and (min-width: 1232px) {
	.box.leftPush {
		margin-left: 316px;
		margin-top: 6px;
	}
}
.accordian.on {
    max-height: 1000px;
	-webkit-transition: max-height 1s ease-in-out;
	transition: max-height 1s ease-in-out;
}
	

.viewPad{
	padding:24px;
}

#login{
	background:url(../media/images/bgs/mountain.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
#createAccount{
	text-align:center;
}
#login nav,#createAccount nav{
	background:#FFF;
	display:block;
	padding:10px;
	text-align:left;
}
#login nav h1,#createAccount nav h1{
	display:inline-block;
	vertical-align:middle;
	margin:0;
	margin-left:10px;
	text-transform:uppercase;
	font-size:1.6em;
	font-size: 16px;
	transition:all ease-in-out 0.4s;
}
#login #logo,#createAccount #logo{
	height:40px;
	display:inline-block;
	vertical-align:middle;
}
.loginContainer{
	background:rgba(255,255,255,0.3);
	padding:6px;
	
	width:calc(100% - 12px);
	height:calc(100% - 12px) !important;
	max-height:330px;
	max-width:270px;
	display:inline-block;
	margin:auto;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:9001;
	border-radius:12px;
}
.login{
	width:100%;
	height:100%;
	background:#FFF;
	display:inline-block;
	position:relative;
	overflow:hidden;
	border-radius:8px;
	text-align:center;
}
.login h2{
	text-transform:uppercase;
	font-size:2.5em;
}
.login label, .login #loginButton{
	display:none;
}
.login input{
	border:none;
	background:#ececec;
	border-radius:8px;
	padding:8px;
	display:inline-block;
	margin-bottom:10px;
	text-align:center;
	width: calc(100% - 56px);
}
.login .button{
	width: calc(100% - 140px);
}
.login #create{
	padding:15px;
	display:inline-block;
	cursor:pointer;
	color:#FFF;
	text-decoration:none;
}
.login #signup{
	background:#66CCCC;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	display:inline-block;
	color:#FFF;
}
.formMessageWrap{
	padding-top:6px;
}
#formMessage{
	background:#F96;
	display:inline-block;
	padding:6px;
	color:#FFF;
	position:top;
	left:50%;
	top:80px;
	opacity:0;
	border-radius:6px;
}

#login .verse{
	display:inline-block;
	width:calc(100% - 12px);
	text-align:center;
	padding:6px;
	position:absolute;
	bottom:0;
	left:0;
	color:#FFF;
	background:#66CB98;
}
.createAccount{
	display:block;
	padding:20px;
}
#menu-icon{
	top:0;
	left:0;
}
@media screen and (min-width: 600px) {
	#login nav h1,#createAccount nav h1{
		font-size:2.1875em;
	}
	#login nav,#createAccount nav{
		text-align:left;
	}
	#login #logo,#createAccount #logo{
		height:50px;
	}
	#menu-icon{
		top:6px;
		left:6px;
	}
}



/*Form Styles*/

.lightForm label{
	display:block;
	margin-top:6px;
	color:#333;
	text-align:left;
	text-transform:uppercase;
}
#webAddressPreview{
	text-transform:none;
}
.lightForm input{
	border:none;
	background:#ececec;
	border-radius:8px;
	padding:8px;
	display:inline-block;
	width:auto;
	width:calc(100% - 16px);
	margin-bottom:20px;
	text-align:left;
}	
.lightForm textarea{
	display:block;
	width:calc(100% - 16px);
	padding:8px;
	border:none;
	border-radius:8px;
	color:#333;
	background:#ECECEC;
	height:200px;
	resize: none;
}
.lightForm input[type=checkbox],.lightForm input[type=radio]{
	display:inline-block;
	width:auto;
	padding:6px;
	border:none;
	border-radius:10px;
	color:#FFF;
	margin-right:10px;
	vertical-align:middle;
	background:rgba(0,0,0,0.2);
}	
.lightForm .validated{
	border-left:solid 6px #66CB98;
	border-radius:0 8px 8px 0 !important;
	padding-right:0 !important;
}
.lightForm .unvalidated{
	/*border-left:solid 6px;*/
	border-left-style:solid;
	border-left-width:6px;
	border-left-color:#C00;
	border-radius:0 8px 8px 0 !important;
	padding-right:0 !important;
}
@keyframes formHighlight {
  0% {
	  border-left-color:#C00;
  }
  100% {
	  border-left-color:#F90;
  }
}
.lightForm .unvalidated.highlight {
    animation: formHighlight 0.6s ease-in-out alternate infinite none running;
}
#addPageWindow {
    margin-top: 56px;
    padding: 0 6px;
}
#addPageWindow #addNow{
	margin-top:12px;
}
.switchContainer{
	display:block;
	text-align:left;
}
.switch{
	display:inline-block;
	background:none;
	padding:6px 3px;
	color:#FF9966;
	border:solid #FF9966 2px;
	border-radius:10px;
}
.switch .option{
	display:inline-block;
	background:none;
	padding:6px 10px;
	color:#FF9966;
	border-radius:6px;
	margin:0 3px;
	transition:all ease-in-out 0.4s;
	cursor:pointer;
}
.switch .option:hover{
	background:#ececec;
}

.switch .on{
	background:#FF9966;
	color:#FFF;
}
.switch .on:hover{
	background:#FF9966;
	color:#ECECEC;
}

/*Date Picker*/

.dateContainer{
	display:block;
	position:relative;
}
.datePicker{
	width:calc(100% - 64px) !important;
	height:40px !important;
	border:4px solid #ececec !important;
	border-right:none !important;
	border-radius:0 !important;
	box-shadow:none;
	background:none !important;
	display:inline-block !important;
	color:#333;
	font-size:16px !important;
	padding:0 6px !important;
	vertical-align:top;
}
.useTime .datePicker{
	width:calc(100% - 112px) !important;
}
.dateContainer .dateButton{
	width:48px;
	height:48px;
	display:inline-block;
	background-image: url(/spectrum/media/images/icons/datePicker.png);
	background-repeat:no-repeat;
	background-color:#ececec;
	background-size:48px 48px;
	vertical-align:top;
	position:relative;
	cursor:pointer;
	transition:all ease-in-out 0.4s;
}
.dateContainer .dateButton:hover{
	background-color:#CCC;
}
.dateContainer .timeButton{
	width:48px;
	height:48px;
	display:inline-block;
	background-image: url(/spectrum/media/images/icons/timePicker.png);
	background-repeat:no-repeat;
	background-color:#ececec;
	background-size:48px 48px;
	vertical-align:top;
	position:relative;
	cursor:pointer;
	transition:all ease-in-out 0.4s;
}
.dateContainer .timeButton:hover{
	background-color:#CCC;
}
.dateContainer .datePickerWindow{
	width:100%;
	background:#465558;
	min-height:90px;
	display:none;
	position:absolute;
	top:48px;
	left:0;
	z-index:1000;
}
.dateContainer .timePickerWindow{
	width:100%;
	background:#465558;
	min-height:90px;
	display:none;
	position:absolute;
	top:48px;
	left:0;
	z-index:1000;
	text-align:right;
	padding:6px;
	width: calc(100% - 12px);
}
.timePickerWindow .radiateSelect{
	margin-bottom:0;
	height:48px;
	border-radius:0;
}
.timeApprove{
	width:48px;
	height:48px;
	display:inline-block;
	background:url(/radiateMinistry/radiate/media/images/icons/ok.png) no-repeat center center #31393C;
	background-size:contain;
	transition:all ease-in-out 0.4s;
}
.timeApprove:hover{
	background-color:#465558;
}
.timePickerWindow .pick{
	width:50%;
	width:calc(33.3333333333% - 18px);
	display:inline-block;
	float:left;
}
.datePickerWindow .left{
	background:url(/spectrum/media/images/icons/backArrow.png) no-repeat #31393C;
}
.datePickerWindow .right{
	background:url(/spectrum/media/images/icons/forwardArrow.png) no-repeat #31393C;
}
.datePickerWindow .left, .datePickerWindow .right{
	display:table-cell;
	width:30px;
	background-position:center;
	background-size:30px 30px;
	cursor:pointer;
}
.datePickerWindow .dates{
	display:table-cell;
	width:calc(100% - 66px);
}
.datePickerWindow .cal{
	padding-right:6px;
	padding-bottom:6px;
	text-align:left;
}
.datePickerWindow .date{
	display:inline-block;
	margin:6px;
	margin-right:0;
	margin-bottom:0;
	background:#FFF;
	color:#465558;
	width:calc(14.2857% - 6px);
	text-align:center;
	cursor:pointer;
}

.datePickerWindow .ghostDate{
	display:inline-block;
	margin:6px;
	margin-right:0;
	margin-bottom:0;
	background:rgba(255,255,255,0.2);
	color:rgba(255,255,255,0.2);
	width:calc(14.2857% - 6px);
	text-align:center;
}

.datePickerWindow .off{
	cursor:default !important;
	background:none !important;
}
.datePickerWindow .pick{
	width:50%;
	display:inline-block;
	float:left;
}

.datePickerWindow .radiateSelect{
	border-radius:0;
}

.lightForm .roundedRadio input[type=radio] {
	visibility: hidden;
}
.lightForm .roundedRadio {
	width: 28px;
	height: 28px;
	background: #FFF;
	display:inline-block;
	background:none;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border:solid #333 4px;
	position: relative;
	vertical-align:middle;
}

.lightForm .roundedRadio label.check {
	padding:0;
	margin:0;
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

}

.lightForm .roundedRadio label.check:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: #333;
	top: 5px;
	left: 5px;
	border-radius:100%;
	border-top: none;
	border-right: none;
	
	transition: all 0.3s ease 0s;
}

.lightForm .roundedRadio label.check:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.lightForm .roundedRadio input[type=radio]:checked + label.check:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}




/*Key Value Pair*/
.kv_key, .kv_value{
	width:calc(50% - 38px) !important;
	background:rgba(255,255,255,0.3) !important;
	color:#FFF !important;
	padding:3px !important;
	margin:2px !important;
	border-radius:0 !important;
	display:inline-block !important;
	font-size:18px;
}
.keyValueButtons{
	text-align:right;
	background:#42B691;
}
.keyValueButton{
	display:inline-block;
	width:40px;
	height:40px;
	background-color:#42B691;
	cursor:pointer;
	transition:all ease-in-out 0.4s;
	border:solid 5px rgba(0,0,0,0.0);
	opacity:0.3;
}
.keyValueButton.on{
	opacity:1.0;
}
.keyValueButton:hover{
	background-color:#389779;
}
.keyValueButtons .add{
	background-image:url(../media/images/icons/add.png);
	background-repeat:no-repeat;
	background-size:30px 30px;
	background-position:5px 5px;
}
.keyValueButtons .remove{
	background-image:url(../media/images/icons/closeX.png);
	background-repeat:no-repeat;
	background-size:30px 30px;
	background-position:5px 5px;
}
.keyValueButtons .up{
	background-image:url(../media/images/icons/upArrow.png);
	background-repeat:no-repeat;
	background-size:40px 40px;
}
.keyValueButtons .down{
	background-image:url(../media/images/icons/downArrow.png);
	background-repeat:no-repeat;
	background-size:40px 40px;
}
.kv_row label{
	display:inline-block !important;
}
.keyValueLabels{
	padding-left:28px;
}
.keyValueLabel{
	width:calc(50% - 38px) !important;
	display:inline-block;
	color:#FFF;
	text-align:left;
	font-size:14px;
	padding:3px !important;
	margin:2px !important;
}


select{
	display:block;
	width:100%;
	padding:4px 0px;
	background:#fff;
	border:none;
	color:#666;
	height:40px;
	font-size:18px;
	margin-top:0px;
}

.radiateSelect select, .peachSelect select, .selectColored select{
   background: transparent;
   -webkit-appearance: none;
   width:620px;
   width: -webkit-calc(100% + 40px);
   width: -moz-calc(100% + 40px);
	width: -ms-calc(100% + 40px);
	width: -o-calc(100% + 40px);
	width: calc(100% + 40px);
	height:100%;
	color:#FFF;
	font-size:18px;
	padding:8px;
}
.radiateSelect select:focus, .peachSelect select:focus, .selectColored select:focus{
    outline: none;
}
.peachSelect select{
	cursor:pointer;
}
.radiateSelect select option{
	background:#465558;
	cursor:pointer;
}
.lightForm .radiateSelect select option{
	background:#ececec;
}
.peachSelect select option{
	background:#F96;
	max-width:250px;
}
.peachSelect .peachArrow{
	display:inline-block;
	width:40px;
	height:40px;
	background: url(/spectrum/media/images/icons/downArrowWhite.png) no-repeat center center #F96;
   	background-size:50px 50px;
	position:absolute;
	top:0;
	right:0;
	pointer-events: none;
}
.radiateSelect, .selectColored {
	width:calc(100% - 8px);
   height: 40px;
   overflow: hidden;
   border:solid 4px #FFF;
   border-radius:8px;
   background: url(/spectrum/media/images/icons/downArrowGray.png) no-repeat right;
   background-size:40px 40px;
   margin-bottom: 20px;
}

.peachSelect{
	width:calc(100% - 8px);
   height: 40px;
   overflow: hidden;
   	background: url(/spectrum/media/images/icons/downArrowWhite.png) no-repeat right #F96;
   background-size:50px 50px;
	width:100%;
	cursor:pointer;
	position:relative;
}
.lightForm .radiateSelect select,.lightForm  .selectColored select {
	color:#333;
}
.selectColored{
	border:none;
   	background: url(/spectrum/media/images/icons/downArrowGray.png) no-repeat right #F96;
   background-size:50px 50px;
	width:100%;
}
.lightForm .selectColored{
	background-color:#ececec;
	color:#333;
}
.selectDarkColored{
	border:none;
   	background: url(/spectrum/media/images/icons/downArrowGray.png) no-repeat right #E08F66;
    background-size:50px 50px;
	width:100%;
}
.lightForm .selectDarkColored{
	background-color:#CCC;
	color:#333;
}

.datePickerWindow .pick .selectColored, .datePickerWindow .pick .selectDarkColored{
	 /*background-position:120% 50%;*/
     background-size:48px 48px;
}
.radiateSelect select option:hover {
	box-shadow: 0 0 10px 100px #F96 inset;
	color:#FFF;
}
input.filter{
	display:block;
	margin:6px;
	padding:6px;
	width:80%;
	width:calc(100% - 36px);
	border-radius:12px;
	border:solid 6px #ececec;
	background:none;
}
input.filter:focus {
    outline: none;
}

.sectionDivider{
	display:block;
	margin:20px 0;
	position:relative;
	text-align:center;
	background-color:inherit;
}
.sectionDividerLabel{
	display:inline-block;
	padding:0 10px;
	background-color:#FFF;
	z-index:12;
	position:relative;
}
.sectionDividerLine{
	display:inline-block;
	width:100%;
	height:1px;
	background:rgba(0,0,0,0.2);
	position:absolute;
	top:50%;
	left:0;
	z-index:10;
}
	
.windowContent{
	padding-top:60px;
}
.windowContent h1{
	color:#333;
	font-size:1.5em;
}
.windowContent .button{
	margin-top:10px;
}
.fileDrop{
	width:calc(100% - 60px);
	padding:50px 20px;
	margin:6px;
	border:dashed #42B691 4px;
	border-radius:10px;
	text-align:center;
}
.filehover
{
	border-color: #389779;
	background:#ececec;
}
.loadingContainer{
	width:calc(100% - 32px);
	margin:6px;
	padding:6px;
	border:solid #FFF 4px;
	text-align:left;
}
.loadingBar{
	width:0%;
	height:12px;
	background:#42B691;
	display:inline-block;
}

.windowPrompt{
	background:rgba(255,255,255,0.2);
	padding:10px;
	width:calc(100% - 40px);
	height:calc(100% - 20px);
	max-height:300px;
	max-width:300px;
	display:inline-block;
	opacity:0;
	margin:auto;
	margin:auto;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:9005;
}
.windowPrompt::before {
    content: "";
    width: 10000%;
    height: 10000%;
    display: inline-block;
    position: absolute;
    top: -5000%;
    left: -5000%;
    background-color: rgba(0,0,0,0.5);
    z-index: -1;
}
.windowPromptContent{
	background:#31393C;
	width:calc(100% - 12px);
	height:calc(100% - 12px);
	padding:6px;
	overflow:hidden;
	overflow-y:auto;
}
.windowPromptContent h2{
	color:#FFF;
	font-size:18px;
	margin:12px 0;
}
.fileContainer{
	display:block;
	position:relative;
}
.fileContainer input{
	width:calc(100% - 20px);
	height:40px;
	border:4px solid #333;
	border-radius:6px;
	box-shadow:none;
	background:url('/radiateMinistry/radiate/media/images/icons/upArrowGrey.png') no-repeat;
	background-size:48px 48px;
	background-position: 100% 80px;
	display:inline-block;
	color:#333;
	font-size:16px;
	padding:0 6px;
	vertical-align:top;
	transition: all 0.3s ease 0s;
	cursor:pointer;
}
.fileContainer input:hover{
	background-position: right;
}
.selectFile input {
   opacity:0;
   width:620px;
   width: -webkit-calc(100% + 40px);
   width: -moz-calc(100% + 40px);
	width: -ms-calc(100% + 40px);
	width: -o-calc(100% + 40px);
	width: calc(100% + 40px);
	height:100%;
	color:#333;
	font-size:18px;
	padding:0 6px;
	position:absolute;
	z-index:9010;
	top:0;
	left:0;
}
.selectFile {
   	overflow: hidden;
	position:relative;
}
.selectFile div {
	width:100%;
	height:100%;
	text-align:center;
	color:#333;
	padding:6px 0;
}
.fileRemove{
	background: #333 center center no-repeat;
	background-image:url(../media/images/icons/delete.png);
	background-size:30px 30px;
	display: inline-block;
	width: 32px;
	height: 32px;
	position: absolute;
	right: 8px;
	top: 8px;
	border-radius: 100%;
	cursor:pointer;
	transition: all 0.3s ease 0s;
}
.fileRemove:hover{
	background-color:#666;
}

/*MultiSelect*/
.multiSelectContainer{
	background: rgba(0,0,0,0.05);
	border-radius:10px;
	padding:6px 0;
}
.selectedOption{
	display:none !important;
}
.multiSelectPicks{
	width:calc(100% - 20px);
	/*border:4px solid #FFF;
	border-radius:0;*/
	box-shadow:none;
	display:inline-block;
	color:#FFF;
	font-size:16px;
	padding:0 0 6px 6px;
	vertical-align:top;
	transition: all 0.3s ease 0s;
	cursor:pointer;
	overflow-x:hidden;
	overflow-y:auto;
	text-align:left;
}
.multiSelectSelection{
	background:url(../media/images/icons/closeX.png) no-repeat right #42B691;
	background-position:center right;
	background-size:30px 30px;
	background-color:#42B691;
	display:inline-block;
	padding:6px;
	color:#FFF;
	margin-right:6px;
	margin-top:6px;
	border-radius:10px;
	transition:background-color ease-in-out 0.4s;
}
.multiSelectSelection>span{
	vertical-align:middle;
}
.multiSelectSelection:hover{
	background:url(../media/images/icons/closeX.png) no-repeat right #389779;
	background-color: #389779;
	background-position:center right;
	background-size:30px 30px;
}
.removeMultiSelectSelection{
	display:inline-block;
	background-image:url(/radiateMinistry/radiate/media/images/icons/closeX.png);
	background-color:transparent;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:30px 30px;
	cursor:pointer;
	width:30px;
	height:30px;
	margin-left:6px;
	border-radius:30px;
	vertical-align:middle;
	transition:background-color ease-in-out 0.4s;
}
.removeMultiSelectSelection:hover{
	background-color:#42B691;
}
.multiSelectContainer .listFilter{
	margin-top:6px;
	width: calc(100% - 30px) !important;
	margin-left: 6px;
}
.listFilter{
	width:calc(100% - 24px);
	border-radius:10px;
	margin:60px 6px 6px 6px;
	padding:6px;
	color:#FFF;
	background:#31393C;
	border:none;
}
.list{
	list-style:none;
	width:calc(100% - 12px);
	height:200px;
	overflow-y:auto;
	border-radius:10px;
	padding:0;
	margin:0 6px;
	background:rgba(0,0,0,0.2);
}
.fullHeightList.list{
	height: calc(100% - 100px);
}
.list li{
	width:calc(100% - 12px);
	display:none;
	border-top:solid #ececec 1px;
	background:#FFF;
	color:#465558;
	padding:6px;
	text-align:left;
	transition:background ease-in-out 0.4s;
	cursor:pointer;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.list li a{
	color:#465558;
	text-decoration:none;
	display:block;
}
.list li:hover{
	background:#ececec;
}
	
.list li.match{
	display:block;
}
.list li.last{
	border-radius:0 0 10px 10px !important;
}
/*Counter*/
.counter{
	width:calc(100% - 66px);
	height:42px !important;
	border:4px solid #ececec !important;
	border-right:none;
	border-radius:0;
	box-shadow:none;
	background:none;
	display:inline-block;
	font-size:16px !important;
	padding:0 6px !important;
	vertical-align:top;
	border-radius:8px 0 0 8px !important;
}
.counterContainer{
	width:100%;
	display:inline-block;
	position:relative;
}
.counterContainer .counterButtons{
	width:50px;
	height:50px;
	display:inline-block;
	/*background: url(/radiate/media/images/icons/datePicker.png) no-repeat #FFF;
	background-size:48px 48px;*/
	vertical-align:top;
	border-radius:0 8px 8px 0;
	overflow:hidden;
	cursor:pointer;
}
.counterContainer .counterButtons .up{
	width:50px;
	height:25px;
	display:inline-block;
	background: url(/radiateMinistry/radiate/media/images/icons/upArrowGrey.png) no-repeat #ececec;
	background-size:25px 25px;
	background-position:center;
	vertical-align:top;
	transition:all ease-in-out 0.4s;
}


.counterContainer .counterButtons .up:hover{
	background: url(/radiateMinistry/radiate/media/images/icons/upArrowGrey.png) no-repeat #CCC;
	background-size:25px 25px;
	background-position:center;
	color:#FFF;
}
.counterContainer .counterButtons .down{
	width:50px;
	height:25px;
	display:inline-block;
	background: url(/radiateMinistry/radiate/media/images/icons/downArrowGrey.png) no-repeat #ececec;
	background-size:25px 25px;
	background-position:center;
	vertical-align:top;
	transition:all ease-in-out 0.4s;
	
}
.counterContainer .counterButtons .down:hover{
	background: url(/radiateMinistry/radiate/media/images/icons/downArrowGrey.png) no-repeat #CCC;
	background-size:25px 25px;
	background-position:center;
	color:#FFF;
}
.counterContainer input{
	width:calc(100% - 70px);
	height:42px;
	box-shadow:none;
	background:#FFF;
	display:inline-block;
	font-size:16px;
	padding:0 6px;
	vertical-align:top;
	transition: all 0.3s ease 0s;
	cursor:pointer;
}

#colorPicker{
	width:100%;
	max-width:400px;
	height:600px;
	margin:50px 0;
}
.tabContainer{
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
	display:inline-block;
}
.tabSlider{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
.tabContainer .tabItem{
	width:100%;
	height:100%;
	display:inline-block;
	vertical-align:top;
}
.tabButton{
	background:#465558;
	text-align:center;
	padding:14px 0;
	text-transform:uppercase;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	color:rgba(255,255,255,0.3);
	cursor:pointer;
	-webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */
	transition: all 0.3s ease-in-out;
}
.tabButton:hover{
	color:rgba(255,255,255,0.75);
}
.tabButton.active{
	color:#FFF;
	border-bottom:solid 4px #FFF;
	padding:14px 0 10px 0;	
}
.radiateSlider{
	display:block;
	padding:20px;
}
.radiateSlider .track{
	display:block;
	padding:4px 0;
	background:#389779;
	border-radius:8px;
}
.radiateSlider .groove{
	display:block;
	height:0;
	position:relative;
}
.radiateSlider .point{
	position:absolute;
	width:0;
	height:0;
	left:0%;
	top:0px;
}
.radiateSlider .handle{
	margin-top:-10px;
	margin-left:-10px;
	background:#fff;
	width:16px;
	height:16px;
	border-radius:100%;
	border:solid 2px #42B691;
	cursor:move;
}

#colorWheelImage{
	width:100%;
}
.colorWheel{
	display:inline-block;
	position:relative;
	width:100%;
}
.spacer {
    margin-top: 100%;
}
.spectrum {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	overflow:hidden;
	padding:0 10px;
}
.alphaWrap{
	background:url(../media/images/assets/colorAlpha.png) repeat;
	background-size:20px 20px;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:50px;
	z-index:9001;
	
}
.selectedColor{
	width:calc(100% - 50px);
	height:50px;
	background:none;
	display:inline-block;
}
.approveColor{
	width:50px;
	height:50px;
	display:inline-block;
	background:url(../media/images/icons/ok.png) no-repeat #42B691;
	background-size:40px 40px;
	background-position:5px 5px;
	cursor:pointer;
}
.colorPickerContainer{
	display:block;
}
.colorPickerContainer input{
	width:calc(100% - 20px);
	height:40px;
	border:4px solid #FFF;
	border-radius:0;
	box-shadow:none;
	display:inline-block;
	color:#FFF;
	font-size:16px;
	padding:0 6px;
	vertical-align:top;
	transition: all 0.3s ease 0s;
	cursor:pointer;
}
.colorPickerContainer input:hover{
	-moz-box-shadow:    inset 0 0 0px 4px #42B691;
   	-webkit-box-shadow: inset 0 0 0px 4px #42B691;
   	box-shadow:         inset 0 0 0px 4px #42B691;
}
#viewPort{
	position:absolute;
	top:50%;
	left:50%;
	width:16px;
	height:16px;
	border:3px solid #FFF;
	margin-left:-11px;
	margin-top:-11px;
	z-index:9000;
	border-radius:100%;
}
.mixLabel{
	width:40px;
	color:#fff;
	font-size:16px;
	display:inline-block;
	vertical-align:middle;
}
.mixValue{
	width:40px;
	color:#fff;
	font-size:16px;
	display:inline-block;
	vertical-align:middle;
}
.mixSlider{
	width:calc(100% - 80px);
	display:inline-block;
	vertical-align:middle;
}
.swatch{
	cursor:pointer;
	border:solid 4px rgba(255,255,255,0.8);
	width:40px;
	height:40px;
	display:inline-block;
	margin:5px;
}
.roundedCheck input[type=checkbox] {
	visibility: hidden;
}
.roundedCheck {
	width: 28px;
	height: 28px;
	background: #fcfff4;
	display:inline-block;
	background:none;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border:solid #333 4px;
	position: relative;
	vertical-align:middle;
}

.roundedCheck label.check {
	padding:0;
	margin:0;
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

}

.roundedCheck label.check:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 5px;
	left: 4px;
	border: 3px solid #333;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
	transition: all 0.3s ease 0s;
}

.roundedCheck label.check:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.roundedCheck input[type=checkbox]:checked + label.check:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
.checkLabel{
	padding:6px;
	display:inline-block !important;
	vertical-align:middle;
	margin-top:0 !important;
}
.donateButton{
	margin-top:26px;
	background:#F96 !important;
	color:#FFF;
	text-align:center !important;
	transition:all ease-in-out 0.4s;
}
.donateButton:hover{
	background:#E08F66 !important;
}
.aboutChurch{
	padding:12px;
}
/*Radio Button */
.roundedRadio input[type=radio] {
	visibility: hidden;
}
.roundedRadio {
	width: 28px;
	height: 28px;
	background: #fcfff4;
	display:inline-block;
	background:none;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border:solid #FFFFFF 4px;
	position: relative;
	vertical-align:middle;
}

.roundedRadio label.check {
	padding:0;
	margin:0;
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

}

.roundedRadio label.check:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: #fcfff4;
	top: 5px;
	left: 5px;
	border-radius:100%;
	border-top: none;
	border-right: none;
	
	transition: all 0.3s ease 0s;
}

.roundedRadio label.check:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.roundedRadio input[type=radio]:checked + label.check:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
.listOption{
	display:inline-block;
	width:80%;
	width:calc(100% - 12px);
	margin-top:12px;
	padding:6px;
	background:rgba(0,0,0,0.1);
	border:thin #CCC 1px;
	border-radius:12px;
	text-align:left;
}
.listLabel{
	display:inline-block;
	vertical-align:middle;
	padding:5px;
	margin-top: 2px;
}
.listOption .modify{
	margin-top:0 !important;
	float:right;
	
}

.listOption .delete,.listOption .edit,.listOption .view,.listOption .results{
	display:inline-block;
	float:right;
	vertical-align:middle;
}
.listOption.active{
	background:#FFF;
}
.listOption.inactive{
	background:#FFF;
	opacity:0.6;
}

/********Donations**********/
.creditCardOption{
	display:inline-block;
	width:80%;
	width:calc(100% - 12px);
	margin-top:12px;
	padding:6px;
	background:rgba(0,0,0,0.1);
	border:thin #CCC 1px;
	border-radius:12px;
	text-align:left;
}
.creditCardOption input,.creditCardOption img{
	vertical-align:middle;
	margin-right:12px;
	margin-bottom:0;
}
.creditCardOption .creditCardNumbers{
	display:inline-block;
	vertical-align:middle;
}
.creditCardOption .delete{
	display:inline-block;
	float:right;
	vertical-align:middle;
	padding:8px;
}
.creditCardOption .defaultIt{
	display:inline-block;
	float:right;
	vertical-align:middle;
	padding:8px;
	margin-right:6px;
}
.transactionItem{
	display:inline-block;
	width:80%;
	width:calc(100% - 12px);
	margin-top:12px;
	padding:6px;
	background:rgba(0,0,0,0.1);
	border:thin #CCC 1px;
	border-radius:12px;
	text-align:left;
}
.transactionItem .date,.transactionItem .amount{
	vertical-align:middle;
	margin-right:12px;
	margin-bottom:0;
	display:inline-block;
}
.transactionItem .amount{
	float:right;
}
.transactionItem .processing{
	color:#66CB98 !important;
}
.transactionItem img{
	vertical-align:middle;
	margin-right:12px;
	margin-bottom:0;
}
.transactionItem .creditCardNumbers{
	display:inline-block;
	vertical-align:middle;
	color:#999;
}
.transactionItem .button{
	border:none;
	background:rgba(0,0,0,0.2);
	color:#333;
	border-radius:8px;
	padding:6px;
	font-size:12px;
	display:inline-block;
	text-transform:uppercase;
	cursor:pointer;
	transition:all ease-in-out 0.4s;
	margin:6px 6px 0 0;
}
.transactionItem .button:hover{
	background:rgba(0,0,0,0.4);
}
.transactionItem .subMenu{
	margin:0;
}
.churchPreview{
	display:inline-block;
	padding-top:6px;
	width:calc(100% - 12px);
	background:#FFF;
	border-radius:6px;
	position:relative;
	text-align:left;
}
.churchPreview .delete{
    display: inline-block;
    width: 44px;
    height: 44px;
    background: #FF9966;
    background-image: url('/spectrum/media/images/icons/delete.png');
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 44px;
    background-size: 36px 36px;
	vertical-align:middle;
	margin-left:6px;
}
.churchPhoto{
	display:inline-block;
	width:120px;
	height:120px;
	background-size:cover;
	border-radius:100%;
	margin-top:-30px;
	margin-left:6px;
	cursor:pointer;
	border:solid 6px #F96;
}
.miniChurchPhoto{
	display:inline-block;
	width:34px;
	height:34px;
	background-size:cover;
	border-radius:100%;
	margin-left:12px;
	cursor:pointer;
	border:solid 6px #F96;
	vertical-align:middle;
}
.churchTitle{
	color:#F96;
	font-size:2em;
	text-transform:uppercase;
	display:inline-block;
	width:70%;
	width:calc(100% - 220px);
	padding-left:12px;
	vertical-align:top;
	cursor:pointer;
}
.churchPreview .churchPhoto,.churchPreview .churchTitle,.churchPreview .delete{
	vertical-align:middle;
}
.churchPreview .churchPhoto{
	margin-top:0;
}
.userInvite{
	display:inline-block;
	width:100%;
	width:calc(100% - 12px);
	max-width:600px;
	padding:6px;
	background:#ececec;
	border-radius:72px;
	position:relative;
}
.userInvite .churchPhoto{
	margin:0;
	vertical-align:middle;
	cursor:default;
}
.checkShim{
	vertical-align:middle;
	position:absolute;
	z-index:5;
	background:#FFFFFF;
	padding:6px;
	border-radius:100%;
	left:-8px;
	display:inline-block;
	box-shadow: 5px 5px 0px 0px #333 !important;
}
.checkShim label{
	margin:0 !important;
}
.followButton{
	display:block;
	padding:6px;
	border-radius:0 0 6px 6px;
	cursor:pointer;
	color:#FFF;
	text-align:center;
}
.churchPlace{
	color:#999;
	font-size:0.5em;
}
.followButton.on{
	background-color:#66CC99;
}
.followButton.off{
	background-color:#F96;
}
#addCardArea{
	display:none;
}
#churchHeader{
	display:inline-block;
	width:100%;
	height:220px;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	background-color:#F96;
}
.profileTitle{
	display:inline-block;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	background:rgba(255,255,255,0.3);
}
.profileTitle .viewTitle{
	padding-left:140px;
	padding-right:24px;
	font-size:1.1em;
	color:#FFF;
	background-color:rgba(255,153,102,0.8);
	display:inline-block;
	margin:0 !important;
	padding-top:12px;
	padding-bottom:12px;
}
.profileHeader{
	text-align:center;
	padding:24px;
}
.profileHeader .viewTitle{
	display:block;
	text-align:center;
	color:#FFF;
	font-size:36px;
	font-weight:400;
	margin:0;
}
.profileHeader .profileLocation{
	display:inline-block;
	font-size:16px;
	text-transform:uppercase;
	color:#F96;
	padding-left:24px;
	background:url(../media/images/assets/location.png) center left no-repeat;
	background-size:12px 12px;
}
.myProfilePhoto{
	
	position:relative;
}
.churchPhotoWrap{
	display:inline-block;
	width:80px;
	height:80px;
	padding:6px;
	border-radius:100%;
	background:rgba(255,255,255,0.3);
	overflow:hidden;
	margin-top:-70px;
	position:relative;
}
#churchPhoto{
	display:inline-block;
	width:100%;
	height:100%;
	border-radius:100%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#66CC99;
	overflow:hidden;
}

.photoEdit{
	display:inline-block;
	width:44px;
	height:44px;
	background:url(../media/images/icons/edit.png) no-repeat rgba(0,0,0,0.8);
	border:solid 4px #FFF;
	background-size:32px 32px;
	background-position:6px 6px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-26px;
	margin-top:-26px;
	cursor:pointer;
	opacity:0.0;
	transition: opacity 0.4s ease 0s;
	border-radius:100%;
}
.ministrySubMenu {
    display: block;
    position: relative;
    width: 100%;
	padding:0 10px 10px 10px;
	width:calc(100% - 20px);
	height: 52px;
}
.ministrySubItem {
    display: inline-block;
    width: 25%;
    padding: 8px;
    margin: 0;
    width: calc(25% - 18px);
    text-align: center;
    float: left;
	border-left:solid 1px #ececec;
	border-right:solid 1px #FFF;
	background-color:rgba(255,255,255,0);
	transition: all ease-in-out 0.4s;
	cursor:pointer;
}
.ministrySubItem:hover {
	background-color:rgba(255,255,255,1);
}
.ministrySubTitle {
    display: inline-block;
    padding: 6px 0 2px 0;
    border-bottom: solid 4px rgba(255,255,255,0);
	transition: all ease-in-out 0.4s;
	color:#333;
}
.ministrySubItem.current>.ministrySubTitle {
	color:#F96;
    border-bottom: solid 4px #F96;
}
.ministrySubMenu>.ministrySubItem:first-child {
	border-left:none;
    width: calc(25% - 17px);
}
.ministrySubMenu>.ministrySubItem:last-child {
	border-right:none;
    width: calc(25% - 18px);
}
.ministryFrame{
	padding: 10px;
    transition: 0.4s ease-in-out all;
}
#churchPhoto:hover .photoEdit,#churchHeader:hover .photoEdit,.myProfilePhoto:hover .photoEdit{
	opacity:1.0;
}
.ministryHeader{
	background-color:#FAFAFA;
}
.ministryHeader .churchPhotoWrap{
	margin:20px !important;
	width:80px !important;
	height:80px !important;
	vertical-align:middle;
}
.ministryTitle {
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
}
.churchBox{
	display:inline-block;
	width:100%;
	width:calc(100% - 48px);
	max-width:900px;
	padding:0 24px;
}

.profilePad{
	display:inline-block;
	width:100%;
	width:calc(100% - 12px);
	padding:6px;
	max-width:1000px;	
}
.profileContent{
	display:block;
	width:100%;
	vertical-align:top;
}
.profileSide{
	display:block;
	width:100%;
	padding:6px;
	vertical-align:top;
	color:#999;
	font-size:0.8em;
}
.profileSide .boxInsert{
	text-align:left;
}
.profileSide h3{
	display:block;
	color:#333;
	border-bottom:2px solid #ececec;
}
.profileSide .button{
	margin-top:12px;
}

.billingConnection .button{
	margin:6px 3px 0 3px;
}
.billingConnection .amountDue{
	background:#ececec;
	border-radius:6px;
	overflow:hidden;
	text-align:left;
}
.billingConnection .due{
	background:#F96;
	color:#FFF;
	padding:6px;
	display:inline-block;
}
.billingConnection .amount{
	display:inline-block;
	padding:6px;
	float:right;
}
.clientListing{
	background:#FFF;
	border-radius:6px;
	overflow:hidden;
	text-align:left;
	padding:6px;
	margin-bottom:6px;
}
.clientListing .button{
	margin-right:6px;
}
.subMenu .button{
	margin-right:6px;
}
.viewTable{
	display:table;
	width:100%;
	text-align:left;
	border-collapse: collapse;
}
.viewRow{
	display:table-row;
	border-top:solid 1px #ececec;
}
.viewTable>.viewRow:first-child{
	border-top:none;
}
.viewCell{
	display:table-cell;
	padding:6px;
}
.viewKey{
	font-weight:700;
	padding-right:36px;
}
.viewValue{
	font-weight:400;
}
.modify{
	display:inline-block;
	width:30px;
	height:30px;
	background-color:#F96;
	border-radius:100%;
	margin-right:6px;
	margin-top:6px;
	transition: all 0.4s ease 0s;
	cursor:pointer;
}
.modify:hover{
	background-color:#E08F66 !important;
}
.modify.edit{
	background-image:url(../media/images/icons/edit.png);
	background-position:center;
	background-size:25px 25px;
}
.modify.delete{
	background-image:url(../media/images/icons/delete.png);
	background-position:center;
	background-size:25px 25px;
}
.modify.view{
	background-image:url(../media/images/icons/privacy.png);
	background-position:center;
	background-size:25px 25px;
}
.modify.room{
	background-image:url(../media/images/icons/rooms.png);
	background-position:center;
	background-size:25px 25px;
}
.modify.checkIn{
	background-image:url(../media/images/icons/checkIn.png);
	background-position:center;
	background-size:25px 25px;
	background-repeat:no-repeat;
}
.modify.checkOut{
	background-image:url(../media/images/icons/checkOut.png);
	background-position:center;
	background-size:25px 25px;
	background-repeat:no-repeat;
}
.modify.results{
	background-image:url(../media/images/icons/results.png);
	background-position:center;
	background-size:25px 25px;
	background-repeat:no-repeat;
}
#profileBase #x_content,#prayerBase #x_content{
	height:140px !important;
	color:#333 !important;
}
#profileBase .donateButton,#prayerBase .donateButton{
	margin: 6px 0 0 0;
}
#mainWrap{
	vertical-align:top;
	display:inline-block;
	width:100%;
	width:calc(100% - 12px);
	position:relative;
}
#churchesWrap{
	vertical-align:top;
	display:inline-block;
	width:100%;
	position:relative;
	margin-top:6px;
}
.leaderTitle {
    font-size: 18px;
    margin: 12px;
    color: rgba(0,0,0,0.4);
}
.ministryOption {
    background: #FFF;
    margin-top: 6px;
    border-radius: 60px 6px 6px 60px;
}
.ministryOption .churchPhotoWrap{
	width:72px;
	height:72px;
	margin-top:0;
	vertical-align:middle;
}

@media screen and (min-width: 800px) {
	#mainWrap{
		width:100%;
		width:calc(100% - 300px);
		max-width:650px;
	}
	#churchesWrap{
		width:294px;
		margin-left:6px;
		margin-top:0;
	}
}
.churchesListing{
	margin:6px 0;
	cursor:pointer;
	padding:6px;
	border-radius:66px;
	background-color:#FFF;
	transition: all 0.4s ease 0s;
}
.churchesListing:hover{
	background-color:#ececec;
}
.churchesListing>.postPhoto{
	margin-right:6px;
	vertical-align:middle;
}
.churchesListing>.churchesListingTitle{
	display:inline-block;
	vertical-align:middle;
	width:80%;
	width:calc(100% - 66px);
	text-align:left;
}
.churchWrap1 {
    color: #FFF;
    font-size: 16px;
    background: #F96;
    display: block;
    padding: 8px;
    border-radius: 6px;
    text-transform: uppercase;
}
#mainWrap>.button{
	/*width:calc(100% - 28px);*/
	display:block;
	margin:6px;
	text-align:center;
	padding:8px;
}

#mainWrap .approval{
	margin-top:6px;
	text-align:left;
	max-width:none;
}
#mainWrap .approvalButtons {
	float:none;
}
.mainSection{
	display:none;
}
#mainTimeline{
	display:block;
}
#whoToFollow{
	margin-top:6px;
}
.post{
	display:block;
	border-radius:8px;
	background:#FFF;
	padding:12px;
	margin-top:6px;
	text-align:left;
}
.postPhoto{
	display:inline-block;
	width:60px;
	height:60px;
	background-size:cover;
	background-position:center;
	border-radius:100%;
	cursor:pointer;
	vertical-align:top;
}
.postPhotoBy {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
	vertical-align:middle;
}
.postTitle{
	display:inline-block;
	margin-left:12px;
	padding:6px 0;
	vertical-align:top;
	font-size:1.2em;
	color:#F96;
}
.postContent{
	display:block;
	padding-left:72px;
}
.postAgo{
	font-size:0.7em;
	color:#999;
}	
.loadMore, .loadMorePrayer{
	margin-top:6px;
}
.loadingPost{
	background:url(../media/images/assets/loading.gif) no-repeat center;
	height:38px;
	margin-top:6px;
}
.removePost{
	display:inline-block;
	float:right;
	width:30px;
	height:30px;
	background:url(../media/images/icons/delete.png) no-repeat center #F96;
	background-size:26px 26px;
	border-radius:100%;
	cursor:pointer;
	opacity:0.0;
	transition: opacity 0.4s ease 0s;
}
.post:hover .removePost{
	opacity:0.4;
}
.removePost:hover{
	opacity:1.0 !important;
}
.connectionBox{
	background:rgba(255,255,255,0.3);
	padding:6px;
	width:100%;
	width: calc(100% - 12px);
	border-radius:12px;
	vertical-align:top;
}
.connectionBox .connectionBoxInsert{
	width:100%;
	height:100%;
	background:#FFF;
	display:block;
	position:relative;
	border-radius:8px;
	text-align:left;
	margin:0;
	overflow:hidden;
	overflow-x:auto;
	overflow-y:hidden;
}
.mainOption,.mainMore{
	display:table-cell;
	width:120px;
	background:#FFF;
	text-align:center;
	border-radius:8px;
	padding:6px;
	transition: all 0.4s ease 0s;
	vertical-align:top;
	cursor:pointer;
}
.mainOption:hover,.mainMore:hover{
	background:#ececec;
}
.mainOption.on{
	background:#F96 !important;
	color:#FFF;
}
.mainPhotoWrap{
	display:inline-block;
	width:100px;
	height:100px;
	padding:6px;
	border-radius:100%;
	background:rgba(255,255,255,0.3);
	overflow:hidden;
	position:relative;
}
.mainMore .mainPhoto{
	background-image:url(../media/images/assets/add.png);
}
.mainPhoto{
	display:inline-block;
	width:100%;
	height:100%;
	border-radius:100%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#FFF;
	overflow:hidden;
}

.userCard{
	display:inline-block;
	border-radius:12px;
	background:#FFF;
	padding:12px;
	margin:6px;
	text-align:center;
	width:calc(100% - 36px);
	vertical-align:top;
	margin-top:30px;
	cursor:pointer;
}
.userPhotoWrap{
	display:inline-block;
	width:50px;
	height:50px;
	padding:6px;
	border-radius:100%;
	background:rgba(255,255,255,0.3);
	overflow:hidden;
	margin-top:-37px;
	position:relative;
}
.userPhoto{
	display:inline-block;
	width:100%;
	height:100%;
	border-radius:100%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#66CC99;
	overflow:hidden;
}
.profileOptions{
	display:block;
	border-radius:12px;
	background:#FFF;
	text-align:left;
	margin-bottom:6px;
	overflow:hidden;
}
.profileOptions .followButton{
	display:block;
	padding:6px;
	float:none;
	margin:6px;
	border-radius:6px;
}
.profileOption{
	display:inline-block;
	background:#FFF;
	padding:16px 16px 12px 16px;
	text-transform:uppercase;
	border-bottom:solid 4px #FFF;
	transition: all 0.4s ease 0s;
	cursor:pointer;
	font-size:0.75em;
}
.profileOption:hover{
	background:#F96;
	border-bottom:solid 4px #F96;
}
.profileOption.on{
	border-bottom:solid 4px #F96;
}
.connectionDashboard{
	display:block;
	width:100%;
}
.approvalBox{
	display:inline-block;
	width:90%;
	width:calc(100% - 18px);
	max-width:512px;
	vertical-align:top;
	margin-right:6px;
	padding:6px;
	background:rgba(255,255,255,0.3);
	margin-top:6px;
	border-radius:12px;
}
.approval{
	display:inline-block;
	width:100%;
	width:calc(100% - 12px);
	max-width:500px;
	background:#FFF;
	margin-top:6px;
	padding:6px;
	border-radius:8px;
}
.approval:first-child{
	margin-top:0;
}
.approvalPhotoWrap{
	display:inline-block;
	width:60px;
	height:60px;
	padding:6px;
	border-radius:100%;
	background:rgba(255,255,255,0.3);
	overflow:hidden;
	position:relative;
	vertical-align:middle;
}
.approvalName{
	display:inline-block;
	vertical-align:middle;
	margin-left:6px;
	width:50%;
	width:calc(100% - 190px);
}
.approvalButtons{
	display:inline-block;
	vertical-align:middle;
	width:100px;
	float:right;
	margin-right:12px;
}
.approvalButtons>div{
	display:inline-block;
	width:100px;
	border-radius:6px;
	background:#ececec;
	padding:6px;
	text-align:center;
	cursor:pointer;
	transition: all 0.4s ease 0s;
}
#showNotifications{
	position:relative;
}
#showNotifications .notificationCount{
	display:inline-block;
	height:14px;
	font-size:14px;
	line-height:14px;
	color:#333;
	background:#FFF;
	border-radius:14px;
	padding:4px 8px;
    margin-top: -20px;
    left: 6px;
    position: absolute;
	border:3px solid #F96;
}
nav#side .notificationCount{
	display:inline-block;
	height:14px;
	font-size:14px;
	line-height:14px;
	color:#FFF;
	background:#F96;
	border-radius:14px;
	padding:4px 8px;
	vertical-align:middle;
	margin-right:6px;
	margin-top:-2px;
}
.approvalApprove,.notificationApprove{
	background:#F96 !important;
	color:#FFF;
	margin-bottom:6px;
}
.approvalApprove:hover,.notificationApprove:hover{
	background:#E08F66 !important;
}
.approvalDeny:hover,.notificationDeny:hover{
	background:#CCC;
}
.imageHeader{
	display:inline-block;
	width:100%;
	max-width:800px;
}
.imageHeader>img{
	width:100%;
}
.searchResult{
	font-size: 32px;
    padding: 12px;
    color: #999;
}
.postIcon{
	display: inline-block;
    height: 80px;
    width: 80px;
    vertical-align: middle;
    background-image: url('/spectrum/media/images/icons/posts.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.postLead {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    color: #999;
}
.startBlock{
	background-image:none;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    background-color: #85D2DC;
    border-radius: 8px;
	text-align:right;
	padding:48px;
	margin-bottom:24px;
}
.startContent{
	display:inline-block;
	width:100%;
	text-align:center;
}
@media screen and (min-width: 880px) {
	.startBlock{
		background-image: url('../media/images/bgs/welcomePreview.png');
		text-align:right;
	}
	.startContent{
		display:inline-block;
		width:50%;
		text-align:center;
	}
}

.startLead{
	color:#FFF;
	text-transform:uppercase;
	font-size:36px;
	margin-bottom:12px;
}
.startButton{
	color:#F96 !important;
	background-color:#ececec !important;
}
.startButton:hover{
	color:#F96 !important;
	background-color:#FFF !important;
}
.findBox{
	display:block;
	vertical-align:middle;
	padding:6px;
}
.findBox input,.findBox label, .findBox div{
	display:block;
	width:100%;
	width:calc(100% - 18px);
	margin:auto;
	vertical-align:middle;
}

.findBox .radiateSelect{
	padding-right:40px;
}
.findBox select{
	width: -webkit-calc(100% + 60px);
	width: -moz-calc(100% + 60px);
	width: -ms-calc(100% + 60px);
	width: -o-calc(100% + 60px);
	width: calc(100% + 60px);
}
.connectionBox .donateButton{
	margin:6px;
}
.page{
	display:inline-block;
	margin:6px;
	border-radius:100%;
	width:36px;
	height:36px;
	vertical-align:middle;
	text-align:center;
	background:#CCC;
	color:#FFF;
	cursor:pointer;
	transition: all 0.4s ease 0s;
	line-height:36px;
}
.page:hover{
	background:#999;
}
.page.current{
	background:#F96;
}
input[name='amount']{
	font-size:36px;
}
.reportMetric{
	display:block;
	width:auto;
	vertical-align:bottom;
}
.reportTable{
	display:table;
	width:100%;
	text-align:left;
}
#reportTableWrap{
	border-radius: 6px;
	overflow: hidden;
	overflow-x: auto;
}
.reportTable tr{	
	transition: all 0.4s ease 0s;
}
.reportTable tr:nth-child(even) {background: #ececec}
.reportTable tr:nth-child(odd) {background: #FFF}
.reportTable tr:hover{
	background:#FAE4D0;
}
.reportHeader{
	background:#F96 !important;
}
.reportTable td{
	padding:6px !important;
}
.reportPie{
	display:inline-block;
	vertical-align:top;
	width:50%;
	width:calc(50% - 40px);
	margin:20px;
	max-width:300px;
}
.eventWrap{
	background:rgba(255,255,255,0.3);
	padding:6px;
	width:calc(100% - 12px);
	display:inline-block;
	border-radius:12px;
	vertical-align:top;
	margin-bottom:6px;
}
.eventWrap .event{
	width:100%;
	width:calc(100% - 12px);
	padding:6px;
	height:100%;
	background:#FFF;
	display:inline-block;
	position:relative;
	border-radius:8px;
	text-align:left;
	margin:0;
}
.event .eventDate{
	display:inline-block;
	width:80px;
	vertical-align:middle;
	text-align:center;
	background:#F96;
	color:#FFF;
	border-radius:6px;
}
.event .eventMonth{
	display:block;
	padding:6px;
	font-size:0.75em;
	font-weight:400;
	text-transform:uppercase;
}
.event .eventDay{
	display:block;
	padding:0 6px;
	font-size:2.0em;
	font-weight:400;
	line-height: 0.8em;
}
.event .eventYear{
	display:block;
	padding:6px;
	font-size:0.75em;
	font-weight:400;
}
.event .eventInfo{
	display:inline-block;
	vertical-align:middle;
}
.eventRegister{
	display:block;
	width:auto;
	max-width:none;
	margin-top:6px;
	text-align:center;
	background:#66CB98;
	text-decoration:none;
}
.eventRegister:hover{
	background:#52A27A !important;
	background-color:#52A27A !important;
}
.eventMoreInfo{
	display:block;
	width:auto;
	max-width:none;
	margin-top:6px;
	text-align:center;
}
.eventInfoBox{
	display:none;
}
.eventWrap .eventInfoBox{
	width:100%;
	width:calc(100% - 12px);
	padding:6px;
	height:100%;
	background:#FFF;
	position:relative;
	border-radius:8px;
	text-align:left;
	margin:0;
	margin-top:6px;
	overflow:hidden;
}
.eventWrap .eventInfoBox .eventInfoBoxSide{
	display:inline-block;
	width:100%;
	width:calc(100% - 12px);
	padding:6px;
	max-width:120px;
	vertical-align:top;
	background:#F96;
	border-radius:6px;
}
.eventWrap .eventInfoBox .eventInfoBoxMain{
	display:inline-block;
	width:100%;
	width:calc(100% - 156px);
	padding:12px;
	vertical-align:top;
	font-weight:400;
}
.eventWrap .eventInfoBox .eventInfoBoxMain p{
	margin:0;
}
.eventWrap .eventInfoBox .eventInfoBoxImage{
	width:100%;
	height:120px;
	border-radius:100%;
	display:inline-block;
	text-align:left;
	padding:0;
	margin:0;
	margin-bottom:6px;
	overflow:hidden;
}
.eventInfoBoxLabel{
	color:#FFF;
}
.eventInfoBoxValue{
	font-weight:400;
	color:#FFF;
}
.tos{
	text-align:left;
	font-weight:400;
}
.tos strong{
	font-weight:700;
}

@media screen and (min-width: 700px) {
	.churchPhotoWrap{
		display:inline-block;
		width:200px;
		height:200px;
		margin-top:-136px;
	}
	#churchHeader{
		height:400px;
	}.profileTitle .viewTitle{
		padding-left:260px;
		font-size:1.5em;
	}
	.userCard{
		display:inline-block;
		border-radius:12px;
		background:#FFF;
		padding:12px;
		margin:6px;
		text-align:center;
		width:calc(50% - 36px);
		vertical-align:top;
		margin-top:30px;
	}
}
@media screen and (min-width: 880px) {
	.profileContent{
		display:inline-block;
		width:100%;
		width:calc(100% - 362px);
	}
	.profileSide{
		display:inline-block;
		width:300px;
	}
	.profileOptions .followButton{
		display:inline-block;
		float:right;
		margin:18px;
		min-width:80px;
		font-size:0.8em;
	}
	.profileOption{
		font-size:0.8em;
		padding:24px 24px 20px 24px;
	}
	.findBox{
		display:inline-block;
		max-width:33.3333%;
		max-width:calc(33.3333% - 12px);
	}
	.findBox input,.findBox label, .findBox div{
		display:inline-block;
		width:auto;
	}
	.findBox input{
		max-width:60px;
	}
}
@media screen and (min-width: 1200px) {
	.userCard{
		width:calc(33.3333% - 36px);
	}
	.reportMetric{
		display:inline-block;
		width:33.333333%;
		width:calc(33.333333% - 12px);
		margin:0 6px;
	}
}
/****Waypoint Styles****/
.stuck {
  position:fixed;
  top:0;
}
.stickyWrap{
	display: inline-block;
    vertical-align: top;
    width: 232px;
    text-align: left;
}

.section{
	height:100%;
	min-height:100%;
	width:100%;
	display:inline-table;
	position:relative;
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
}
.section>div{
	display:table-cell;
	height:100%;
	width:100%;
	vertical-align:middle;
	text-align:center;
	transition:all ease-in-out 0.3s;
}
.half-section{
	height:50%;
	min-height:50%;
	width:100%;
	display:inline-table;
	position:relative;
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
}
.half-section>div{
	display:table-cell;
	height:100%;
	width:100%;
	vertical-align:middle;
	text-align:center;
	transition:all ease-in-out 0.3s;
}
.a-content{
	display:inline-table;
	width:100%;
	max-width:1200px;
}
.section[data-section="One"]{
	background-image:url(../media/images/bgs/surfer.jpg);
}
.section[data-section="Two"]{
	background-image:url(../media/images/bgs/xhands.jpg);
}
.section[data-section="Three"]{
	background-image:url(../media/images/bgs/plant.jpg);
}
.section.triggered>div{
	background-color:rgba(255, 153, 102, 0.8);
}
#navSection{
	display:inline-block;
	width:100%;
	position:fixed;
	bottom:0;
	left:0;
	z-index:300;
}
#navSection .gotoSection{
	display:inline-block;
	padding:20px;
	background-color:#FFF;
	color:#333;
	cursor:pointer;
	transition:all ease-in-out 0.3s;
}
#navSection .gotoSection:hover{
	background-color:#ececec;
}
#navSection .gotoSection.currentSection{
	background-color:#F96;
	color:#FFF;
}
#navSection .gotoSection.currentSection:hover{
	background-color:#F96;
}
.a-title{font-size:64px; color:#FFF;}
.animate{
	transition:all ease-in-out 0.3s;
}
.fadeUp{
	opacity:0;
	-webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.section.triggered .fadeUp{
	opacity:1;
	-webkit-transform: none;
    transform: none;
}
.fadeDown{
	opacity:0;
	 -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
.section.triggered .fadeDown{
	opacity:1;
	-webkit-transform: none;
    transform: none;
}
.a-table{
	display:inline-table;
	width:100%;
	max-width:1200px;
	color:#FFF;
}
.a-table>div{
	display:table-cell;
	float:left;
	vertical-align:middle;
	text-align:center;
	width:50%;
	width:calc(50% - 12px);
	padding:6px;
}
.a-pad{
	padding:2em 0;
	transition-delay:0.4s;
}
.a-pad>p{
	text-align:left;
}
p.a-large{
	font-size:1.5em;
}
.a-unity{
	margin-top:100px;
	display:block;
	position:relative;
	
}
.a-unity-circle-1,.a-unity-circle-2,.a-unity-circle-3{
	display:inline-block;
	width:100px;
	height:100px;
	border:12px solid #FFF;
	border-radius:50%;
    position: absolute;
	opacity:0;
}
	
.a-unity-circle-1{
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -30px;
	transition-delay:0.6s;
	 -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
.a-unity-circle-2{
    top: 50%;
    left: 50%;
    margin-left: -86px;
    margin-top: 30px;
	transition-delay:0.8s;
	-webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
}
.a-unity-circle-3{
    top: 50%;
    left: 50%;
    margin-left: -16px;
    margin-top: 30px;
	transition-delay:1s;
	-webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
}
.section.triggered .a-unity-circle-1{
	opacity:1;
	-webkit-transform: none;
    transform: none;
}
.section.triggered .a-unity-circle-2{
	opacity:1;
	-webkit-transform: none;
    transform: none;
}
.section.triggered .a-unity-circle-3{
	opacity:1;
	-webkit-transform: none;
    transform: none;
}
.no-overflow .section{
	overflow:hidden;
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.a-involved{
	margin-top:100px;
	display:block;
	position:relative;
	
}
.a-involved-heart{
	display:inline-block;
	width:150px;
	height:150px;
	background-image:url(../media/images/icons/heart.png);
	background-size:contain;
	background-position:center center;
    position: absolute;
	opacity:0;
	margin-left:-75px;
	margin-top:-20px;
	transition-delay:0.4s;
	
	-webkit-animation-duration:0;
	  animation-duration: 0;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  -webkit-animation-iteration-count: 0;
  	animation-iteration-count: 0;
	 -webkit-animation-name:none;
  	animation-name: none;
	
}
.section.triggered .a-involved-heart{
	opacity:1;
	transition-delay:0.8s;
	-webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  -webkit-animation-iteration-count: 4;
  	animation-iteration-count: 4;
	 -webkit-animation-name: pulse;
  	animation-name: pulse;
}
.a-give{
	margin-top:100px;
	display:block;
	position:relative;
	
}
.a-give-card{
	display:inline-block;
	width:100px;
	height:100px;
	background-image:url(../media/images/icons/card.png);
	background-size:contain;
	background-position:center center;
    position: absolute;
	opacity:0;
	margin-left:-50px;
	margin-top:-50px;
	 -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
	transition-delay:0.4s;
}
.section.triggered .a-give-card{
	opacity:1;
	-webkit-transform: none;
    transform: none;
	transition-delay:0.8s;
}
.a-give-hand{
	display:inline-block;
	width:100px;
	height:100px;
	background-image:url(../media/images/icons/hand.png);
	background-size:contain;
	background-position:center center;
    position: absolute;
	opacity:0;
	margin-left:-50px;
	margin-top:20px;
	 -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
	transition-delay:0.8s;
}
.section.triggered .a-give-hand{
	opacity:1;
	-webkit-transform: none;
    transform: none;
	transition-delay:0.4s;
}
a>.button{
	color:#FFF;
}
.half-section .a-title{
	color:#F96;
}

#menu-coverall{
	width:100%;
	height:100%;
	background: rgba(255,102,153,0.8);
	background: -moz-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,102,153,0.8)), color-stop(100%, rgba(255,153,102,0.8)));
	background: -webkit-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background: -o-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background: -ms-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background: linear-gradient(135deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6699', endColorstr='#ff9966', GradientType=1 );
	top:0;
	left:0;
	position:fixed;
	display:inline-table;
    z-index: 9900;
	opacity:0;
	pointer-events:none;
	transition:opacity ease-in-out 0.0s;
}
#menu-insert{
	display: table-cell;
    vertical-align: middle;
    text-align: center;
}
/*#menu-icon{
	display: inline-block;
    float: right;
    padding: 14px;
	padding-left:48px;
    font-size: 20px;
    line-height: 20px;
	color:#333;
	cursor:pointer;
	background-image:url(../media/images/icons/menu.png);
	background-size:20px 20px;
	background-position:14px 14px;
	background-repeat:no-repeat;
	transition:all ease-in-out 0.3s;
}
#menu-icon:hover{
	color:#F96;
}*/
#menu-icon {
  width: 25px;
  height: 25px;
  cursor: pointer;
  text-decoration: none;
}
#menu-icon.active i::before, #menu-icon.active i::after {
  background: #fff;
}
#menu-icon:hover, #menu-icon:focus, #menu-icon:active {
  outline: none;
  border-bottom: none !important;
}
#menu-icon i {
  position: relative;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  width: 25px;
  height: 3px;
  color: #fff;
  font: bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent: -55px;
  background: #333;
  transition: all .2s ease-out;
}
#menu-icon i::before, #menu-icon i::after {
  content: '';
  width: 25px;
  height: 3px;
  background: #333;
  position: absolute;
  left: 0;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

#menu-icon i::before {
  top: -7px;
}

#menu-icon i::after {
  bottom: -7px;
}
#menu-icon:hover i {
  background-color:#F96;
}
#menu-icon:hover i::before {
  top: -10px;
  background-color:#F96;
}

#menu-icon:hover i::after {
  bottom: -10px;
  background-color:#F96;
}


#menu-icon {
  float: right;
  position: relative;
  z-index: 21;
  padding: 6px 0 0 0;
  display: block;
  height: 44px;
  width: 44px;
  border-bottom: none !important;
}
#menu-icon > span {
  display: none;
  zoom: 1;
  *display: inline;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100px;
  margin-top: 12px;
  color: #333;
  margin-left: -70px;
  letter-spacing: 2px;
  font-size: 15px;
  text-transform: uppercase;
}
@media screen and (min-width: 360px) {
	#menu-icon > span {
		display: -moz-inline-stack;
		display: inline-block;
	}
}
#menu-icon:hover > span {
	color:#F96;
}
#menu-icon:hover > i {
	color:#F96;
}

.menu-icon{
	display: inline-block;
    margin-right: 12px;
    height: 32px;
    width: 32px;
    vertical-align: middle;
	transition:all ease-in-out 0.3s;
}
.menu-icon>img{
	width:100%;
}
.menu-text{
	color: #FFF;
    font-size: 32px;
    display: inline-block;
    vertical-align: middle;
	transition:all ease-in-out 0.3s;
}
#menu-insert a{
	display:block;
}
#menu-insert a:hover>.menu-icon{
	height:44px;
	width:44px;
}
#menu-insert a:hover>.menu-text{
	font-size:44px;
}
body.menu-on #menu-coverall{
	transition:opacity ease-in-out 0.3s;
	pointer-events:auto;
	opacity:1;
}
.menu-wrap{
	width:100%;
	width:calc(100% - 10px);
	padding:5px;
	max-width:580px;
	text-align:left;
	display:inline-block;
}
#menu-close{
	display:inline-block;
	background-image:url(../media/images/icons/delete.png);
	background-size:32px 32px;
	background-position:12px 12px;
	background-repeat:no-repeat;
	color:#FFF;
	padding: 12px 12px 12px 56px;
	font-size: 32px;
    line-height: 32px;
	cursor:pointer;
	border-radius:28px;
	background-color:transparent;
	transition:all ease-in-out 0.3s;
}
#menu-close:hover{
	background-color:rgba(255,255,255,0.5);
}
nav>a:hover>h1{
	color:#F96;
}

.messengerControls{
	display:inline-block;
	width:268px;
	padding:16px;
	background-color:rgba(255,255,255,0.3);
	float:left;
	height:100%;
	height:calc(100% - 112px);
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
}
.messengerPreview{
	display:inline-block;
	width:80%;
	width:calc(100% - 300px);
	float:left;
	height:100%;
	height:calc(100% - 80px);
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
}

#messengerReview{
	background:#F96;
	display:inline-block;
	width:100%;
	height:80px;
}
#messengerReview .button{
	background:#ececec;
	color:#F96;
	float:right;
	margin:22px;
}
#messengerReview .button:hover{
	background:#FFF !important;
	color:#F96 !important;
}
#messengerRecipients {
    display: inline-block;
    width: calc(100% - 328px);
    padding: 24px;
    font-size: 20px;
    line-height: 20px;
    color: #FFF;
}
@media screen and (max-width: 900px) {
	.messengerControls{
		display:block;
		width:100%;
		float:none;
		height:auto;
	}
	.messengerPreview{
		display:block;
		width:100%;
		float:none;
		height:auto;
	}
	#messengerReview{
		display:block;
		height:auto;
	}
	#messengerReview .button{
		float:none;
		margin: 0 6px 6px 6px;
		width: calc(100% - 112px);
		text-align: center;
	}
	
	#messengerRecipients {
		display: block;
		width: auto;
	}
}
.addAudience.gateway {
    margin-top: -20px !important;
    margin-bottom: 20px;
    display: inline-block;
}
.popupText {
	display:inline-block;
    cursor: pointer;
    background-color: rgba(255,255,255,0.3);
    padding: 4px;
    border-bottom: solid 2px #FFF;
}
.popupText>.popupWindow{
	display:inline-block;
	
	
	background:rgba(255,255,255,0.3);
	padding:6px;
	
	width:calc(100% - 12px);
	height:calc(100% - 12px) !important;
	max-height:650px;
	max-width:400px;
	opacity:0;
	margin:auto;
	margin:auto;
	position:fixed;
	top:5000%;
	left:0;
	right:0;
	bottom:0;
	z-index:9001;
	border-radius:12px;
	transition:opacity ease-in-out 0.4s;
	transition-delay:0.2s;
}
.popupText>.popupWindow::before {
    background: rgba(255,102,153,0.8);
	background: -moz-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,102,153,0.8)), color-stop(100%, rgba(255,153,102,0.8)));
	background: -webkit-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background: -o-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background: -ms-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background: linear-gradient(135deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6699', endColorstr='#ff9966', GradientType=1 );
    width: 100%;
    height: 100%;
    content: "";
	top:5000%;
    left: 0;
	position: absolute;
	z-index: -1;
	border-radius:12px;
	opacity:0;
	transition:opacity ease-in-out 0.4s;
	transition-delay:0.3s;
}
.popupText>.popupWindow::after {
    width: 100%;
    height: 100%;
    content: "";
	top:5000%;
    left: 0;
    position: fixed;
    z-index: -5;
    background-color: rgba(255,255,255,0.8);
	opacity:0;
	transition:opacity ease-in-out 0.4s;
}
.popupText.on>.popupWindow{
	opacity:1;
	top:0;
}
.popupText.on>.popupWindow::before{
	opacity:1;
	top:0;
}
.popupText.on>.popupWindow::after{
	opacity:1;
	top:0;
}
.popupText>.popupWindow>.rel{
	width:100%;
	height:100%;
	height:calc(100% - 60px);
	background:#FFF;
	display:inline-block;
	position:relative;
	overflow:hidden;
	border-radius:8px;
	padding-top: 60px;
	overflow-x: hidden;
	overflow-y: auto;
}
.popupText>.popupWindow>.rel>.popupClose {
    display:inline-block;
    width: 44px;
    height: 44px;
    background-color: rgba(255,102,153,0.8);
	background-color: -moz-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background-color: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,102,153,0.8)), color-stop(100%, rgba(255,153,102,0.8)));
	background-color: -webkit-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background-color: -o-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background-color: -ms-linear-gradient(-45deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	background-color: linear-gradient(135deg, rgba(255,102,153,0.8) 0%, rgba(255,153,102,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6699', endColorstr='#ff9966', GradientType=1 );
	background-image: url('/spectrum/media/images/icons/delete.png');
    left: 8px;
    top: 8px;
    position: absolute;
    background-position: center center;
    background-size: 80% 80%;
    background-repeat: no-repeat;
    border-radius: 100%;
	cursor:pointer;
}
.popupText>.popupWindow .userNameList {
    padding: 8px;
}
.userNameList>.userPhoto{
	width:60px;
	height:60px;
	vertical-align:middle;
}
.userNameList>.userNameName{
	display:inline-block;
	vertical-align:middle;
	padding-left:8px;
	color:#333;
}
.percentBar {
    display: block;
    background: #ececec;
    position: relative;
    height: 12px;
    border-radius: 30px;
    margin: 8px 0;
    text-align: left;
	overflow:hidden;
}
.percentBarFill {
    transition: 0.6s all ease-in-out;
    background-color: #F96;
    height: 100%;
    display: inline-block;
    top: 0;
    left: 0;
    margin: 0;
    position: absolute;
	width:0%;
}
.marketingList{
	background:#FFF;
	margin-bottom:6px;
	border-radius:8px;
	padding:6px;
	display:block;
}
.marketingList span{
	display:inline-block;
}
.serviceTimeSelect {
    display: inline-block;
    width: calc(100% - 40px);
	vertical-align:top;
}
.serviceTimeSelect.fullWidth{
	width:100%;
}
.serviceTimeSelect .peachSelect select option {
	max-width:none;
}
.serviceTimeSelectAdd {
    display: inline-block;
    width: 40px;
	height:40px;
	background:#333;
	cursor:pointer;
	position:relative;
	transition:all 0.4s ease-in-out;
	vertical-align:top;
}
.serviceTimeSelectAdd::before {
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #FFF;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -2px;
    margin-top: -10px;
    border-radius: 4px;
	transition:all 0.4s ease-in-out;
}
.serviceTimeSelectAdd::after {
    display: inline-block;
    width: 20px;
    height: 4px;
    background: #FFF;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -2px;
    margin-left: -10px;
    border-radius: 4px;
	transition:all 0.4s ease-in-out;
}
.serviceTimeSelectAdd:hover {
	background:#F96;
}
.serviceTimeSelectAdd:hover::before {
    height: 28px;
    margin-top: -14px;
}
.serviceTimeSelectAdd:hover::after {
    width: 28px;
    margin-left: -14px;
}

.privacySelectBlocks label {
    display: inline-block;
    text-align: center;
	width:25%;
}
.privacySelectBlocks label[for] {
    display: block !important;
    text-align: left !important;
	width:auto;
}
.privacySelectBlocks .checkLabel {
    display: block !important;
	color:#999;
}
.churchSettingIcon {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    float: right;
    background-image: url('/spectrum/media/images/icons/churchSettings.png');
	background-position: center center;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	border-radius:32px;
	background-color:transparent;
	transition:0.3s all ease-in-out;
	margin-top: -4px;
}
.churchSettingIcon:hover {
	background-color:#FFF;
}
.churchMessengerIcon {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    float: right;
    background-image: url('/spectrum/media/images/icons/churchMessenger.png');
	background-position: center center;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	border-radius:32px;
	background-color:transparent;
	transition:0.3s all ease-in-out;
	margin-top: -4px;
}
.churchMessengerIcon:hover {
	background-color:#FFF;
}

@-webkit-keyframes arrowFlow {
  from {
    left:380px;
  }
  to {
    left:480px;
  }
}
@keyframes arrowFlow {
  0% {
	  left:380px;
  }
  100% {
	  left:480px;
  }
}
.addServiceNote {
    display: inline-block;
    width: calc(100% - 60px);
    background-color: #ff9966;
    color: #FFF;
    height: 20px;
    vertical-align: top;
    font-size: 20px;
    padding: 10px;
    line-height: 20px;
	position:relative;
}
.addServiceNote::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 18px;
    background: #FFF;
    border-radius: 7px;
    transform: rotate(-45deg);
    top: 8px;
    position: absolute;
    left: 380px;
	-webkit-animation: arrowFlow ease-in-out alternate 1.6s infinite none running;
	animation: arrowFlow ease-in-out alternate 1.6s infinite none running;
}
.addServiceNote::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 18px;
    background: #FFF;
    border-radius: 6px;
    transform: rotate(45deg);
    bottom: 6px;
    position: absolute;
    left: 380px;
	-webkit-animation: arrowFlow ease-in-out alternate 1.6s infinite none running;
	animation: arrowFlow ease-in-out alternate 1.6s  infinite none running;
}
.serviceTimeLeft {
    display: inline-block;
    width: 300px;
    padding: 10px;
    background: #FFF;
    margin-top: 6px;
    vertical-align: top;
}
.serviceTimeRight {
    display: inline-block;
    width: calc(100% - 330px);
    margin-left: 10px;
    margin-top: 6px;
    vertical-align: top;
	min-height:20px;
}
.serviceTimeRightDashboard{
	display: inline-block;
    width: calc(100% - 330px);
    margin-right: 10px;
    vertical-align: top;
	min-height:20px;
	
}
.serviceTimeRightDashboard .listOption{
	background:#FFF;
	padding:0;
	overflow:hidden;
	width:100%;
	border-radius:6px;
}
.serviceTimeRightDashboard .modify {
	padding: 9px;
	border-radius: 0;
	margin-right:0 !important;
	border-left: solid 1px #ececec;
	background: #ff9966; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #ff9966 1%, #ff9999 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #ff9966 1%,#ff9999 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #ff9966 1%,#ff9999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9966', endColorstr='#ff9999',GradientType=1 );
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
.listOption .modify.checkIn{
	background-image:url('../media/images/assets/serviceCheckIn.png');
	background: #ff9966; /* Old browsers */
	background: url('../media/images/assets/serviceCheckIn.png') no-repeat center center, -moz-linear-gradient(-45deg, #ff9966 1%, #ff9999 100%); /* FF3.6-15 */
	background: url('../media/images/assets/serviceCheckIn.png') no-repeat center center, -webkit-linear-gradient(-45deg, #ff9966 1%,#ff9999 100%); /* Chrome10-25,Safari5.1-6 */
	background: url('../media/images/assets/serviceCheckIn.png') no-repeat center center, linear-gradient(135deg, #ff9966 1%,#ff9999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9966', endColorstr='#ff9999',GradientType=1 );
	background-size:cover, cover;
}
.listOption .modify.checkIn:hover{
	background: #48b59f; /* Old browsers */
	background: url('../media/images/assets/serviceCheckIn.png') no-repeat center center, -moz-linear-gradient(-45deg, #48b59f 0%, #8cdcea 100%); /* FF3.6-15 */
	background: url('../media/images/assets/serviceCheckIn.png') no-repeat center center, -webkit-linear-gradient(-45deg, #48b59f 0%,#8cdcea 100%); /* Chrome10-25,Safari5.1-6 */
	background: url('../media/images/assets/serviceCheckIn.png') no-repeat center center, linear-gradient(135deg, #48b59f 0%,#8cdcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48b59f', endColorstr='#8cdcea',GradientType=1 );
	background-size:cover, cover;
}
.listOption .modify.checkOut{
	background-image:url('../media/images/assets/serviceCheckOut.png');
	background: #ff9966; /* Old browsers */
	background: url('../media/images/assets/serviceCheckOut.png') no-repeat center center, -moz-linear-gradient(-45deg, #ff9966 1%, #ff9999 100%); /* FF3.6-15 */
	background: url('../media/images/assets/serviceCheckOut.png') no-repeat center center, -webkit-linear-gradient(-45deg, #ff9966 1%,#ff9999 100%); /* Chrome10-25,Safari5.1-6 */
	background: url('../media/images/assets/serviceCheckOut.png') no-repeat center center, linear-gradient(135deg, #ff9966 1%,#ff9999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9966', endColorstr='#ff9999',GradientType=1 );
	background-size:cover, cover;
}
.listOption .modify.checkOut:hover{
	background: #48b59f; /* Old browsers */
	background: url('../media/images/assets/serviceCheckOut.png') no-repeat center center, -moz-linear-gradient(-45deg, #48b59f 0%, #8cdcea 100%); /* FF3.6-15 */
	background: url('../media/images/assets/serviceCheckOut.png') no-repeat center center, -webkit-linear-gradient(-45deg, #48b59f 0%,#8cdcea 100%); /* Chrome10-25,Safari5.1-6 */
	background: url('../media/images/assets/serviceCheckOut.png') no-repeat center center, linear-gradient(135deg, #48b59f 0%,#8cdcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48b59f', endColorstr='#8cdcea',GradientType=1 );
	background-size:cover, cover;
}
.listOption .modify.results{
	background-image:url('../media/images/assets/serviceResults.png');
	background: #ff9966; /* Old browsers */
	background: url('../media/images/assets/serviceResults.png') no-repeat center center, -moz-linear-gradient(-45deg, #ff9966 1%, #ff9999 100%); /* FF3.6-15 */
	background: url('../media/images/assets/serviceResults.png') no-repeat center center, -webkit-linear-gradient(-45deg, #ff9966 1%,#ff9999 100%); /* Chrome10-25,Safari5.1-6 */
	background: url('../media/images/assets/serviceResults.png') no-repeat center center, linear-gradient(135deg, #ff9966 1%,#ff9999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9966', endColorstr='#ff9999',GradientType=1 );
	background-size:cover, cover;
}
.listOption .modify.results:hover{
	background: #48b59f; /* Old browsers */
	background: url('../media/images/assets/serviceResults.png') no-repeat center center, -moz-linear-gradient(-45deg, #48b59f 0%, #8cdcea 100%); /* FF3.6-15 */
	background: url('../media/images/assets/serviceResults.png') no-repeat center center, -webkit-linear-gradient(-45deg, #48b59f 0%,#8cdcea 100%); /* Chrome10-25,Safari5.1-6 */
	background: url('../media/images/assets/serviceResults.png') no-repeat center center, linear-gradient(135deg, #48b59f 0%,#8cdcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48b59f', endColorstr='#8cdcea',GradientType=1 );
	background-size:cover, cover;
}
.listOption .modify.schedule{
	background-image:url('../media/images/assets/serviceSchedule.png');
	background: #ff9966; /* Old browsers */
	background: url('../media/images/assets/serviceSchedule.png') no-repeat center center, -moz-linear-gradient(-45deg, #ff9966 1%, #ff9999 100%); /* FF3.6-15 */
	background: url('../media/images/assets/serviceSchedule.png') no-repeat center center, -webkit-linear-gradient(-45deg, #ff9966 1%,#ff9999 100%); /* Chrome10-25,Safari5.1-6 */
	background: url('../media/images/assets/serviceSchedule.png') no-repeat center center, linear-gradient(135deg, #ff9966 1%,#ff9999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9966', endColorstr='#ff9999',GradientType=1 );
	background-size:cover, cover;
}
.listOption .modify.schedule:hover{
	background: #48b59f; /* Old browsers */
	background: url('../media/images/assets/serviceSchedule.png') no-repeat center center, -moz-linear-gradient(-45deg, #48b59f 0%, #8cdcea 100%); /* FF3.6-15 */
	background: url('../media/images/assets/serviceSchedule.png') no-repeat center center, -webkit-linear-gradient(-45deg, #48b59f 0%,#8cdcea 100%); /* Chrome10-25,Safari5.1-6 */
	background: url('../media/images/assets/serviceSchedule.png') no-repeat center center, linear-gradient(135deg, #48b59f 0%,#8cdcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48b59f', endColorstr='#8cdcea',GradientType=1 );
	background-size:cover, cover;
}
#serviceListHeader {
    background: #FFFFFF;
    padding: 6px;
    border-radius: 6px;
}
#serviceListHeader .title {
    font-size: 24px;
    color: #ff9966;
    display: inline-block;
}
#serviceListHeader #add {
    display: inline-block;
    background: #ff9966;
    padding: 6px 7px;
    color: #FFF;
    font-size: 26px;
    line-height: 18px;
    float: right;
    border-radius: 4px;
	transition:0.3s all ease-in-out;
	cursor:pointer;
}
#serviceListHeader #add:hover {
	background-color:#FF6666;
}
.serviceCheck{
	vertical-align: middle;
}
.serviceCheck .roundedCheck{
	margin:6px;
}
#serviceTimeLeft {
	position:relative;
}
#editServiceButton {
    display: inline-block;
    position: absolute;
    top: 6px;
    right: 0px;
    width: 0px;
    height: 44px;
    background-color: #FF9966;
    background-image: url('/spectrum/media/images/icons/edit.png');
    background-repeat: no-repeat;
    background-size: 36px 36px;
    background-position: center center;
	transition:width ease-in-out 0.3s;
	cursor:pointer;
}
#serviceTimeLeft:hover #editServiceButton{
	width:44px;
}
#deleteServiceButton {
    display: inline-block;
    position: absolute;
    top: 56px;
    right: 0px;
    width:44px;
    height: 44px;
    background-color: #FF9966;
    background-image: url('/spectrum/media/images/icons/delete.png');
    background-repeat: no-repeat;
    background-size: 36px 36px;
    background-position: center center;
	transition:width ease-in-out 0.3s;
	cursor:pointer;
}
.serviceOverviewTitle {
    font-size: 26px;
    color: #FF9966;
}
.serviceOverviewPerson .userPhotoWrap {
    margin-top: 0;
    vertical-align: middle;
}
.serviceOverviewPerson .userName {
    display: inline-block;
    width: calc(100% - 92px);
    vertical-align: middle;
}
.serviceStatus {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #f96;
    vertical-align: middle;
    background-image: url('/spectrum/media/images/icons/servicePersonUninvited.png');
	background-size:30px 30px;
	background-repeat:no-repeat;
	background-position:center center;
    border-radius: 30px;
}
.serviceStatus.uninvited {
	background-color:#777;
	background-image: url('/spectrum/media/images/icons/servicePersonUninvited.png');
}
.serviceStatus.invited {
	background-color:#F96;
	background-image: url('/spectrum/media/images/icons/servicePersonInvited.png');
}
.serviceStatus.accepted {
	background-color:#096;
	background-image: url('/spectrum/media/images/icons/servicePersonAccepted.png');
}
.serviceStatus.declined {
	background-color:#C33;
	background-image: url('/spectrum/media/images/icons/servicePersonDeclined.png');
}
.serviceOverviewHeading {
    color: #777;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 24px;
    position: relative;
}
.serviceOverviewHeading::before {
    content: "";
    display: inline-block;
    background: #ececec;
    width: 48px;
    height: 4px;
    position: absolute;
    bottom: -12px;
    left: 50%;
    margin-left: -24px;
}
.serviceOrderRow {
    display: block;
    padding: 6px;
    margin: 6px 0 0 0;
    background-color: #FFF;
    border-radius: 8px;
	cursor:pointer;
}
.serviceOrderHandle.ui-sortable-handle {
    display: inline-block;
    width: 44px;
    height: 44px;
    vertical-align: middle;
    cursor:move;
	background-image:url(../media/images/icons/drag.png);
	background-position:center center;
	background-size:contain;
	background-repeat:no-repeat;
}
.serviceOrderTitle {
    display: inline-block;
    vertical-align: middle;
    padding: 12px;
	line-height: 20px;
}
#addServiceItem {
	max-width:none;
	border-radius:8px;
}
.serviceOrderTime {
    display: inline-block;
    padding: 10px;
    background-color: #FFF;
    border-radius: 8px;
    margin-top: 6px;
	padding-left: 40px;
	background-image: url('/spectrum/media/images/icons/timePicker.png');
	background-position: center left;
	background-size: 40px 40px;
	background-repeat: no-repeat;
}
.serviceOrderTimeLabel {
    display: block;
    color:#999;
	font-size:12px;
}
.serviceOrderRowContent {
    overflow: hidden;
    max-height: 0;
    transition: all 0.8s ease-in-out;
}
.serviceOrderRow.current .serviceOrderRowContent{
	max-height: 1000px;
}
.serviceOverviewModify {
    overflow: hidden;
    max-height: 0;
    transition: all 0.4s ease-in-out;
	
}
.serviceOverviewPerson.current .serviceOverviewModify{
	max-height: 40px;
}

.serviceOrderRowNotes {
    display: inline-block;
    width: calc(100% - 400px);
    vertical-align: top;
	margin-left:50px;
	font-size: 12px;
	color: #999;
}
.serviceOrderRowAttachments {
    display: inline-block;
    width: 344px;
    vertical-align: top;
	margin-left:6px;
	font-size: 12px;
	color: #999;
}
.serviceOrderRowBlock {
    display: inline-block;
    width: calc(100% - 20px);
    background: #fafafa;
    min-height: 40px;
    border-radius: 6px;
    padding: 10px;
	font-size: 16px;
	color: #333;
}
.serviceOrderButton {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: #F96;
    margin-right: 6px;
    border-radius: 44px;
    float: right;
	margin-top:6px;
	background-position:center center;
	background-size:26px 26px;
	background-repeat:no-repeat;
	transition:background-color 0.4s ease-in-out;
}
.serviceOrderButton:hover {
	background-color:#FC9;
}
.serviceOrderButton.delete {
	background-image:url(../media/images/icons/delete.png);
}
.serviceOrderButton.edit {
	background-image:url(../media/images/icons/edit.png);
}
.serviceOrderRow .userPhotoWrap {
    margin-top: 0;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    padding: 0;
}
.ministryPersonName {
    color: #F96;
    font-size: 26px;
}
#ministryCalHead {
    margin: 12px 0;
}
#ministryCalTitle {
    display: inline-block;
    width: calc(100% - 92px);
    vertical-align: middle;
    padding: 6px;
}
#ministryCalPrev {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #F96;
    border-radius: 40px;
    cursor: pointer;
    position: relative;
	transition:all ease-in-out 0.2s;
    vertical-align: middle;
}
#ministryCalPrev::before {
    content: "";
    display: inline-block;
    background: #FFF;
    width: 18px;
    height: 4px;
    border-radius: 4px;
    transform: rotate(-45deg);
    top: 13px;
    left: 8px;
    position: absolute;
	transition:all ease-in-out 0.2s;
}
#ministryCalPrev::after {
    content: "";
    display: inline-block;
    background: #FFF;
    width: 18px;
    height: 4px;
    border-radius: 4px;
    transform: rotate(45deg);
    bottom: 13px;
    left: 8px;
    position: absolute;
	transition:all ease-in-out 0.2s;
}
#ministryCalNext {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #F96;
    border-radius: 40px;
    cursor: pointer;
    position: relative;
	transition:all ease-in-out 0.2s;
    vertical-align: middle;
}
#ministryCalNext::before {
    content: "";
    display: inline-block;
    background: #FFF;
    width: 18px;
    height: 4px;
    border-radius: 4px;
    transform: rotate(45deg);
    top: 13px;
    right: 8px;
    position: absolute;
	transition:all ease-in-out 0.2s;
}
#ministryCalNext::after {
    content: "";
    display: inline-block;
    background: #FFF;
    width: 18px;
    height: 4px;
    border-radius: 4px;
    transform: rotate(-45deg);
    bottom: 13px;
    right: 8px;
    position: absolute;
	transition:all ease-in-out 0.2s;
}
#ministryCalNext:hover,#ministryCalPrev:hover {
	background-color:#FC9;
}
#ministryCalPrev:hover::after,#ministryCalPrev:hover::before {
    left: 4px;
}
#ministryCalNext:hover::after,#ministryCalNext:hover::before {
    right: 4px;
}
.serviceOverviewRole {
    font-size: 12px;
    color: #777;
}
.serviceCalDot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #F96;
    border-radius: 8px;
	margin: 2px;
}
.serviceCalDot.uninvited {
	background-color:#777;
}
.serviceCalDot.invited {
	background-color:#F96;
}
.serviceCalDot.accepted {
	background-color:#096;
}
.serviceCalDot.declined {
	background-color:#C33;
}
.calendar-day {
    position: relative;
	text-align: center;
}
.serviceCalDotBox {
    display: inline-block;
    width: 100%;
	position:absolute;
	bottom:0;
	left:0;
	text-align:center;
}
.calendar-day.blockout-day {
    background: #ececec;
}
.calendar-day.blockout-day .day-number {
    color: #999;
}
.calendar-popup {
    display: none;
    width: 200px;
    position: absolute;
    opacity: 0;
    z-index: 10;
    bottom: 30px;
    background: #fafafa;
    padding: 6px;
    border-radius: 8px;
    left: 0;
	border: 4px solid rgb(51, 51, 51);
	text-align: left;
	transition:opacity ease-in-out 0.4s;
}
.calendar-popup::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0px;
    bottom: -20px;
    z-index: 8;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #333;
}
.calendar-day:hover .calendar-popup {
	opacity:1;
	display: inline-block;
}
.calendar-event-list{
	width: 100%;
	width: calc(100% - 20px);
    position: absolute;
    z-index: 10;
    bottom: 3px;
    padding: 10px;
    left: 0;
	text-align: left;
	height: calc(100% - 52px);
	overflow:auto;
	overflow-x:hidden;
	overflow-y:auto;
	padding-top:36px;
	-webkit-overflow-scrolling: touch;
}
.calendar-event-list>div{
	display:block;
	padding:6px;
	border-radius:6px;
	margin-bottom:3px;
	background-color:#FC9;
	cursor:pointer;
	color:rgba(0,0,0,0.4);
}
.calendar-event-list>.eventListing.radiateEvent{
	background-color:#FF9966;
}
.calendar-event-list>.serviceListing{
	background-color:#FF9999;
}
.calendar-event-list>.eventListing.groupEvent{
	background-color:#FFCC99;
}
.calendar-event-list>.eventListing.churchEvent{
	background-color:#FFCC66;
}
.calendar-event-list>.serviceLeaderListing{
	background-color:#ECECEC;
}
.filterMenu{
	background:#FAFAFA;
}
.filterItem {
    display: inline-block;
    width: 25%;
    padding: 12px 6px;
    width: calc(25% - 12px);
    text-align: center;
    background: #FAFAFA;
    cursor: pointer;
	color:rgba(0,0,0,0.4);
	vertical-align:top;
	transition:background-color ease-in-out 0.4s;
}
.reportTable .filterItem{
	background:none;
}

.checkCircle{
	display:inline-block;
	width:30px;
	height:30px;
	vertical-align:middle;
	border-radius: 30px;
	margin-right: 6px;
	position:relative;
}
.checkCircle::before {
    content: "";
    display: inline-block;
    background: #FAFAFA;
    width: 0px;
    height: 6px;
    border-radius: 6px;
    position: absolute;
    transform-origin: right center;
    transform: rotate(45deg);
    right: 13px;
	left:auto;
	top: 18px;
    transition: width ease-in-out 0.3s;
}
.checkCircle::after {
    content: "";
    display: inline-block;
    background: #FAFAFA;
    width: 0px;
    height: 6px;
    border-radius: 6px;
    position: absolute;
    transform-origin: right center;
    transform: rotate(-45deg);
    right: -1px;
	left:auto;
	top: 1px;
	transition:width ease-in-out 0.4s;
	transition-delay:0.3s;
}
.filterItem.on .checkCircle::before{
	width: 16px;
    transform-origin: left center;
    transform: rotate(45deg);
    left: 6px;
	right:auto;
    top: 6px;
}

.filterItem.on .checkCircle::after{
	width: 24px;
    transform-origin: left center;
    transform: rotate(-45deg);
    left: 14px;
	right:auto;
	top: 17px;
}
.filterItem[data-val="registrations"]>.checkCircle {
    background: #FF9966;
}
.filterItem[data-val="church"]>.checkCircle {
    background: #FFCC66;
}
.filterItem[data-val="group"]>.checkCircle {
    background: #FFCC99;
}
.filterItem[data-val="service"]>.checkCircle {
    background: #FF9999;
}
.reportTable tr:nth-child(2n+1) .filterItem .checkCircle::before,.reportTable tr:nth-child(2n+1) .filterItem .checkCircle::after{
    background: #FFFFFF;
}
.reportTable tr:nth-child(2n) .filterItem .checkCircle::before,.reportTable tr:nth-child(2n) .filterItem .checkCircle::after{
    background: #ececec;
}
.reportTable .filterItem>.checkCircle {
    background: #FF9966;
}

.serviceCal {
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    background: #ececec;
    border-radius: 6px;
    text-align: center;
    overflow: hidden;
	margin-right:6px;
}
.serviceCalMonth {
    background: #FF9966;
    padding: 6px;
    color: #FFF;
}
.serviceCalDay {
    padding: 12px;
}
.serviceSchedule {
    display: inline-block;
    vertical-align: middle;
	width: calc(100% - 158px);
}
.serviceLine{
	margin-top:6px;
}
.box.messageBox {
    max-width: none;
    margin-bottom: 6px;
}
.serviceButtons {
    display: inline-block;
    width: 72px;
    vertical-align: middle;
	position:relative;
	text-align:right;
}
.serviceButtons .button:first-child {
	margin-bottom:6px;
}
.serviceButtons .button {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 40px;
	border:solid 3px #F96;
}
.serviceButtons .button.off{
	background-color:transparent;
	color:#F96;
}
.serviceButtons .button.off:hover{
	color:#FFF;
}
.serviceButtons .button.on,.serviceButtons .button.on:hover{
	cursor:auto;
	background-color:#F96;
}
.serviceLine {
    margin-top: 6px;
    display: block;
    padding: 6px;
    background: #FAFAFA;
    border-radius: 8px;
	opacity:1;
	transition:opacity ease-in-out 0.3s;
	position:relative;
}
.serviceLine .serviceStatus {
    position: absolute;
    left: -15px;
    top: 50%;
    margin-top: -19px;
    border: solid 4px #ececec;
}
div.ministryBlock:hover .serviceLine:not(:hover) {
	opacity: 0.4;
}
.serviceGroupRow {
    background-color: #FAFAFA;
}
.serviceGroupRow > .serviceOrderTitle {
    font-size: 26px;
    color: #F96;
}
.serviceOverviewButton {
    display: inline-block;
    width: calc(50% - 22px);
    text-align: center;
    background: #FAFAFA;
    margin: 3px;
    padding: 6px;
    border-radius: 6px;
    border: solid 2px #ececec;
	transition:all ease-in-out 0.4s;
}
.serviceOverviewButton:hover {
    background: rgb(255, 153, 102) none repeat scroll 0% 0%;
	border-color: rgb(255, 153, 102);
	color: rgb(255, 255, 255);
	cursor:pointer;
}
.serviceOrderRow.inactiveItem {
    opacity: 0.6;
    background: #FAFAFA;
    color: #999;
}
.serviceOrderRow.inactiveItem .serviceOrderHandle.ui-sortable-handle{
	opacity:0.6;
}
.serviceOrderRow.inactiveItem .serviceOrderRowBlock{
	background:#ECECEC;
}
.myCalendarDay {
    margin: 3px;
    background: #FFF;
    height: 120px;
	opacity:0;
	transition:opacity ease-in-out 0.3s;
}
.myCalendarDay.animated {
	opacity:1;
}
.myCalendarDay .day-number {
    position: absolute;
    top: auto;
    left: 3px;
    display: inline-block;
    background: #ececec;
    width: 40px;
    height: 40px;
    text-align: left;
    padding: 3px;
	background: #ececec;
	background: -moz-linear-gradient(-45deg, rgba(236,236,236,1) 0%, rgba(236,236,236,1) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(236,236,236,1) 0%,rgba(236,236,236,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	background: linear-gradient(135deg, rgba(236,236,236,1) 0%,rgba(236,236,236,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#00ffffff',GradientType=1 );
	z-index:12;
}
.myCalendarDay .day-number.active {
	background: -moz-linear-gradient(-45deg, rgba(255,153,102,1) 0%, rgba(255,153,102,1) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(255,153,102,1) 0%,rgba(255,153,102,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	background: linear-gradient(135deg, rgba(255,153,102,1) 0%,rgba(255,153,102,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9966', endColorstr='#00ffffff',GradientType=1 );
	color:#FFF;
}
.myCalendarDay.today .day-number {
	background: #66CB98;
	background: -moz-linear-gradient(-45deg, rgba(102,203,152,1) 0%, rgba(102,203,152,1) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(102,203,152,1) 0%,rgba(102,203,152,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	background: linear-gradient(135deg, rgba(102,203,152,1) 0%,rgba(102,203,152,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66cb98', endColorstr='#00ffffff',GradientType=1 );
	color:#FFF;
}
.calendarSubMenu {
    display: inline-block;
    border: 1px solid #ececec;
    border-radius: 6px;
	overflow:hidden;
	margin:12px;
	vertical-align:middle;
}
.calendarSubItem {
    display: inline-block;
    padding: 0;
    width: 60px;
    text-align: center;
    height: 44px;
	background-color: #fafafa;
	background-color: -moz-linear-gradient(top, #fafafa 0%, #ececec 100%);
	background-color: -webkit-linear-gradient(top, #fafafa 0%,#ececec 100%);
	background-color: linear-gradient(to bottom, #fafafa 0%,#ececec 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ececec',GradientType=0 );
	float: left;
	border-left: solid 1px #ececec;
	transition:all ease-in-out 0.4s;
	cursor:pointer;
	background-size:36px 36px;
	background-position:center center;
	background-repeat:no-repeat;
}
.calendarSubMenu>.calendarSubItem:first-child {
	border-left: none;
}
.calendarSubItem.current {
	background-color: #ececec;
	background-color: -moz-linear-gradient(top, #ececec 0%, #fafafa 100%);
	background-color: -webkit-linear-gradient(top, #ececec 0%,#fafafa 100%);
	background-color: linear-gradient(to bottom, #ececec 0%,#fafafa 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#fafafa',GradientType=0 );
}
.calendarSubItem[data-view="times"]{
	background-image:url(../media/images/icons/cal.png);
}
.calendarSubItem[data-view="list"]{
	background-image:url(../media/images/icons/list.png);
}
.smallCal{
	display:none;
}
#repeatSummary {
    padding: 12px;
    background: #FAFAFA;
    margin: 6px 0;
    color: #999;
    border-radius: 8px;
}
.calButton {
    margin-right: 8px;
}
#eventSpotlight {
    width: 100%;
    height: 100%;
    background: #ececec;
    position: absolute;
    top: 0;
    right: 0;
    transition: 0.4s ease-in-out all;
    right: -100%;
}
#calendarBack {
    display: inline-block;
    height: 40px;
    background-color: #F96;
    border-radius: 40px;
    cursor: pointer;
    position: relative;
    transition: all ease-in-out 0.2s;
    vertical-align: middle;
	line-height: 40px;
	padding: 0 12px 0 40px;
	color: #FFF;
}
#calendarBack:hover {
    background-color: #FC9;
}
#calendarBack::before {
    content: "";
    display: inline-block;
    background: #FFF;
    width: 18px;
    height: 4px;
    border-radius: 4px;
    transform: rotate(-45deg);
    top: 13px;
    left: 8px;
    position: absolute;
    transition: all ease-in-out 0.2s;
}
#calendarBack::after {
    content: "";
    display: inline-block;
    background: #FFF;
    width: 18px;
    height: 4px;
    border-radius: 4px;
    transform: rotate(45deg);
    bottom: 13px;
    left: 8px;
    position: absolute;
    transition: all ease-in-out 0.2s;
}
#calendarBack:hover::after, #calendarBack:hover::before {
    left: 4px;
}
.eventSpotlightPad{
	padding:40px;
}
#eventSpotlightContent{
	text-align:center;
}
.eventBlock {
    margin: 3px;
	opacity:0;
	transition:opacity ease-in-out 0.3s;
}
.eventBlock.animated {
	opacity:1;
}
.eventSpotlightTitle{
	font-size:36px;
	margin:16px;
}
.eventSpotlightTop {
    display: inline-block;
    background-color: #FFF;
    padding: 0 16px 16px 16px;
    width: calc(100% - 32px);
    max-width: 1000px;
    border-radius: 8px;
    margin: 8px 0;
	position:relative;
}
.eventSpotlightTop #editServiceButton {
	width:44px;
}
.eventSpotlightLeft {
    display: inline-block;
    background-color: #FFF;
    padding: 16px;
    width: calc(100% - 32px);
    max-width: 300px;
    border-radius: 8px;
    margin-right: 8px;
	text-align:left;
	vertical-align:top;
}
.eventSpotlightRight {
    display: inline-block;
    background-color: #FFF;
    padding: 16px;
    width: calc(100% - 32px);
    max-width: 658px;
    border-radius: 8px;
	vertical-align:top;
}
.eventSpotlightLabel {
	color:#F96;
	margin-top:16px;
}
.eventSpotlightLeft>.eventSpotlightLabel:first-child {
	margin-top:0;
}
.eventSpotlightImage > img {
    width: 100%;
    border-radius: 6px;
}
.calendarListView .calendar-event-list {
    position:static;
    padding: 10px;
    height: auto;
}
.calendarListDayWrap{
	background:#FFF;
	border-radius:8px;
	margin-top:6px;
	opacity:0;
	transition:opacity ease-in-out 0.3s;
}
.calendarListDayWrap.animated {
	opacity:1;
}
.calendarListDay {
    padding: 12px 12px 0 12px;
    line-height: 16px;
    color: #999;
    font-weight: 400;
    font-style: italic;
}
.calendarListDay.today {
	color:#66CB98;
}
.noResults {
    display: block;
    text-align: center;
    position: relative;
    margin: 24px;
}
.noResultsText {
    margin: 124px 12px;
	max-width:450px;
	display:inline-block;
}
.noResultsText::before {
    content: "";
    display: inline-block;
    width: 100%;
    border-top: #DDD solid 1px;
    border-bottom: #FFF solid 1px;
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 237px;
}

.noResultsText::after {
    content: "";
    display: inline-block;
    width: 100%;
    border-top: #DDD solid 1px;
    border-bottom: #FFF solid 1px;
    height: 0px;
    position: absolute;
    top: 50%;
    right: 50%;
    margin-right: 237px;
}
.noResults.noPad {
	margin:0;
}
.noResults.noPad .noResultsText {
	margin:0;
}
.calMonth {
    font-size: 36px;
}
#calendarOverview {
	display:none;
	transition:all ease-in-out 0.4s;
	bottom:-100%;
}
.optionToggleButton {
	display: none;
}
.calStatusSwitch {
    display: inline-block;
    max-width: 60px;
    width: 60px;
    vertical-align: middle;
}
.calStatusText {
    display: inline-block;
    width: calc(100% - 72px);
    vertical-align: middle;
	padding:6px;
}
.switchUI {
    padding: 3px;
    background: rgb(236,236,236);
	background: -moz-linear-gradient(top, rgba(236,236,236,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(236,236,236,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff',GradientType=0 );
    border-radius: 44px;
	cursor:pointer;
}
.switchUIWrap {
    overflow: hidden;
    position: relative;
    height: 20px;
    background: #fafafa;
    border-radius: 20px;
    transition: background ease-in-out 0.4s;
}	
.switchUIToggle {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(236,236,236,1) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(236,236,236,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(236,236,236,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececec',GradientType=0 );
    border-radius: 20px;
    border: solid 1px #eee;
    transition: all ease-in-out 0.4s;
    top: 0;
	margin-left:0;
    position: absolute;
    left: 0;
}
.switchUI.on .switchUIToggle {
	left:100%;
	margin-left:-20px;
}
.serviceButtons .switchUI .switchUIWrap{
	background: rgb(153,153,153);
	background: -moz-linear-gradient(top, rgba(153,153,153,1) 0%, rgba(204,204,204,1) 100%);
	background: -webkit-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(204,204,204,1) 100%);
	background: linear-gradient(to bottom, rgba(153,153,153,1) 0%,rgba(204,204,204,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#cccccc',GradientType=0 );
}
.switchUI.on .switchUIWrap {
	background:#66CC99;
}
.householdMemberWrap {
    display: inline-block;
    position: relative;
	width:33.3333%;
	overflow:hidden;
	vertical-align: top;
}
.householdMemberWrap>.userCard{
	width: calc(100% - 36px);
}
.deleteMember, .deleteChild, .editChild {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #FF9966;
    border-radius: 100%;
    background-image: url('/spectrum/media/images/icons/delete.png');
    background-size: 26px 26px;
    background-position: 2px 2px;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: 5px;
	transition:all ease-in-out 0.4s;
	opacity:0;
}
.editChild {
    background-image: url('/spectrum/media/images/icons/edit.png');
    margin-left: -35px;
}
.deleteMember:hover, .deleteChild:hover, .editChild:hover {
	background-color:#F99;
	cursor:pointer;
}
.householdMemberWrap:hover .deleteMember,.householdMemberWrap:hover .deleteChild,.householdMemberWrap:hover .editChild{
	opacity:1.0;
}
.userCard.genderF .userPhoto{
	background-color:#FF9999;
}
.userCard.genderM .userPhoto{
	background-color:#66CCFF;
}
.blockTitle {
    display: block;
    background: #FF9966;
    margin: -6px;
    padding: 6px;
    border-radius: 6px 6px 0 0;
    color: #FFF;
    font-size: 24px;
	margin-bottom:12px;
}
.keypadwrapper { text-align: center; width: 100%; color: #FF9966;}

	.keypadwrapper .inputwrapper { margin: 2em; line-height: 0.61em;   vertical-align: middle; }

	.keypadwrapper .numberinput { display: inline-block; height: 15px; width: 15px; border-radius: 50px; border: 1px solid #FF9966; margin-right: 2%; margin-left: 2%; font-size: 2em; }

	
		.keypadwrapper .keypad .numberline { width: 100%; margin-bottom:24px; }

		

		.keypadwrapper .keypad .keypadKey { display: inline-block; margin: 0 8%;}

			.keypadwrapper .keypad  .keypadKey div { width: 4em; height: 4em; text-align: center; border: 1px solid #FF9966; border-radius: 70px; display: inline-block; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition:all ease-in-out 0.4s;}

			.keypadwrapper .keypad  .keypadKey span:nth-child(1) { display: block; font-size: 1.8em; height: 1em; margin-top: 0.5em; }

			.keypadwrapper .keypad  .keypadKey span:nth-child(2) { font-size: 0.6em; }
			

			.keypadwrapper .keypad  .keypadKey div:hover { background-color: #FF9966;  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
			.keypadwrapper .keypad  .keypadKey div.fade { background-color: #FF9966;  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity:0.5; }
			.keypadwrapper .keypad  .keypadKey div:hover .number,.keypadwrapper .keypad  .keypadKey div.fade .number{color: #FFFFFF;}
			.keypadwrapper .keypad  .keypadKey div.fade.off { opacity:1.0; }
		
	


.keypadwrapper .nocircle { width: auto !important; border: none !important; height: auto !important; }
#nextStep.disabled{
	opacity:0.5;
	cursor:not-allowed;	
}
.checkinInfo {
    text-align: left;
    margin-top: 5px;
	display:inline-block;
	width: 50%;
}
.checkinInfo .userCard{
	width: calc(100% - 36px);
	background:#fafafa;
	border-radius:12px 12px 0 0;
}

.ageGroupTab {
    background: #ececec;
    display: inline-block;
    width: calc(100% - 36px);
    padding: 12px;
    border-radius: 0 0 12px 12px;
    margin-left: 6px;
    margin-top: -6px;
    color: #aaa;
    text-align: center;
}
.boxTitle {
    display: inline-block;
    margin: -30px 0 20px 5px;
    background: #FFF;
    position: absolute;
    padding: 5px 10px;
    border-radius: 10px 10px 0 0;
	z-index:4;
}
.withTitle {
	margin-top:32px;
}
.boxInsert{
	padding-top:20px;
}
.boxInsert>.childRow {
    padding: 10px;
    border-top: solid #ececec 2px;
}
.boxInsert .childRow:first-of-type {
    border:none;
}
.boxTitle::before {
    display: inline-block;
    content: "";
    background: rgba(255,255,255,0.3);
    width: calc(100% + 12px);
    position: absolute;
    height: 24px;
    top: -6px;
    left: -6px;
    border-radius: 12px 12px 0 0;
	z-index:-1;
}
.checkoutIcon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #F96;
    border-radius: 100%;
    margin-right: 6px;
    margin-top: 6px;
    transition: all 0.4s ease 0s;
    cursor: pointer;
    background-position: center;
    background-size: 25px 25px;
    background-repeat: no-repeat;
	vertical-align:middle;
}
.checkedIn .checkoutIcon {
    background-image: url(../media/images/icons/checkIn.png);
}
.checkedOut .checkoutIcon {
    background-image: url(../media/images/icons/checkOut.png);
	background-color:#ECECEC;
}
.childName{
	display:inline-block;
	vertical-align:middle;
}
.checkedOut .childName{
	color:#999;
}
.childMetric{
	display:inline-block;
	float:left;
	margin:5px;
	padding:20px;
	border-left:solid 2px #ececec;
}
.childMetric .number {
    font-size: 48px;
}
.boxInsert .childMetric:first-of-type {
    border: none;
}

@media all and (max-width: 470px) {
	.keypadKey { margin: 0 5% !important; }
}

@media all and (max-width: 350px) {
	.keypadKey { margin: 0 2% !important; }
}



@media screen and (max-width: 1024px) {
	.myCalendarDay{
		text-align:center;
		height:auto;
		min-height: 44px;
	}
	.myCalendarDay .calendar-event-list{
		display:none;
	}
	.myCalendarDay .smallCal {
		display:inline-block;
	}
	.myCalendarDay .day-number{
		background:none !important;
		color:#333 !important;
		position:static;
		top:auto;
		left:auto;
		text-align:center;
		transition:color ease-in-out 0.4s;
		width:auto !important;
	}
	.myCalendarDay.on .day-number{
		color:#F96 !important;
	}
	#calendarOverview {
		display: inline-block;
		background: #FAFAFA;
		width: 100%;
		width:calc(100% - 250px);
		height: 30%;
		position: fixed;
		bottom: -100%;
		right: 0;
		z-index: 99;
	}
	#calendarOverview.on {
		bottom:0;
	}
	#ministryFrame.calFrame{
		padding-bottom:60%;
	}
	.optionToggleWrap {
		position:relative;
		margin-bottom:36px;
	}
	.optionToggle {
		transition: all ease-in-out 0.4s;
		overflow: hidden;
		max-height: 400px;
		max-height: 0;
	}
	.optionToggleWrap.on>.optionToggle{
		max-height: 400px;
	}
	.optionToggleButton {
		display: inline-block;
		width: 100px;
		background: #FAFAFA;
		padding: 12px;
		text-align: center;
		position: absolute;
		bottom: -36px;
		left: 50%;
		margin-left: -62px;
		border-radius: 8px;
		cursor:pointer;
	}
	#addService {
		width: auto;
		padding: 8px;
		max-width: calc(50% - 19px);
		margin-right: 6px;
	}
	#addGroupEvent {
		width: auto;
		padding: 8px;
		max-width: calc(50% - 19px);
		margin-right: 0;
	}
	.serviceTimeLeft{
		width:100%;
		width:calc(100% - 20px);
	}
	.serviceTimeRight{
		width:100%;
		width:calc(100% - 20px);
	}
}
@media screen and (max-width: 700px) {
	#calendarOverview {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	.a-table>div{
		
		display:block;
		float:none;
		vertical-align:middle;
		text-align:center;
		width:100%;
		width:calc(100% - 12px);
		padding:6px;
	}
	.section[data-section="One"] .a-table>.a-table-right,.section[data-section="Three"] .a-table>.a-table-right{
		direction:rtl;
		display:table-header-group;
	}
	.a-table>div *{
		direction:ltr;
	}
	.section,.half-section{
		font-size:12px;
	}
	p.a-large{
		font-size:1em;
	}
	.a-title{
		font-size:24px;
	}
	#navSection .gotoSection{
		padding:12px 6px;
		float:left;
		text-align:center;
		width:calc(33.333333333% - 12px);
		font-size:12px;
	}
	.a-unity {
		margin-top:-80px;
		height: 280px;
	}
	.a-involved{
		height: 100px;
		margin-top:20px;
	}
	.a-give{
		height: 100px;
		margin-top:60px;
	}
	.smallCal{
		display:inline-block;
	}
}
@media screen and (min-width: 1200px) {
	#mainWrap>.button{
		width:33.333333%;
		width:calc(33.33333% - 28px) !important;
		display:inline-block;
	}
	#mainWrap>.button:hover{
		width:33.333333%;
		width:calc(33.33333% - 28px) !important;
	}
}



@media print {
   #printPage{
	   display:none;
   }
}