*{margin:0; padding:0; font-family: 'Cagliostro', sans-serif;}

.bg-bottom{background-color:#228138;}
.bg-bottom ol{display:flex;}
.bg-bottom ol li{list-style:none; width:43px; height:43px; background-color:#f19e1f; margin:5px; border-radius:100%; display:flex; justify-content:center; align-items:center;}
.bg-bottom ol li:hover{background-color:#af1d0d; border-radius:0; border:3px solid #f19e1f; transform: rotate(20deg); transition-duration: 0.5s;}
.bg-bottom ul li{list-style:none;}
.bg-bottom ul li a , table td a{color:white;}
.bg-bottom ul li a:hover , table td a:hover{text-decoration:none; color:#daa801;}
.bg-bottom ul li i{color:white; border-radius:100%; border:1px solid #f19e1f; width:30px; height:30px; display:flex; justify-content:center; align-items:center; margin-bottom:5px;  margin-right:10px;}

.bg-bottom fieldset{border:0px solid #2dac49; padding:10px; width:100%; height:180px; margin-bottom:10px;}

.bg-footer{background-color:#0a0a0a;}
.bg-footer a{text-decoration:none; color:white;}
.bg-footer a:hover{text-decoration:none; color:gray;}

.navbar-brand .title{font-size:2.3rem; font-weight:bold;}
.navbar-brand .title span{	display: block; font-size: .3em; line-height: 1.3em; text-transform: uppercase; padding-left: 2em;}

#topbar{background-color:#228138;}
#topbar a{text-decoration:none; color:#ffffff;}

#content .title-section{color:#0099e5; font-size:210%;}
#content h6{line-height:1.5em;}
.contact-text a{text-decoration:none; color:black;}


#donation-data  table{width:900px; border:10px #313842 solid; margin:0 auto; margin-bottom:30px;}
#donation-data tr{border:10px #313842 solid;}
#donation-data th{border:10px #313842 solid;width:30%;padding:10px;color:black;}
#donation-data th img{width:250px; height:100px;}
#donation-data td{border:10px #313842 solid;min-width:300px; text-align:center; font-weight:bold;color:black;}

#member table{width:auto; border:5px white solid; margin:0 auto;}
#member th{border:5px white solid; padding:5px;}
#member td{border:5px white solid; padding:5px;}

#owlCarousel3 .card{ border:3px solid black; box-shadow: 5px 5px 5px grey; margin-bottom:10px; border-radius:5px; width:16rem; background-color:#f17909;}
#owlCarousel3 img{width:100%; height:100%; padding:15px; }
#owlCarousel3 .card-body{ height:290px; }

.owl-dots-remove{text-align:center; margin-top:20px;}
.owl-dot-remove{height:15px; width:45px; border: 2px solid #0072bc!important; transition: all 0.3s ease; border-radius:25px; cursor:pointer; outline:none; margin: 0 5px;}
.owl-dot-remove:hover, .owl-dot-remove.active{background:#0072bc!important; }

.focus-grid {position: relative; display: block; text-transform: uppercase; overflow: hidden;}
.focus-grid a{text-decoration:none;}
.focus-grid a:hover{text-decoration:none;}
.focus-grid h4{text-align:center; font-size:22px; color: #323232;}
.category-boder1{border:1px solid #dd0908;}
.category-boder2{border:1px solid #ff9e29;}
.category-boder3{border:1px solid #3fb7d2;}
.category-boder4{border:1px solid #15c01c;}
.category-boder5{border:1px solid #7e3b07;} /*edit*/
.category-boder6{border:1px solid #1963ce;} /*edit*/
.category-boder7{border:1px solid #c119ce;} /*edit*/
.category-boder8{border:1px solid #7fbad8;} /*edit*/
.category-boder9{border:1px solid #1ca39d;} /*edit*/
.category-boder10{border:1px solid #df8012;} /*edit*/
.category-boder11{border:1px solid #f49ecf;} /*edit*/
.category-boder12{border:1px solid #070c1f;} /*edit*/
.category-boder1:hover,.category-boder2:hover,.category-boder3:hover,.category-boder4:hover,.category-boder5:hover,.category-boder6:hover,
.category-boder7:hover,.category-boder8:hover,.category-boder9:hover,.category-boder10:hover,.category-boder11:hover,.category-boder12:hover
{border:1px solid #ff4c4c;}
.btn-cat, .btn-cat:before, .btn-cat:after {box-sizing: border-box; -webkit-transition: 1.5s; transition: 1.5s; -ms-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s;}
.btn-cat:before,.btn-cat:after { z-index: -1;}
.btn-cat:before,.btn-cat:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0;  background: #ff4c4c;}
.btn-cat:after { top: auto; bottom: 0;}
.btn-cat:hover { color: #d8e4ef; }
.btn-cat:hover:before, .btn-cat:hover:after { height:100%;}
.btn-cat:active { background: #6492bf;}
.focus-border{border:1px solid #e7eaed;}
.focus-layout{background: transparent; margin: 5px; padding: 20px 0; text-align: center; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all;}
.focus-layout{background:#FBFBFB; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all;}
.focus-layout:hover {background-color: #01a185; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all;}
.focus-layout h4{margin: 0 0 0 0;color:#4C4C4C;font-size: 18px;text-align:center;height: 35px;margin-top: 20px;}
.focus-layout:hover h4.clrchg {color: #fff;}
.focus-image{text-align: center; transition: 0.5s all; -webkit-transition: 1.5s all; -moz-transition: 1.5s all; -o-transition: 1.5s all; -ms-transition: 1.5s all;}
.focus-image i {font-size: 40px; color: #fff; background: #dd0908; border-radius: 50%; width: 90px; height: 90px; line-height: 95px; transition: 0.5s all; -webkit-transition: 1.5s all; -moz-transition: 1.5s all; -o-transition: 1.5s all; -ms-transition: 1.5s all;}
.focus-layout:hover div.focus-image i{background:#FBFBFB;	color:#000; transition: 0.5s all;  -webkit-transition: 1.5s all;  -moz-transition: 1.5s all;  -o-transition: 1.5s all;  -ms-transition: 1.5s all;}
.focus-image i.fa-handshake {background:#dd0908;}
.focus-image i.fa-hands-helping {background:#ff9e29;}
.focus-image i.fa-door-open {background:#3fb7d2;}
.focus-image i.fa-user-tie {background:#15c01c;}
.focus-image i.fa-laptop {background:#7e3b07;} /*edit*/
.focus-image i.fa-black-tie {background:#1963ce;} /*edit*/
.focus-image i.fa-user-graduate {background:#c119ce;} /*edit*/
.focus-image i.fa-briefcase-medical {background:#7fbad8;} /*edit*/
.focus-image i.fa-store-alt {background:#1ca39d;} /*edit*/
.focus-image i.fa-hourglass-half {background:#df8012;} /*edit*/
.focus-image i.fa-icon-name {background:#f49ecf;} /*edit*/
.focus-image i.fa-icon-name {background:#070c1f;} /*edit*/

.rotate {animation: rotation 8s infinite linear;}
@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}


/* Gallery Css ======================================================== */

#body-gallery
{	
	border: thin dotted #f2f2f2;
	height: auto;
	background-color: white;	
	float:center;
	width:auto;
}
.box{width:100%; border:solid 1px #01546b; box-shadow:3px 3px #01546b;border-radius:5px; margin-bottom:-15px; background-color:#d6d6d6;padding:10px;}
.box_h1{width:99%; text-align:left; font-weight:bold; margin:3px 3px 6px 3px; background-color:#01546b; color:white; border-radius:5px; padding:5px 0px 5px 5px; font-size:16px;}
.content-gallery{width:auto; padding-left:25px; }
.p_h1{padding-right:20px; margin:18px 0px; font-size:17px; line-height:27px; color:black; text-align:justify;}

/*Float clearing goodness from Handcrafted CSS book ------------------------------------------------------------- */
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* Layout */
.stack { float: left; width: 21%; margin: 0 4% 4% 0; position: relative; z-index: 10; }

/* Image styles */
.stack img {width: 220px; height: 220px; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type { margin-right: 0; }

/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 220px; height: 220px; position: absolute; border: 10px solid #fff; left: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-webkit-transition: 0.3s all ease-out;
	-moz-transition: 0.3s all ease-out;
	transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */	
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before { 
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	transform: rotate(2deg);
}
.stack.rotated:after { 
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}	

/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}	
.stack.twisted:after {
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	transform: rotate(-4deg);
}	

/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.stack.rotated-left:after {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(-6deg);
	-moz-transform: rotate(-6deg);
	transform: rotate(-6deg);
}

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}