*{
			margin:0;
			padding:0;
			box-sizing:border-box;		
		}

	img {
		width:100%;
		height:100%;
	}
	#header {
		width:100%;
		height:120px;
		}
	.navbar{
		margin-top:-60px;
		background-color:none;
		
	}
	
	.dropdown:hover>.dropdown-menu { display: block;	}
	.message {
		background:maroon !important;
		color:white;
	}
	 #bottom {
            position: absolute;
            bottom:30px;
            right: 20;
		}
	
	.arta{
		background:#D1D3D4;
		padding:20px;
		gap:0;
	}
	

	.alumni {
		margin:0;
		padding:0;
		max-width:100%;
		overflow-x:hidden;
	}

	.btn2 {
		border-bottom:1px solid #1E90FF; !important;
		
	}
	.alumnilink button {
		font-size:20px;
		font-weight:bolder;
		font-family: Arial;
		
	}
	
	.btn2 button:hover {
		background:#1E90FF;
		color:white;
		
	}
	
	.navbar .nav-item a{
		color:white !important;
		font-weight:bolder;
	}		
	.navbar .nav-item .dropdown-menu a {
		color:black !important;
		font-size:12px;
	}
	
	.dropdown-menu {
		min-width: 30px !important;
	}
	
	
	.lastlink {
		margin-left:-70px;
	}
	
	
	.message {
		background:maroon !important;
		}
	.welcome p {
		line-height:120%;
		font-family:Bradley Hand ITC;
		font-size:22px;
	}
	
	.event-header {
		background-color:maroon;
	}
	
	.news {
		background-image:url('images/background news.jpg');
		background-size:cover;
		background-position:center;
		
		
	}
	
	.welcome {
		margin-bottom:10px;
	}
	
	.welcome h1{
		color:#4169E1;
	}
	.welcome p {
		line-height:150%;
		text-align:justify;
		text-indent:50px;
		font-size:21px;
	}
	
	.board1 {
			background-image:url('images/board background.jpg');
			background-repeat:no-repeat;
			background-size:100% 100%;
			color:white;
			margin:10px;
			margin-left: auto;
			margin-right: auto;
	}
	.lagnas  { color:maroon;}
	.lagnas strong { font-size:20px;color:maroon; }
	.principal {
		margin-left:20px;
	}
	.newshead {
		padding-left:130px;
		font-size:50px;
	}

	.jumbotron {
		
		margin-top:20px;
	}
	
	.card {
		max-height:400px;
	}
	
	.card-img-top {
		max-height:200px;
	}
	
	
	.read {
			margin-top:auto;
		}
	
	.card .btn {
		border-radius:0;
	}
	.card-body .card-text {
		text-align:justify;
		font-size:14px;
		padding:0;
		margin:0;
		line-height:100%;
	}
	
	.card-body a {
		text-decoration:none;
		float:right;
		font-size:13px;
		color:maroon;
	}
	.card-body a:hover {
		text-decoration:underline;
	}
	
	.calendar h4 {
		color:black;
		text-align:center;
		width:100%;
		float:left;
	}
	
	.about-ilat {
		background:#800000;
		color:#ffff;
			}
	.calendar {
		overflow-y: scroll;
		height: 300px;
		overflow-x: hidden;
		margin-top:30px;
		padding:0;
		background:white;
	}
	.videos {

		color:black;
	}
	.footer {
		background:#4169E1;
		padding:20px 100px;
		color:white;
	}	
	
	.footer p {
		font-size:14px;
	}
	.footer .inspires {
		font-style:italic;
		margin-top:10px;
	}
	.footer .inspires span {
		font-size:25px;
		color:white;
		font-family:Monotype Cursiva;
	}
	.footer a {
		color:white;
		
		margin-bottom:10px;
		font-size:14px;
	}
	.footer a:hover {
		text-decoration:underline;
	}
	
	/* Divider */	
	.divider{
			position: relative;
			margin-top: 20px;
			margin-bottom:10px;
			height: 5px;
		}
	.div-transparent:before {
		content: "";
		position: absolute;
		top: 0;
		left: 5%;
		right: 5%;
		width: 90%;
		height: 1px;
		background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
		}

	.div-arrow-down:after {
		content: "";
		position: absolute;
		z-index: 1;
		top: -7px;
		left: calc(50% - 7px);
		width: 14px;
		height: 14px;
		transform: rotate(45deg);
		background-color: white;
		border-bottom: 1px solid rgb(48,49,51);
		border-right: 1px solid rgb(48,49,51);
	}

	
	.carousel img {
		height:85vh;
		width:100%;
	}
	
	.carousel-inner .carousel-item img {
		
		margin: 0px 0 0px 0;
		border-top:2px solid white;
	}
	
	.history img {
		width:100%;
		height:100%;
	}
	
	

	
	
	.faculty .card img { height:50%; }
	
	
	.history p {
		line-height: 160%;
		text-align:justify;
		text-indent:30px;
	}
	#sidebar-nav {
		width: 160px;
	}
	
	
	.principal li  {
		margin-left:50px;
	}
	.guidance li  {
		margin-left:50px;
	}
	
	.roll {
		margin-top:130px;
	}
	.roll li {
		margin-left:30px;
		margin-bottom:10px;
		color: #A24857;
	}
	fieldset {
		border: 1px solid lightgray;
	}
	.roll a {
		text-decoration:none;
		color: #808080;
	}
	.roll a:hover {
		color: #510400 !important;
		text-decoration: underline;
	}
	
