@charset "utf-8";
/* CSS Document */
body {
	background-image:url(images/bg.png);
	background-size:100%;
	background-color:#01122c;
	margin-top:0px;
	font-family:Arial, Helvetica, sans-serif;
}

#main{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
#logo{
	width:10%;
	float:left;
}
#title{
	width:100%;
	float:left;
	color:#FFF;
}
#title h1{
	font-size:24px;
}
#title h2{
	font-size:18px;
}
#call{
	text-align:center;
	padding:10px;
	color:#FFF;
	border-bottom:2px solid #FFF;
}
#call a{
	text-decoration:none;
	color:#FFF;
}
#navbar{
	width:100%;
	border-bottom:2px solid #FFF;
	text-align:center;
}
#navbar a{
	color:#FFF;
	text-decoration:none;
	display:inline-block;
	padding:5px;
	margin:5px;
	text-align:center;
}

/* Image Banner Slider */
.image-slider {
	margin-top:5px;
	margin-bottom:5px;
    position: relative;
    overflow: hidden;
    width: 100%;
	height:auto;
    /*max-height: 400px;  Adjust the height as needed */
}

.slider {
	width:500%;
    /*display: inline-flex;*/
    animation: slide 60s infinite;
	-webkit-animation:slide 60s infinite;
	animation-timing-function:linear;
	-webkit-animation-timing-function:linear;
}

.slider img {
    width: 20%;
	float:left;
}

@keyframes slide {
    0%{
        transform: translateX(0);
		-webkit-transform: translateX(0);
    }
	18%{
		transform: translateX(0);
		-webkit-transform: translateX(0);
	}
    20% {
        transform: translateX(-20%);
		-webkit-transform: translateX(-20%);
    }
	38% {
        transform: translateX(-20%);
		-webkit-transform: translateX(-20%);
    }
    40% {
        transform: translateX(-40%);
		-webkit-transform: translateX(-40%);
    }
	58% {
        transform: translateX(-40%);
		-webkit-transform: translateX(-40%);
    }
    60% {
        transform: translateX(-60%);
		-webkit-transform: translateX(-60%);
    }
	78% {
        transform: translateX(-60%);
		-webkit-transform: translateX(-60%);
    }
    80% {
        transform: translateX(-80%);
		-webkit-transform: translateX(-60%);
    }
	98% {
        transform: translateX(-80%);
		-webkit-transform: translateX(-80%);
    }
}

#matter{
	width:70%;
	float:left;
	text-align:justify;
	color:#FFF;
	font-size:16px;
}
#matter p {
	overflow:auto;
}
#matter p img{
	height:150px;
	margin:10px;
}
#matter td{
	color:#FFF;
	border: 1px #FFFFFF solid;
}
#matter table{
	margin:10px;
}
#gallery{
	width:100%;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
	color:#FFF;
}
.gallery-item {
	width:350px;
	height:250px;
    margin: 10px;
    overflow: hidden;
    border: 1px solid #FFF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.gallery-item img {
    width: 100%;
    height: auto;
}
#piccanvas{
	position:fixed;
	display:none;
	width:90%;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	border:2px #FFFFFF solid;
}
#piccanvas img{
	width:100%;
}
#joinfrm{
	width:25%;
	float:right;
	color:#FFF;
}
.imp{
	width:100%;
}
#topstudent{
	clear:both;
	width:100%;
	color:#FFF;
}
#footer{
	clear:both;
	width:100%;
	text-align:center;
	color:#FFF;
	font-size:24px;
}
@media only screen and (max-width: 600px) {
  	#main{
		width:95%;
  	}
  	#title h1{
		font-size:20px;
	}
	#title h2{
		font-size:14px;
	}
	#matter{
		width:100%;
		float:none;
	}
	#joinfrm{
		clear:both;
		width:100%;
		float:none;
	}
	
}