/*------------------------------------------------------------------
[

Project:	HarusiOnline
Version:	1.0.0
Author: Jeremiah Mmasi
Website: www.harusi.online
Purchase:
-------------------------------------------------------------------
[

/*--------- Body Strat -------*/
body, html{
	font-family: 'Lora', serif;
	font-size: 16px;
	line-height: 23px;
	color: #797979;
	overflow-x: hidden;
}
/*---------- Custom Css Start -------*/
a {
	color: #797979;
	text-decoration: none;
}
a:hover, a:focus {
	color: #707070;
	text-decoration: none;
}
a:focus {
	outline: none;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Georgia', cursive;
	line-height: 1.1;
	font-weight:400;
}


textarea {
	outline: none;
}
textarea:focus {
	outline: none;
	box-shadow:none;
}

#site-header{
	padding-top: 10px;
	/*padding-bottom: 5px;*/
}

.great-vibes-font{
	font-family: "Great Vibes" !important;
}

#top-logo{
	display: flex;
	align-items: center;
}

#top-logo img{
	width:40px;
	margin-right: 5px;
}

.section-header{
	font-family: "Great Vibes" !important;
	margin-bottom: 20px;
	margin-top: 20px;
}

#main-section{
	background-image: url('../img/main_site_banner.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#event-reg{
	/*! height: 400px; */
	padding-bottom: 10px;
}

/*text animation on event registration section*/
.neons {
	margin-top: 10rem;
	text-align: center;
}

.animated-text{
	/*font-size: 9rem;*/
	font-family: 'Great Vibes';
	text-align: center;
	font-weight: bold;
	-webkit-animation: glow 2s ease-in-out infinite alternate;
	-moz-animation: glow 2s ease-in-out infinite alternate;
	animation: glow 2s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
	from {
		color: #fff;
		text-shadow: 0 0 4px #0472ff, 0 0 5px #0472ff, 0 0 7px #0472ff, 0 0 10px #0472ff, 0 0 12px #0472ff, 0 0 15px #0472ff, 0 0 20px #0472ff, 0 0 30px #0472ff;
	}

	to {
		color: gray;
		text-shadow: 0 0 8px #0472ff, 0 0 9px #0472ff, 0 0 10px #0472ff, 0 0 11px #0472ff, 0 0 130px #0472ff, 0 0 15px #0472ff, 0 0 20px #0472ff, 0 1 30px #0472ff;
	}
}

#photos {
	/* Prevent vertical gaps */
	background-image: url('../img/main_display_2.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 0 !important;
	line-height: 0;

	-webkit-column-count: 5;
	-webkit-column-gap:   0px;
	-moz-column-count:    5;
	-moz-column-gap:      0px;
	column-count:         5;
	column-gap:           0px;
	height: auto;
	overflow: hidden;
}

.service-summary-img {
	position: relative;
	display: inline-block;
	margin-bottom: 10px;
}

/* Tooltip text */
.service-summary-img .service-tooltip {

	width: 90%;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;

	/* Position the tooltip text - see examples below! */
	position: absolute;
	left: 5%;
	bottom: 5%;
	z-index: 1;
	opacity: 0;
	transition: opacity 2s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.service-summary-img:hover .service-tooltip {
	opacity: 1;
}

.service-summary-img:hover .service-summary-img img {
	opacity: 0.8;
}
.bg-light-blue{
	background-color:aliceblue;
	padding-bottom: 10px;
}
.bg-black{
	background-color:#4a85ff !important;
	color: white;
}

.event-card{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	height:200px;
	width:250px;
	display: inline-block;
	position: relative;
	margin: 5px;
	-webkit-box-shadow: 9px 10px 10px -8px rgba(0,0,0,0.64);
	-moz-box-shadow: 9px 10px 10px -8px rgba(0,0,0,0.64);
	box-shadow: 9px 10px 10px -8px rgba(0,0,0,0.64);
}

.event-card .event-details{
	position: absolute;
	background-color: rgba(74, 133, 255, 0.80);
	color: white;
	bottom:0;
	left: 0;
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 20px;
	height:200px;
	width:100%;
	overflow: hidden;
}

a{
    text-decoration: none !important;
}


/*zooming image on event card*/
.parent:hover .child, .parent:focus .child {
	-ms-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

.event-card:hover .event-details{
	background-color: rgba(74, 133, 255, 0.93);
	color: whitesmoke;
}

.event-card .color-box{
	display: inline-block;
	width:30px;
	height: 16px;
}

.event-card a {
	color: white !important;
}

.load-more-events{
	display: grid;
	align-content: center !important;
}

#photos img {
	/* Just in case there are inline attributes */
	width: 100% !important;
	height:133.3333333px !important;
	object-fit: cover;
}

#photos:hover img:not(:hover) {
	opacity: 0.4;
}

