.maincontainer {
	width:100%;
	margin: 0 auto;
	padding:0;
}


.innercontainer {
	width:90%;
	margin:0 auto;
}



.logo img {
	width:60%;
	height:auto;
	padding:0;
	margin:12% 0;
	border: 2px solid #ccc;	
	border-radius: 30px;
	box-shadow: 5px 3px #888888;
}
	
.topnav {
	width:100%;
	padding:10px 0px 10px 0px;
	margin:0;
	text-align: right;
	font-family: 'Alata', sans-serif;
	
}

.topnav a {
	color:#999;
	font-size:15px;
	padding:5px 10px;
	text-decoration:none;	
}

.topmenu {
	width:85%;
	margin:0 auto;
}

.dropdown-menu {
	background-color:#055E74;
}

.dropdown-menu a {
	background-color:#078e93;
}


.scrolltext {
	padding:10px 5px;
	font-size:20px;
	font-family: 'Josefin Sans', sans-serif;
	background-color:#097B97;
	color:#fff;
	border:1px solid #5DA8ED;	
}

.topnav a:hover {
	color:#fff;
	background-color:#0CB0A2;
}

.topnav p {
	padding: 5px 0;
	margin:0;
	font-size:14px;	
	color:#000;
	font-weight: bold;
}

.topnav span {
	color:#ccc;
}

.bgc {
	background-color:#375ade;
	border-top:2px solid #055E74;
	border-bottom:2px solid #055E74;
	border-radius: 0;
		
}

.tbgc {
	background-color:#ff4f2c;	
	border-bottom: 0px;
	padding: 0 !important;
	margin:0 !important;
}


.tbgc ul {
	border-bottom:0px solid #fff;
}

.tbgc ul li a {
	padding:5px 15px;
	color:#fff !important;	
}

.tbgc ul li a:hover{
	background-color:#ff4f2c !important;
	color:#000 !important;	
}

.tbgc ul li a {
	color:#fff !important;
}

.tbgc ul li ul {
	background-color: #ff4f2c;
}

.tbgc ul li ul li{
	background-color:#18d0e6 !important;
}

.tbgc ul li ul li a  {	
	color:#ffffff !important;
}

.tbgc ul li ul li a:hover  {	
	color:#ffffff !important;
}

.navlink a {
	color:#fff !important;
	font-size:16px;
	padding:14px 15px !important;
}

.navlink ul li {
	border-bottom: 1px dotted; #000;
}

.navlink a:hover {
	color:#fff !important;
	background-color:#f4570b !important;
}

.active {
	background-color:#f4570b !important;
}

.well {
	background-color:#D3F06E;
	min-height:320px;
}

.linkset {
	margin-bottom: 10px;
	text-align: center;
}	

.linkset a:hover {
	background-color: #e65718 !important;
}

.btn-default {
	font-family: 'Amaranth', sans-serif;
	margin-bottom:10px;
}
.topbtn-one {
	background-color: #434333;
	margin-top:10px;
	margin-bottom:10px;
	color:#fff !important;
}

.topbtn-one a{
	color: #fff;

}

.topbtn-one a:hover {
	background-color: #434333;
	margin-top:10px;
	margin-bottom:10px;
	color:#fff !important;
}

.topbtn-two {
	background-color: #16469e;
	margin-top:10px;
	margin-bottom:10px;
	color:#fff !important;
}

.topbtn-three {
	background-color: #8f4f06;
	margin-top:10px;
	margin-bottom:10px;
	color:#fff !important;
}

.topbtn-four {
	background-color: #095809;
	margin-top:10px;
	margin-bottom:10px;
	color:#fff !important;
}

.topbtn-five {
	background-color: #770d64;
	margin-top:10px;
	margin-bottom:10px;
	color:#fff !important;
}

.topbtn-six {
	background-color: #6b6c16;
	margin-top:10px;
	margin-bottom:10px;
	color:#fff !important;
}

.myButton {
	background-color: #FF0000;
	border-radius:10px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	padding:9px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
	margin-bottom: 8px;
}
.myButton:hover {
	background-color:#5cbf2a;
	text-decoration: none;
}
.myButton:active {
	position:relative;
	top:1px;
}


