/*# MOD */
.navbar, .sidebar-overlay .navbar{background: #3f85d6;}
.footer {background: #3f85d6 url(../images/footer_bg.svg) !important;}
.balls{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	align-content: center;
}
.balls .medium{
	display:block;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	 width: 34px;
	 height: 34px;
	 border: 3px solid #000;
	 text-align: center;	
	font-size:20px;
	font-weight:500;
	margin:1px;
	padding:0 4px;
	background:#eee;
	border:1px solid #222;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5)
}
.balls .small{
	display:block;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	 width: 34px;
	 height: 34px;
	 border: 3px solid #000;
	 text-align: center;	
	font-size:18px;
	font-weight:500;
	margin:1px;
	padding:4px;
	background:#eee;
	border:1px solid #222;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5)
}
.small.red{
	background: radial-gradient(circle at 30% 10%, #ffc3da, #ff0000 45%, #ca0000 56%, #ff0000 85%) border-box;
	border: 3px solid transparent;
	color:#fff;
}
.small.green{
	background: radial-gradient(circle at 30% 10%, #d1ffd0, #00c523 45%, #08b300 56%, #00bb12 85%) border-box;
	border: 3px solid transparent;
	color:#333;
}
.small.blue{
	background: radial-gradient(circle at 30% 10%, #daeaff, #006df0 45%, #1d4e9e 56%, #0059e8 85%) border-box;
	border: 3px solid transparent;
	color:#fff;
}
.small.cyan{
	background: radial-gradient(circle at 30% 10%, #fff8e0, #dec11b 45%, #caa60e 56%, #f8b700 85%) border-box;
	border: 3px solid transparent;
	color:#333;
}
.small.orange{
	background: radial-gradient(circle at 30% 10%, #ffedda, #f09900 45%, #e07119 56%, #e88300 85%) border-box;
	border: 3px solid transparent;
	color:#fff;
}
.small.violet{
	background: radial-gradient(circle at 30% 10%, #ffdafc, #f000ce 45%, #e0199a 56%, #e800d0 85%) border-box;
	border: 3px solid transparent;
	color:#fff;
}

.medium.red{
	background: radial-gradient(circle at 30% 10%, #919191, #1d1d1d 66%, #000000 100%) padding-box, radial-gradient(circle at 30% 10%, #ffffff, #db0000 45%, #722020 56%, #ff0000 85%) border-box;
	border: 5px solid transparent;
	color:#eee;
}
.medium.green{
	background: radial-gradient(circle at 30% 10%, #919191, #1d1d1d 66%, #000000 100%) padding-box, radial-gradient(circle at 30% 10%, #ffffff, #05db00 45%, #2c7220 56%, #00ff0d 85%) border-box;
	border: 5px solid transparent;
	color:#eee;
}
.medium.blue{
	background: radial-gradient(circle at 30% 10%, #919191, #1d1d1d 66%, #000000 100%) padding-box, radial-gradient(circle at 30% 10%, #ffffff, #0050db 45%, #204872 56%, #0040ff 85%) border-box;
	border: 5px solid transparent;
	color:#eee;
}
.medium.cyan{
	background: radial-gradient(circle at 30% 10%, #919191, #1d1d1d 66%, #000000 100%) padding-box, radial-gradient(circle at 30% 10%, #ffffff, #dbb200 45%, #726020 56%, #ffcf00 85%) border-box;
	border: 5px solid transparent;
	color:#eee;
}
.medium.orange{
	background: radial-gradient(circle at 30% 10%, #919191, #1d1d1d 66%, #000000 100%) padding-box, radial-gradient(circle at 30% 10%, #ffffff, #db7100 45%, #725420 56%, #ff8600 85%) border-box;
	border: 5px solid transparent;
	color:#fff;
}
.medium.violet{
	background: radial-gradient(circle at 30% 10%, #919191, #1d1d1d 66%, #000000 100%) padding-box, radial-gradient(circle at 30% 10%, #ffffff, #db00ce 45%, #72205d 56%, #ff00bf 85%) border-box;
	border: 5px solid transparent;
	color:#eee;
}

.triangle {
	position: absolute;
	right: 0;
	width: 0;
	height: 0;
	border-top: 65px solid #ea6c6c;
	border-left: 65px solid transparent;
	text-align:center;
}
.triangle > span {
	position: absolute; 
	top: -55px;
	right: 5px;
	font-size: 14px;
	color: #fff; 
	font-weight:500;
	transform: rotate(45deg);
}
.triangle > span > small{display:block;font-size:.5em;font-weight:normal;}
.card-body.red > .triangle{border-top-color: #ff0000 !important;}
.card-body.green > .triangle{border-top-color: #00c523 !important;}
.card-body.blue > .triangle{border-top-color: #006df0 !important;}
.card-body.cyan > .triangle{border-top-color: #dec11b !important;}
.card-body.orange > .triangle{border-top-color: #f09900 !important;}
.card-body.violet > .triangle{border-top-color: #f000ce !important;}
.btn-outline-danger{color: #ff343a;border-color: #ff0007;}
.btn-outline-danger:hover{color: #fff;background-color: #ff0007;}
.card-body {background: url(../images/footer_bg.svg);background-size: cover;}
.card-body.bg-left {background-position: left bottom;}
.card-body.bg-right {background-position: right bottom;}
img.card-img-top{background-size: cover;}
img.card-img-top.red{background:linear-gradient(to top, rgb(220 11 11), rgb(255 57 57 / 80%));}
img.card-img-top.green{background:linear-gradient(to top, rgb(0 171 27), rgb(58 255 57 / 80%));}
img.card-img-top.cyan{background:linear-gradient(to top, rgb(171 145 0), rgb(255 225 57 / 80%));}
img.card-img-top.orange{background:linear-gradient(to top, rgb(171 107 0), rgb(255 189 57 / 80%));}
img.card-img-top.blue{background:linear-gradient(to top, rgb(0 72 171), rgb(57 133 255 / 80%));}
img.card-img-top.violet{background:linear-gradient(to top, rgb(220 11 161), rgb(255 57 214 / 80%));}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
#portfolio-flters {
	padding: 0;
	margin: 0 0 35px 0;
	list-style: none;
	text-align: center;
}

#portfolio-flters li {
	cursor: pointer;
	margin: 5px 6px;
	display: inline-block;
	padding: 11px 30px;
		font-size: 0.875rem;
	font-weight: 400;
	color: #444;
	transition: all 0.3s ease-in-out;
	border: 2px solid #ddd;
	text-align: center;
		vertical-align: middle;
	line-height: 1.5;
		border-radius: 50px;
}

#portfolio-flters li:hover, #portfolio-flters li.filter-active {
	border-color: #3f85d6;
	color: #3f85d6;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.page-link {
	color: #4d8ed9 !important;
	background-color: #fff;
	border: 1px solid #4d8ed9;
}
.page-link:hover {
	color: #0056b3;
	background-color: #e9ecef;
	border-color: #4d8ed9;
}
.page-link:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25) !important;
}
.page-item.active .page-link {
	color: #fff !important;
	background-color: #4d8ed9 !important;
	border-color: #4d8ed9 !important;
}
.page-item.disabled .page-link {
	color: #6c757d;
	background-color: #fff;
	border-color: #4d8ed9;
}