/* Media Queries */

@media only screen and (min-width:200px) and (max-width:480px) {
	
	.small img {
		height:100px;
	}
	.navbar{
		margin-top:-100px;
		}
	.navbar-nav .nav-item {
		font-size:12px;
		line-height:80%;
		border:1px dotted lightgray;
		padding-left:20px;
		
	}		
		.navbar .nav-item a{
		color:black !important;
		}
		
	.dropdown-menu {
		min-width:100% !important;
	}
	
	.box .icon { display:none;}
	.collapse {
		margin-top:20px;
	}
	
	.navbar-toggler {
			margin-top:20px;
	}
	.principals {
		width:70%;
		height:50%;
		margin-bottom:20px;
	}
	.history { padding:10px; }
	.history p{ font-size:14px;}
	.lubrino { margin-bottom:-50px;width:70%;height:50%;}
	.faculty .card img {width:60%;}
	.lastlink {
		margin-left:0px;
	}
	
	.jumbotron {
		margin-top:0;
	}
	
	.welcome h2 {
		margin-top:-60px;
	}
	.welcome p {
		font-size:16px;
	}
	.charter {
		margin-bottom:20px;
	}
	
	.board h3 , .policy h3 {
		font-size:20px;
	}
	
	#myBtn {
		font-size: 10px;
		padding: 10px;
	}
	
	.jumbotron h3 {
		font-size:18px;
	}
	#main p {
		font-size:14px;
	}
	.openbtn {
		margin-top:50px;
	}
	.facilities h4  {
		font-size:14px;
	}
	
	.facilities li{
		font-size:13px;
		margin-left:25px;
		text-align:justify;
	}
	.principal {
		margin-left:0px;
	}
	.footer {
		
		padding:20px 20px;
	}	
	.sidebar {
		font-size:12px;
	}
	.faculty-header h3 {
		margin-top:50px;
	}
	.leaves, .wellress, .embrace, .innovate, .roll{
		margin-top:30px;
	}
	.leaves fieldset, .wellress fieldset, .embrace fieldset, .innovate fieldset, .roll fieldset{
		margin-top:-40px;
		margin-bottom:20px;
	}
	
	.footer img {
		display:none !important;
	}
	
	.carousel img {
		height:40vh;
		width:100%;
	}
	
	.welcome h1 {
		font-size:20px;
	}
	.calendar { width:100% !important;margin:10px 0px;overflow-x:hidden;}
	.calendar .table { width:100%; }
	.calendar h2 {font-size:14px; }
	.calendar th, .calendar td {font-size:12px;}
}