.myButton2 {
	background-color:#4da7c7;
	border-radius:10px;
	border:1px solid #29668f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:7px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
	margin-bottom: 8px;
}
.myButton2:hover {
	background-color:#408c99;
}
.myButton2:active {
	position:relative;
	top:1px;
}


.myButton3 {
	background-color: #0000FF;
	border-radius:10px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color: #ffffff;
	font-family:Arial;
	font-size:16px;
	padding:9px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
	margin-bottom: 8px;
}
.myButton3:hover {
	background-color:#f24437;
}
.myButton3:active {
	position:relative;
	top:1px;
}




.myButton4 {
	background-color:#ff5bb0;
	border-radius:10px;
	border:1px solid #ee1eb5;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:7px 9px;
	text-decoration:none;
	text-shadow:0px 1px 0px #c70067;
	margin-bottom: 8px;
}
.myButton4:hover {
	background-color:#ef027d;
}
.myButton4:active {
	position:relative;
	top:1px;
}



.myButton5 {
	background-color:#c123de;
	border-radius:10px;
	border:1px solid #a511c0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:9px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9b14b3;
	margin-bottom: 8px;
}
.myButton5:hover {
	background-color:#a20dbd;
}
.myButton5:active {
	position:relative;
	top:1px;
}



.myButton6 {
	background-color: #FF9933;
	border-radius:10px;
	border:1px solid #eeb44f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:7px 9px;
	text-decoration:none;
	text-shadow:0px 1px 0px #cc9f52;
	margin-bottom: 8px;
}
.myButton6:hover {
	background-color:#fb9e25;
}
.myButton6:active {
	position:relative;
	top:1px;
}


.myButton7 {
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
	background-color:#fe1a00;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	font-weight:bold;
	padding:7px 60px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35;
}
.myButton7:hover {
	background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
	background-color:#ce0100;
}
.myButton7:active {
	position:relative;
	top:1px;
}
.myButton3:hover {
	background-color:#f24437;
}
.myButton3:active {
	position:relative;
	top:1px;
}

.innerbg {
	width:100%;
	height: auto;
	margin-top:-20px;
	margin-bottom: 15px;
}

.innerlink {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}


.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}






h4 {	
	border-bottom:4px solid #f4570b;
	color:#000;
	font-family: 'Josefin Sans', sans-serif;	
	padding: 10px 10px;
	margin-top: 0;
	border-radius: 15px;
}

h5 {
	color:#fff;
	font-family: 'Josefin Sans', sans-serif;	
	margin-top: 0;
	border-radius: 5px;
	font-size: 16px;
}

.loweraddress {
	line-height: 30px;
	padding: 10px 10px;
}



.well p {
	text-align:left;
	font-family: 'Josefin Sans', sans-serif;
}

.midpannel p{
	text-align:justify;
	font-size:16px;
	font-family: "Times New Roman", Times, serif 'PT Sans Narrow', sans-serif;
}



.footerheader {
	color: #fff !important;
	font-family: 'Josefin Sans', sans-serif;
	
}

.quicklinks ul {
	list-style-position: inside;
	list-style-type: none;
	margin:0;
	padding:0;
}

.quicklinks li {	
		
	text-align:left;
	padding: 4px;
	border-bottom: 1px dotted #2161aa;
	
}

.quicklinks li a {
	color:#999;
	font-family: 'Josefin Sans', sans-serif;
	font-size:13px !important;
	border: none;
}

.quicklinks a:hover {
	color:#fff;
	text-decoration: none;
}

.glyphicon {
	color:#990000;
}

.implinks ul {	
	margin:0;
	padding:0;
	list-style-type: none;

}

.implinks li {
	padding: 8px;
	border-bottom: 1px dotted #2161aa;
	text-align:left;			
}

.implinks li a {
	color:#999;
	font-family: 'Alata', sans-serif;
	font-size: 13px !important;
	border-right: none;
}

.implinks a:hover {
	color:#fff;
	text-decoration: none;
}

.noticebox {
	display:block;
	height:310px;
	border:2px solid #c46e0b;	
	text-align:center;
	padding:15px;		
}	

