body{
    margin: 0%;
    background-color: cadetblue;
	font-family: 'Open Sans', sans-serif;
}
.logo
{
    width:15%;
	float:left
}
.logo img
{
  width:100%;
  height:100px;
  object-fit:contain
}
.schoolname
{
  float:left;
  width:70%;
  text-align:center
}
.headingmain{
    color: white;
    margin-top: 15px;
    font-size: 32px;
    border-bottom: dashed 1px;
    font-family: 'Lilita One', cursive;
    padding-bottom: 7px;
    color: #add5e9;
	margin-bottom:0px
}
.submainheading
{
font-family: 'Rokkitt', serif;
line-height:1px;
}


.mainnav{
    background-color: rgba(4, 4, 50, 0.864);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


/* Navbar container */
.navbar {
    overflow: visible;
    background-color: cadetblue;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 16px;
    color: white;
    padding: 14px 16px 18px 18px;
    text-decoration: none;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: visible;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
/* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

/* banner */
  @keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }
    
    body { margin: 0; } 
    div#slider { overflow: hidden; }
    div#slider figure img { width: 20%; height: 100%; float: left; object-fit:cover }
    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 10s slidy infinite; 
    }

    /* welcome */

    .welcome{
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        color: rgb(161, 15, 15);
    }

    /* welcometext */
    {
        box-sizing: border-box;
      }
      
      /* Create three equal columns that floats next to each other */
      .column {
            float: left;
    width: 32%;
    padding: 20px;
    margin-left: 10px;
    text-align: justify;
    background-color: #e9e9e9;
    border-radius: 15px;
      }
	  .column h2
	  {
	      text-align: center;
    text-transform: uppercase;
    border-bottom: dashed 1px teal;
    padding-bottom: 10px;
	  }
	  .column p
	  {
	    line-height:27px;
		color:black;
		font-size:14px;
	  }
      
      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      h2{
        color: rgb(161, 15, 15);
      }

      p{
        color: white;
      }
      /* slider  */

      html * {

        box-sizing: border-box;
    }

      button {
        border: none;
        border-radius: 5px;
        padding: .5rem 1rem;
        background-color: dodgerblue;
        color: white;
        margin: 1rem 0;
        font-size: 1rem;
    }
    
    .wrapper {
        position: relative;
        width: 500px;
        height: 300px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 1rem;
        margin-left: 30%;
    }
    
    input {
        appearance: none;
        z-index: 100;
        margin-right: 1rem;
        width: 1rem;
        height: 1rem;
        background: dodgerblue;
        border-radius: 50%;
        cursor: pointer;
    }
    
    input:last-of-type {
        margin: 0;
    }
    
    input:focus {
        outline: none;
    }
    
    input:checked {
        background: hotpink;
    }
    
    input + * {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        transform: translateX(100%);
        transition: transform ease-in-out 400ms;
        border-radius: 5px;
        overflow: hidden;
        background: #ddd;
    }
    
    input + *[aria-label]:before {
        content: attr(aria-label);
        display: block;
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        font-size: 1.5rem;
        color: white;
        z-index: 1;
        padding: .5rem;
        background-color: rgba(0,0,0,0.5);
    }
    
    section {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    input:checked + * {
        transform: translateX(0);
        z-index: 1;
    }
    
    /* 
        just to be safe we hide every element that comes after
        each slide and that's not an input of type radio
    */
    input + * + *:not(input[type=radio]) {
        display: none;
    }
    
    /* ARROWS */
    
    input:before {
        display: none !important;
        content: '';
        position: absolute;
        top: 50%;
        left: 1rem;
        width: 2rem;
        height: 2rem;
        background: orange;
        border-radius: 50%;
    }
    
    input:after {
        display: none !important;
        content: '';
        position: absolute;
        top: calc(50% + 1rem);
        left: 2rem;
        width: .5rem;
        height: .5rem;
        border-bottom: 1px solid #262626;
        border-left: 1px solid #262626;
        transform: translate(-25%, -50%) rotate(45deg);
    }
    
    input:checked:before, input:checked:after {
        display: none;
    }
    
    input:checked + * + input:before {
        left: calc(100% - 3rem);
    }
    
    input:checked + * + input:after {
        left: calc(100% - 2rem);
        transform: translate(-75%, -50%) rotate(-135deg);
    }
    
    input:checked + * + input + * ~ input:before,
    input:checked + * + input + * ~ input:after,{
        display: none;
    }
    
    input:last-of-type:before {
        background: green;
    }
	.divmain
	{
	  width:1170px;
	  margin:0 auto;
	}
	.pimage
	{
	  float:left;
	  width:25%
	}
	.ptext
	{
	  float:left;
	  width:73%;
	  padding:10px
	}
	.ptext p
	  {
	    line-height:27px;
		color:black;
		font-size:14px;
		text-align:justify;
		color:white
	  }
	  .psign
	  {
	  font-style: italic;
    font-size:18px !important;
    font-weight: bold;
    color: maroon !important;
    line-height: 30px;
	  }
	  .innerheader
	  {
	  background: #26494a;
    padding: 50px;
    color: white;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    border-bottom: solid 4px white;
	  }
	  .divmain ol,.divmain ul
	  {
	  color:white;
	  line-height:30px;
	  font-size:14px;
	  }
	  .divtext p
	  {
	    line-height:27px;
		color:black;
		font-size:14px;
		text-align:justify;
		color:white
	  }
	  .divimg,.divfitimg
	  {
	  width:23%;
	  float:left;
	  border-radius:10px;
	  border:solid 5px white;
	  margin:10px;
	  }
	  .divfitimg
	  {
	  border:solid 5px maroon !important;
	  }
	   .divimg img ,.divfitimg img
	   {
	   width:100%;
	   height:200px;
	   object-fit:cover
	   }
	  .col25
	  {
	    float:left;
		width:24%;
		padding:10px
	  }
	  .col50
	  {
	    float:left;
		width:48%;
		padding:10px
	  }
	  .col75
	  {
	    float:left;
		width:73%;
		padding:10px
	  }
	  .colclear
	  {
	    clear:both;
	  }
	  .cntpage
	  {
	    padding-top:50px
	  }
	  .cntpage h2
	  {
	    margin-top:30px
	  }
	  .cntpage hr
	  {
	    border-bottom:dashed 1px #e1e1e1;
		margin-top:30px
	  }
	  .cntpage .pstyle
	  {
	    line-height:27px;
		color:black;
		font-size:18px;
		text-align:center;
		color:white
	  }
	  marquee img
	  {
	   width:250px;
	   height:200px;
	   object-fit:cover;
	   border:solid 5px white;
	   border-radius:10px;
	   margin-right:20px
	  }
	  
	  .btnview
	  {
	  text-decoration: none;
    background: teal;
    padding: 10px 30px;
    margin: 20px auto;
    display: block;
    width: 150px;
    text-align: center;
    border-radius: 30px;
    border: solid 2px white;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
	}
	.btnview:hover
	  {
	    background-color:black
	  }
	  footer
	  {
	      clear:both;
	      background: #323131;
    color: white;
    text-align: center;
    padding: 20px;
    border-top: solid 2px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
	  }
	  
	  
	  #backtotopbutton {
  display: inline-block;
  background-color:teal;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#backtotopbutton::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#backtotopbutton:hover {
  cursor: pointer;
  background-color: #333;
}
#backtotopbutton:active {
  background-color: #555;
}
#backtotopbutton.show {
  opacity: 1;
  visibility: visible;
}
.newscroll
{
    height: 280px;
    background: white;
    border-radius: 15px;
    width: 85%;
    margin: 0 auto;
    display: block;
    padding: 10px;
    box-shadow: 2px 2px 20px #5e5e5e;
}
.newscroll p
{
    padding-bottom:5px;
    border-bottom:dashed 1px teal;
    color:black;
    font-size:13px;
}
.sirpic
{
    margin-top: 30px;
    width: 95%;
    margin-right: 10px;
    display: block;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
    height: 250px;
    box-shadow: 1px 1px 10px #6a6a6a;
    padding-top:0px;
}

@media only screen and (max-width:480px)
{
    .navbar
    {
        width:100%;
        overflow:scroll;
    }
    .headingmain 
    {
        font-size:20px;
    }
    .submainheading 
    {
      font-size:10px;    
    }
    .divmain,.col25,.col50,.col75,.pimage,.ptext
	{
	  width:100%;
	}
	.column
	{
	    width:95%;
	    margin-bottom:20px;
	}
	.sirpic
	{
	    width: 90%;
    margin: 20px auto;
	}
	.navbar a,.dropdown .dropbtn
	{
	    font-size:7px;
	    padding:10px 0px;
	}
	.divimg, .divfitimg
	{
	    width:95%
	}
	
	

}