/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

.glbtn {
		-webkit-animation: glowing 1500ms infinite;
		-moz-animation: glowing 1500ms infinite;
		-o-animation: glowing 1500ms infinite;
		animation: glowing 1500ms infinite;
}

@-webkit-keyframes glowing {
		0% {
				border-color: #d99f00;
				-webkit-box-shadow: 0 0 3px #d99f00;
		}

		50% {
				border-color: #fcba03;
				-webkit-box-shadow: 0 0 20px #fcba03;
		}

		100% {
				border-color: #d99f00;
				-webkit-box-shadow: 0 0 3px #d99f00;
		}
}

@-moz-keyframes glowing {
		0% {
				border-color: #d99f00;
				-moz-box-shadow: 0 0 3px #d99f00;
		}

		50% {
				border-color: #fcba03;
				-moz-box-shadow: 0 0 20px #fcba03;
		}

		100% {
				border-color: #d99f00;
				-moz-box-shadow: 0 0 3px #d99f00;
		}
}

@-o-keyframes glowing {
		0% {
				border-color: #d99f00;
				box-shadow: 0 0 3px #d99f00;
		}

		50% {
				border-color: #fcba03;
				box-shadow: 0 0 20px #fcba03;
		}

		100% {
				border-color: #d99f00;
				box-shadow: 0 0 3px #d99f00;
		}
}

@keyframes glowing {
		0% {
				border-color: #d99f00;
				box-shadow: 0 0 3px #d99f00;
		}

		50% {
				border-color: #fcba03;
				box-shadow: 0 0 20px #fcba03;
		}

		100% {
				border-color: #d99f00;
				box-shadow: 0 0 3px #d99f00;
		}
}

.scrolling-box {
		/*background-color: #eaeaea;*/
		display: block;
		width: auto;
		height: 320px;
		padding: 1em;
		overflow-y: scroll;
		text-align: center;
}

.mybtnclass {
		box-shadow: 0 4px 16px #e2e2e2;
}

button.btn.btn-primary:hover, button.btn.btn-primary:focus, button.btn.btn-primary:not(:disabled):not(.disabled):active, button.btn.btn-primary:not(:disabled):not(.disabled).active,
.btn:not(.close):not(.mfp-close).btn-primary:hover,
.btn:not(.close):not(.mfp-close).btn-primary:focus,
.btn:not(.close):not(.mfp-close).btn-primary:not(:disabled):not(.disabled):active,
.btn:not(.close):not(.mfp-close).btn-primary:not(:disabled):not(.disabled).active,
a.btn:not([href]):not([tabindex]).btn-primary:hover,
a.btn:not([href]):not([tabindex]).btn-primary:focus,
a.btn:not([href]):not([tabindex]).btn-primary:not(:disabled):not(.disabled):active,
a.btn:not([href]):not([tabindex]).btn-primary:not(:disabled):not(.disabled).active {
		background-color: white;
		border-color: #0333e8;
		color: #0333e8;
}



.card {
		background: #fff;
		box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
		border: 1;
		border-radius: 1rem;
}

.img-hover-zoom--colorize img {
		border-radius: 50%;
		width: 150px;
		height: auto;
		margin-top: 20px;
		padding: 1px;
		transition: transform .5s;
		/*filter: grayscale(100%);*/
}

.img-hover-zoom--colorize:hover img {
		filter: grayscale(0);
		transform: scale(1.05);
}

.card h5 {
		overflow: hidden;
		/*height: 80px;*/
		font-weight: 300;
		font-size: 1rem;
}

		.card h5 a {
				color: black;
				text-decoration: none;
		}

.role {
		color: #7a7a7a;
}

.box {
		display: flex;
		align-items: center;
		justify-content: center;
}

.fab {
		font-size: 1.5rem;
		color: darkgray;
		transition: transform .5s;
}

		.fab:hover {
				color: black;
				transform: scale(1.1);
		}

.card h2 {
		font-size: 1rem;
}


/* MEDIA */

@media only screen and (min-width: 1200px) {
		.img-hover-zoom--colorize img {
				width: 200px;
		}
}

@media only screen and (min-width: 1200px) {
		.h1,
		h1 {
				font-size: 2rem;
		}
}