#social-accounts a{
	color: white !important;
}




/*event site styling*/
#event-details{
	width:100%;
	height: inherit;
	background-color: rgba(0,0,0,0.7);
	padding-top: 60px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 20px;
	overflow: hidden;
	color: white !important;
}

.breathing-effect{
	-webkit-animation: scale 2s ease-in-out infinite alternate;
	-moz-animation: scale 2s ease-in-out infinite alternate;
	animation: scale 2s ease-in-out infinite alternate;
	transform-origin: left top;
}

@-webkit-keyframes scale {
	from {
		width: 94.5px;
		height: 70.5px;
	}

	to {
		width: 63px;
		height: 47px;
	}
}


#event-details .color-box{
	display: inline-block;
	width:40px;
	height: 20px;
}

#pledge-form-card {
	background-color: rgba(236, 236, 236, 0.6);
	margin: 25px;
	padding: 20px;
	height: inherit;
	border-radius: 5px;
}

#video-card{
	background-color: rgba(236, 236, 236, 0.6);
	margin: 25px;
	padding: 20px;
	height: inherit;
	border-radius: 5px;
}

.video-container {
	overflow: hidden;
	position: relative;
	width:100%;
}

.video-container::after {
	padding-top: 56.25%;
	display: block;
	content: '';
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.map-box{
	background-image: url('../img/map.PNG');
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
	position: relative;
	width:100%;
	height:70px;
}

.map-box iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#event-reg {
	margin-top: 35px;
	padding: 25px;
	background-color: rgba(245, 245, 245, 0.31);
	margin-bottom:35px;
	height: auto !important;
}

@media (max-width: 1200px) {
	#photos {
		-moz-column-count:    5;
		-webkit-column-count: 5;
		column-count:         5;
	}
	#event-reg {
		height: inherit;
	}
}
@media (max-width: 1000px) {
	#photos {
		-moz-column-count:    4;
		-webkit-column-count: 4;
		column-count:         4;
	}
	#event-reg {
		height: inherit;
	}
}
@media (max-width: 800px) {
	#photos {
		-moz-column-count:    3;
		-webkit-column-count: 3;
		column-count:         3;
		height: 300px;
	}
	#event-reg {
		height: inherit;
	}
}
@media (max-width: 400px) {
	#photos {
		-moz-column-count:    2;
		-webkit-column-count: 2;
		column-count:         2;
		height: 200px;
	}

	#event-reg {
		height: inherit;
	}
}
/*-- Responsive css End --*/

/*loading css styles for CSS Only gallery and slider, from CSSbox*/

/** The work below, CSSBox, is released under the Creative Commons*/
/*Attribution-ShareAlike 4.0 license and is available on*/
/*https://github.com/TheLastProject/CSSBox. You are not required to add*/
/*additional credit to your website, just leave the above text in this file *!*/
div.cssbox {
	display: inline-block;
}

.cssbox a{
	position: relative;
}

.cssbox .img-caption{
	position: absolute;
	top: 0;
	left: 5px;
	padding: 5px;
	width:185px;
	height:102px;
	overflow: hidden;
	background-color: rgba(0,0,0,0.7);
	color: white;
	opacity: 0;
	transition: opacity 2s;
}

.cssbox .cssbox_thumb{
	width: 200px;
	margin: 2px;
	height: 200px;
	object-fit: cover;
	opacity: 1;
	transition: opacity 2s;
}

.cssbox a:hover .img-caption{
	opacity: 1;
}

.cssbox a:hover .cssbox_thumb{
	opacity: 0.7;
}

span.cssbox_full {
	z-index: 999;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.8);
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	cursor: default;
	transition: opacity 0.5s linear;
}