.marquee-text {	
	font-size:15px;	
	padding:10px 10px;
	text-align:justify;
	height: 240px;
	font-family: 'Alata', sans-serif;
	
	
}

.marquee-text h2 {
	font-size:16px;
	text-align:center;
	background-color:#F46D0A;
	padding:7px 0;
	border-radius:12px;
	color:#fff;
	box-shadow: 0 4px #666666;
}

.lowerbox {
	margin-top:20px;	
	background-color:#0d246e;	  
	padding:35px 0;
	margin-bottom:10px;
	text-align:center;
	font-family: 'Alata', sans-serif;
	color:#fff;	
	box-shadow: 5px 5px 8px #777777;
	font-size:16px;
	border-radius:8px;
	transition: height 2s;
}

.lowerbox:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.lowerbox img {
	width:70px;
	height:70px;
	margin-bottom:10px;	
}

.activityimg img{
	width: 100%;
	height: auto;
	padding: 10px;
	border: 1px solid #990000;

}

.col-sm-4 a:hover {
	text-decoration:none !important;	
}

/* Navigation */

nav { 
	margin:0;
	padding: 0;	
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;	
	}

/* Styling the links */
nav a {
	display:block;
	padding:14px 25px;	
	color:#FFF;
	font-size:17px;
	text-decoration:none;
}

nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 	
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ''; }
li > a:only-child:after { content: ''; 

}

.aboutus-image img {
	width: 100%;
	height: 40%;
	padding-top: 20px;
	padding:8px;
	border:1px solid #eee;
	box-shadow: 3px 2px #ccc;
}

.events-image img {
	width: 100%;
	height: 300px;
	padding:6px;
	border:1px solid #eee;
	box-shadow: 3px 2px #ccc;
}

.events-image1 img {
	width: 70%;
	height: 220px;
	padding:10px;
	border:1px solid #eee;
	box-shadow: 3px 2px #ccc;
}


#slides {
	/* variables */
	--photos:8; /* number of photos */
	--time:10s; /* time each photo is on screen */
	--total-time:calc(var(--photos) * var(--time)); /* calculation of total time for all photographs to be shown - do not alter */
	--button-color:#ff0;
	--button-color-fade:#ff00;

	position: relative;
	width: 100%; margin:5px 0;
	height: 0; padding-top:42%;
	pointer-events: none;
	display:flex; justify-content: center; align-items: center; background:#fff;	
}

#slides img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; z-index:-1;}

/* add extra rows for the number of images and increase multiply number */
#p1 {animation:slide1 var(--total-time) infinite linear 0s;}
#p2 {animation:slide1 var(--total-time) infinite linear var(--time);}
#p3 {animation:slide1 var(--total-time) infinite linear calc(var(--time) * 2);}
#p4 {animation:slide1 var(--total-time) infinite linear calc(var(--time) * 3);}
#p5 {animation:slide1 var(--total-time) infinite linear calc(var(--time) * 4);}
#p6 {animation:slide1 var(--total-time) infinite linear calc(var(--time) * 5);}
#p7 {animation:slide1 var(--total-time) infinite linear calc(var(--time) * 6);}
#p8 {animation:slide1 var(--total-time) infinite linear calc(var(--time) * 7);}


@keyframes slide1 {
	0% {z-index:10; -webkit-clip-path: inset(50% 50% 50% 50%); clip-path: inset(50% 50% 50% 50%);} /* start at 0% */
	1.25% {z-index:10; -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%);} /* 1s clip in --total-timimg. for 8 images this is (1/40) x 100% = 2.5% */
	1.35% {z-index:5;} /* add .1% to previous timing */
	13.75% {z-index:5;} /* 100%/photos + 1s slide timing 12.5 + 1.25 */
	13.85% {z-index:-1; -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%);} /* add .1% to previous timing */
	100% {z-index:-1; -webkit-clip-path: inset(50% 50% 50% 50%); clip-path: inset(50% 50% 50% 50%);} /* finish at 100% */
}

#buttons {position:absolute; width:100%; bottom:0px; left:0; z-index:100;}
#buttons p {
	text-align:center;
}