@media only screen and (min-width:768px) and (max-width:1024px) {
	
.navbar .nav-item a{
		color:black !important;
	}	
	.navbar-toggler.navbar-toggler-icon {
		margin-left:-150px;
		color:white !important;
	}	
}

/* Cards */
	.heading{
    font-size:40px;
    font-weight:600;
	width:100%;

}

  .line1{
    color:#000;
    font-size:12px;

  }
   .line2{
    color:#000;
    font-size:12px;
    
  }
   .line3{
    color:#000;
    font-size:12px;
    
  }

  .cards{

    transition: all 0.2s ease;
    cursor: pointer;
     }
    


.cards:hover{

    box-shadow: 5px 6px 6px 2px #e9ecef;
    transform: scale(1.1);
}
/* End of Cards */


.announcement {
	background:#4169E1;
	color:white;
}

/* card animation */




.card {
  margin: 20px 0;
 min-height:200px;
 margin-bottom:-10px !important;
 text-align:justify;
}
.card-container {
	margin-bottom:10px;
}

.card-text {
	margin:0px 5px;
	text-indent:20px;
}



/* Floating Icons */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');



.box{
    display: grid;
  
    width: 100%;
    align-items: center;
    background: linear-gradient(315deg, #ffffff 0%, #d7e1ed 74%);
}

.box .container{
    position: fixed;
    top: 50vh;
}

.box .container .icon{
    margin:0 5px;
    text-align: center;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: 0.4s cubic-bezier(0.52, -0.50, 0.212, 1.45);
}

.box .container .icon span{ 
    position: relative;
    display: block;
    height: 60px;
    width: 60px;
    background: #fff;
    border-radius: 0%;
    z-index: 2;
    transition: 0.4s cubic-bezier(0.52, -0.50, 0.212, 1.45);
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
}

.box .container .icon span i{
    line-height: 60px;
    font-size: 25px;
    color: #fff;
}

.box .container .icon .tooltip{
    position: absolute;
    background: #fff;
    color: #fff;
    padding: 10px 18px;
    font-size: 20px;
    font-weight: 800;
    border-radius: 0px;
    top:20px;
    left: 80px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
    transition: 0.4s cubic-bezier(0.52, -0.50, 0.212, 1.45);
}

.box .container .icon:hover .tooltip{
    top: -0px;
    opacity: 1;
    margin-top: 10px;
    pointer-events: auto;
}

.icon .tooltip:before{
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    background: #fff;
    left: 3px;
    bottom: 15px;
    transform: translate(-50%) rotate(45deg);
    transition: 0.4s cubic-bezier(0.52, -0.50, 0.212, 1.45);
}

.box .container .facebook span,
.box .container .facebook .tooltip,
.box .container .facebook .tooltip:before{
    background: #3b5999;
    color: #fff;
}

.box .container .youtube span,
.box .container .youtube .tooltip,
.box .container .youtube .tooltip:before{
    background: #de463b;
    color: #fff;
}

.box .container .ilat span,
.box .container .ilat .tooltip,
.box .container .ilat .tooltip:before{
    background: white;
    color: maroon;
}

.box .container .instagram span,
.box .container .instagram .tooltip,
.box .container .instagram .tooltip:before{
    background: #e1306c;
    color: #fff;
}

/* Scroll Button */

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}


/* Hamburger Menu */

.completion h1 {
		font-size:20px;
}

/* Side Bar */

/* Small Carousel */

	.arta img{
		height:100%;
	}
	.arta img:hover {
		
		transform: scale(1.1);
		transition: transform .5s; /* Animation */
 
	}	


.calendar {
	width:60%;
	overflow-y:hidden;
	height:100%;
	margin-bottom:10px;
}