.hlink:after {
		background: none repeat scroll 0 0 transparent;
		bottom: 0;
		content: "";
		display: block;
		height: 2px;
		left: 50%;
		position: absolute;
		background: #fff;
		transition: width 0.3s ease 0s, left 0.3s ease 0s;
		width: 0;
}

.hlink:hover:after {
		width: 100%;
		left: 0;
}

.sticky-active .hlink:after {
		background: none repeat scroll 0 0 transparent;
		bottom: 0;
		content: "";
		display: block;
		height: 2px;
		left: 50%;
		position: absolute;
		background: #2250fd;
		transition: width 0.3s ease 0s, left 0.3s ease 0s;
		width: 0;
}

.sticky-active .hlink:hover:after {
		width: 100%;
		left: 0;
}

.float {
		position: fixed;
		width: 50px;
		height: 50px;
		bottom: 20px;
		left: 20px;
		background-color: #25d366;
		color: #fff;
		border-radius: 40px;
		text-align: center;
		font-size: 30px;
		/*box-shadow: 0 2px 8px #e2e2e2;*/
		z-index: 100;
}

.my-float {
		margin-top: 11px;
		color: #fff;
}

/*LOADER*/
.loader .mt-2.mb-0 {
		position: absolute;
		bottom: 0;
		color: #888;
}

.loaders {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex: 0 1 auto;
		flex-direction: row;
		flex-wrap: wrap;
}

		.loaders .loader {
				box-sizing: border-box;
				display: flex;
				flex: 0 1 auto;
				flex-direction: column;
				flex-grow: 1;
				flex-shrink: 0;
				flex-basis: 20%;
				max-width: 20%;
				height: 180px;
				align-items: center;
				justify-content: center;
		}

.ball-grid-pulse > div {
		background: #D86199 !important;
}

.square-spin > div {
		background: #803314 !important;
}

.ball-rotate > div,
.ball-rotate > div:after,
.ball-rotate > div:before {
		background: #FB7302 !important;
}

.cube-transition > div {
		background: #475175 !important;
}

.ball-zig-zag > div {
		background: #E62220 !important;
}

.ball-triangle-path > div {
		background: #F68142 !important;
}

.line-scale > div {
		background: #00AC93 !important;
}

.ball-scale-multiple > div {
		background: #71B3D0 !important;
}

.ball-pulse-sync > div {
		background: #10345B !important;
}

.ball-beat > div {
		background: #CC3433 !important;
}

.line-scale-pulse-out-rapid > div {
		background: #999999 !important;
}

.ball-scale-ripple > div {
		background: #00349A !important;
}

.ball-scale-ripple-multiple > div {
		border: 2px solid #9ACCCD;
}

.ball-spin-fade-loader > div {
		background: #00349A !important;
}

.line-spin-fade-loader > div {
		background: #00639A !important;
}

.pacman > div:nth-child(3),
.pacman > div:nth-child(4),
.pacman > div:nth-child(5),
.pacman > div:nth-child(6) {
		background-color: #2192B2;
}

.pacman > div:first-of-type,
.pacman > div:nth-child(2) {
		border-color: #2192B2 transparent #2192B2 #2192B2;
}

.ball-grid-beat > div {
		background: #636FAB !important;
}

/*LoginPartial*/
/*button.btn.btn-sm, .btn:not(.close):not(.mfp-close).btn-sm, a.btn:not([href]):not([tabindex]).btn-sm .btn-login {
				font-size: 18px;
				height: 35px;
				line-height: 28px;
				padding: 0 14px;
		}*/

.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		/*z-index: 1000;*/
		display: none;
		float: left;
		/*min-width: 10rem;*/
		/*padding: .5rem 0;*/
		margin: .125rem 0 0;
		font-size: 1rem;
		color: #212529;
		text-align: left;
		list-style: none;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid rgba(0,0,0,.15);
		border-radius: .6rem;
		line-height: normal;
		min-width: 140px;
		z-index: 5;
		width: min-content;
		/*top: auto;*/
		right: 0;
}

.dropdown-item {
		padding-top: 8px;
		padding-bottom: 8px;
		padding-right: 0.4rem;
		padding-left: 0.7rem;
}

.p-dropdown .dropdown-menu {
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
		max-height: 0;
		display: block;
		overflow: hidden;
		opacity: 0;
}

.p-dropdown.show .dropdown-menu {
		max-height: 200px;
		opacity: 1;
}