#b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8 {
	display:inline-block;
	margin:0 4px;
	width:30px; height:30px;
	box-sizing:border-box;
	border:5px solid transparent;
	border-radius:50%;
	background: conic-gradient(var(--button-color), var(--button-color)) padding-box, conic-gradient(var(--button-color-fade),var(--button-color-fade)) border-box;
	-webkit-mask:radial-gradient(circle at center, var(--button-color) 0px 8px, var(--button-color-fade) 9px 11px, var(--button-color) 12px  100%);
	mask:radial-gradient(circle at center, var(--button-color) 0px 8px, #0000 9px 11px, var(--button-color) 12px  100%);
	animation: rotation 1s infinite linear;
}

/* add extra rows for the number of buttons and increase multiply number */
#b1 {animation:rotation 1s infinite linear, slide2 var(--total-time) infinite linear 0s;}
#b2 {animation:rotation 1s infinite linear, slide2 var(--total-time) infinite linear var(--time);}
#b3 {animation:rotation 1s infinite linear, slide2 var(--total-time) infinite linear calc(var(--time) * 2);}
#b4 {animation:rotation 1s infinite linear, slide2 var(--total-time) infinite linear calc(var(--time) * 3);}
#b5 {animation:rotation 1s infinite linear, slide2 var(--total-time) infinite linear calc(var(--time) * 4);} 
#b6 {animation:rotation 1s infinite linear, slide2 var(--total-time) infinite linear calc(var(--time) * 5);} 
#b7 {animation:rotation 1s infinite linear, slide2 var(--total-time) infinite linear calc(var(--time) * 6);} 
#b8 {animation:rotation 1s infinite linear, slide2 var(--total-time) infinite linear calc(var(--time) * 7);} 

@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}

/* use the same timing as the @keyframe slide1 */
@keyframes slide2 {
	0% {background: conic-gradient(var(--button-color), var(--button-color)) padding-box, conic-gradient(var(--button-color-fade), var(--button-color-fade)) border-box;}
	1.25% {background: conic-gradient(var(--button-color), var(--button-color)) padding-box, conic-gradient(var(--button-color-fade), var(--button-color-fade)) border-box;}
	1.35% {background: conic-gradient(var(--button-color), var(--button-color)) padding-box, conic-gradient(var(--button-color-fade), var(--button-color)) border-box;}
	13.75% {background: conic-gradient(var(--button-color), var(--button-color)) padding-box, conic-gradient(var(--button-color-fade), var(--button-color)) border-box;}
	13.85% {background: conic-gradient(var(--button-color), var(--button-color)) padding-box, conic-gradient(var(--button-color-fade), var(--button-color-fade)) border-box;}
	100% {background: conic-gradient(var(--button-color), var(--button-color)) padding-box, conic-gradient(var(--button-color-fade), var(--button-color-fade)) border-box;}
}

@media (max-width: 760px) {
#slides {padding-top:0; height:400px;}
}






/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

.logo {
	text-align: center;

}
.logo img {
		width: 30%;
		padding: 0;
		margin: 0;
	}	

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #254441;
		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}
	
	.tbgc {
	background-color:#097B97;
	padding: 0 !important;
	margin:0 !important;
	}
	.tbgc ul li a {
	color:#fff !important;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	.logo {
	text-align: center;

}
.logo img {
		width: 30%;
		padding: 0;
		margin: 0;
	}


		nav ul li {
		display:block;
		width: 94%;
	}

}


/* Navigation ends */

footer {
	background-color:#0c417d !important;	
	text-align:centier;	
}

footer a {
	color:#ddd;
	font-size:16px !important;
	font-family: 'Josefin Sans', sans-serif;
	padding:6px;
	border-right:1px solid #ccc;
	margin:0;
}

.footerlastlink {
	border:none;
}

.footerlower {
	background-color: #ff4f2c !important;
	padding: 12px 0;
	height: 50px;
	color: #fff;
}
	


@media (max-width: 600px) {

	.logo {
	text-align: center;

}
.logo img {
		width: 30%;
		padding: 0;
		margin: 0;
	}

	.maincontainer {
		width:98%;
	}	
}

<!------------------------------------------------------------------- >