span.cssbox_full img {
	position: fixed;
	background-color: white;
	margin: 0;
	padding: 0;
	max-height: 90%;
	max-width: 90%;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 20px black;
}

a.cssbox_close,
a.cssbox_prev,
a.cssbox_next {
	z-index: 999;
	position: fixed;
	text-decoration: none;
	visibility: hidden;
	color: white;
	font-size: 36px;
}

a.cssbox_close {
	top: 1%;
	right: 1%
}

a.cssbox_close::after {
	content: '\00d7';
}

a.cssbox_prev,
a.cssbox_next {
	top: 50%;
	transform: translate(0%, -50%);
}

a.cssbox_prev {
	left: 5%;
}

a.cssbox_next {
	right: 5%;
}

a:target ~ a.cssbox_close,
a:target ~ a.cssbox_prev,
a:target ~ a.cssbox_next {
	visibility: visible;
}

a:target > img.cssbox_thumb + span.cssbox_full {
	visibility: visible;
	opacity: 1;
	pointer-events: initial;
}
/* This is the end of CSSBox */

.category-badge{
    padding: 3px;
    margin-left: 5px;
}

/*Star ratings styling*/
@charset "UTF-8";
:root {
    --star-size: 30px;
    --star-color: #999999;
    --star-background: #012ea1;
}

.Stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: var(--star-size);
    font-family: Times;
    line-height: 1;
}
.Stars::before {
    content: '★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/*Multiselect Styling from Multiselect component */
fieldset[disabled] .multiselect{pointer-events:none}.multiselect__spinner{position:absolute;right:1px;top:1px;width:48px;height:35px;background:#fff;display:block}.multiselect__spinner:after,.multiselect__spinner:before{position:absolute;content:"";top:50%;left:50%;margin:-8px 0 0 -8px;width:16px;height:16px;border-radius:100%;border:2px solid transparent;border-top-color:#41b883;box-shadow:0 0 0 1px transparent}.multiselect__spinner:before{animation:spinning 2.4s cubic-bezier(.41,.26,.2,.62);animation-iteration-count:infinite}.multiselect__spinner:after{animation:spinning 2.4s cubic-bezier(.51,.09,.21,.8);animation-iteration-count:infinite}.multiselect__loading-enter-active,.multiselect__loading-leave-active{transition:opacity .4s ease-in-out;opacity:1}.multiselect__loading-enter,.multiselect__loading-leave-active{opacity:0}.multiselect,.multiselect__input,.multiselect__single{font-family:inherit;font-size:16px;-ms-touch-action:manipulation;touch-action:manipulation}.multiselect{box-sizing:content-box;display:block;position:relative;width:100%;min-height:40px;text-align:left;color:#35495e}.multiselect *{box-sizing:border-box}.multiselect:focus{outline:none}.multiselect--disabled{background:#ededed;pointer-events:none;opacity:.6}.multiselect--active{z-index:50}.multiselect--active:not(.multiselect--above) .multiselect__current,.multiselect--active:not(.multiselect--above) .multiselect__input,.multiselect--active:not(.multiselect--above) .multiselect__tags{border-bottom-left-radius:0;border-bottom-right-radius:0}.multiselect--active .multiselect__select{transform:rotate(180deg)}.multiselect--above.multiselect--active .multiselect__current,.multiselect--above.multiselect--active .multiselect__input,.multiselect--above.multiselect--active .multiselect__tags{border-top-left-radius:0;border-top-right-radius:0}.multiselect__input,.multiselect__single{position:relative;display:inline-block;min-height:20px;line-height:20px;border:none;border-radius:5px;background:#fff;padding:0 0 0 5px;width:100%;transition:border .1s ease;box-sizing:border-box;margin-bottom:8px;vertical-align:top}.multiselect__input:-ms-input-placeholder{color:#35495e}.multiselect__input::placeholder{color:#35495e}.multiselect__tag~.multiselect__input,.multiselect__tag~.multiselect__single{width:auto}.multiselect__input:hover,.multiselect__single:hover{border-color:#cfcfcf}.multiselect__input:focus,.multiselect__single:focus{border-color:#a8a8a8;outline:none}.multiselect__single{padding-left:5px;margin-bottom:8px}.multiselect__tags-wrap{display:inline}.multiselect__tags{min-height:40px;display:block;padding:8px 40px 0 8px;border-radius:5px;border:1px solid #e8e8e8;background:#fff;font-size:14px}.multiselect__tag{position:relative;display:inline-block;padding:4px 26px 4px 10px;border-radius:5px;margin-right:10px;color:#fff;line-height:1;background:#41b883;margin-bottom:5px;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}.multiselect__tag-icon{cursor:pointer;margin-left:7px;position:absolute;right:0;top:0;bottom:0;font-weight:700;font-style:normal;width:22px;text-align:center;line-height:22px;transition:all .2s ease;border-radius:5px}.multiselect__tag-icon:after{content:"\D7";color:#266d4d;font-size:14px}.multiselect__tag-icon:focus,.multiselect__tag-icon:hover{background:#369a6e}.multiselect__tag-icon:focus:after,.multiselect__tag-icon:hover:after{color:#fff}.multiselect__current{min-height:40px;overflow:hidden;padding:8px 30px 0 12px;white-space:nowrap;border-radius:5px;border:1px solid #e8e8e8}.multiselect__current,.multiselect__select{line-height:16px;box-sizing:border-box;display:block;margin:0;text-decoration:none;cursor:pointer}.multiselect__select{position:absolute;width:40px;height:38px;right:1px;top:1px;padding:4px 8px;text-align:center;transition:transform .2s ease}.multiselect__select:before{position:relative;right:0;top:65%;color:#999;margin-top:4px;border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 0;content:""}.multiselect__placeholder{color:#adadad;display:inline-block;margin-bottom:10px;padding-top:2px}.multiselect--active .multiselect__placeholder{display:none}.multiselect__content-wrapper{position:absolute;display:block;background:#fff;width:100%;max-height:240px;overflow:auto;border:1px solid #e8e8e8;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:50;-webkit-overflow-scrolling:touch}.multiselect__content{list-style:none;display:inline-block;padding:0;margin:0;min-width:100%;vertical-align:top}.multiselect--above .multiselect__content-wrapper{bottom:100%;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:none;border-top:1px solid #e8e8e8}.multiselect__content::webkit-scrollbar{display:none}.multiselect__element{display:block}.multiselect__option{display:block;padding:12px;min-height:40px;line-height:16px;text-decoration:none;text-transform:none;vertical-align:middle;position:relative;cursor:pointer;white-space:nowrap}.multiselect__option:after{top:0;right:0;position:absolute;line-height:40px;padding-right:12px;padding-left:20px;font-size:13px}.multiselect__option--highlight{background:#41b883;outline:none;color:#fff}.multiselect__option--highlight:after{content:attr(data-select);background:#41b883;color:#fff}.multiselect__option--selected{background:#f3f3f3;color:#35495e;font-weight:700}.multiselect__option--selected:after{content:attr(data-selected);color:silver}.multiselect__option--selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--selected.multiselect__option--highlight:after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect--disabled .multiselect__current,.multiselect--disabled .multiselect__select{background:#ededed;color:#a6a6a6}.multiselect__option--disabled{background:#ededed!important;color:#a6a6a6!important;cursor:text;pointer-events:none}.multiselect__option--group{background:#ededed;color:#35495e}.multiselect__option--group.multiselect__option--highlight{background:#35495e;color:#fff}.multiselect__option--group.multiselect__option--highlight:after{background:#35495e}.multiselect__option--disabled.multiselect__option--highlight{background:#dedede}.multiselect__option--group-selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--group-selected.multiselect__option--highlight:after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect-enter-active,.multiselect-leave-active{transition:all .15s ease}.multiselect-enter,.multiselect-leave-active{opacity:0}.multiselect__strong{margin-bottom:8px;line-height:20px;display:inline-block;vertical-align:top}[dir=rtl] .multiselect{text-align:right}[dir=rtl] .multiselect__select{right:auto;left:1px}[dir=rtl] .multiselect__tags{padding:8px 8px 0 40px}[dir=rtl] .multiselect__content{text-align:right}[dir=rtl] .multiselect__option:after{right:auto;left:0}[dir=rtl] .multiselect__clear{right:auto;left:12px}[dir=rtl] .multiselect__spinner{right:auto;left:1px}@keyframes spinning{0%{transform:rotate(0)}to{transform:rotate(2turn)}}