*
{
    box-sizing: border-box;
    margin: 0;
    transition: 0.3s;
    font-family: Calibri;
}

.toppanel
{
    border: 1px solid black;
    height: 30px;
    padding: 3px;
    background-color: #333322;
    text-align: right;
    color:White;
}
.header
{
    border: 1px solid black;
    display: inline-block;
    width: 100%;
    padding: 3px;
    background-image:url('images/panelbgsmall.png');
    
}
.header1
{
    width: 25%;
    border: 0px solid black;
    float: left;
}


.header2
{
    width: 55%;
    border: 0px solid red;
    float: left;
}
.header1 img
{
    width: 100%;
}
.header3 img
{
    width: 100%;
}
.header3
{
    width: 20%;
    border: 0px solid blue;
    font-size: 30px;
    text-align: right;
    float: left;
    padding: 20px;
}

 
.menubtn
{
    border: 1px solid black;
    width: 100%;
    background-color: #59593C;
}
.menu
{
    background-color: #59593C;
    background: linear-gradient(320deg,#6ea148ed 30%,#59593C 50%);
}
.menu a
{
    color: white;
    text-decoration: none;
    font-size:18px;
}
.menuitem
{
    background-color: #59593C;
}
.menuitem:hover
{
    background-color: #009933;
    color: white;
}
.slideshow 
{
  position: relative;
}
.displayimage
{
    display: none;
    display:inline-block;
    width: 100%;
    border: 1px solid gray;
    display: inline-block;
}
input[type=submit]
{
    color: Black;
    cursor: pointer;
    width: 200px;
    height: 35px;
    border: 0;
    font-weight: bold;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* Hide the images by default */

.displayimage img
{
    width: 100%;
    vertical-align: middle;
}



/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


.content
{
    width: 100%;
    display: inline-block;
}
.content1
{
    width: 100%;
    padding:10px;
    display: inline-block;
}
.container
{
    padding:0px;
    background-image:url('images/panelbg.png');
    
}
.cp
{
    padding: 10px;
    width: 25%;
    float: left;
}
.panel
{
    background-image:url('images/panelbgsmall.png');
    border: 1px solid black;
    height: 250px;
    box-shadow: 10px 10px 10px #888888;
    border-radius: 5px;
}
.panel-header
{
    width: 100%;
    padding: 5px;
}
.panel-data
{
    padding: 10px;
    font-size: 17px;
}
.panel-data a
{
   margin-bottom:50px;
}
.panel-data a:hover
{
    color:#59593C;
   font-weight:bold;
}
.content a
{
    color: Black;
    text-decoration: none;
}

.activity-panel
{
    border: 1px solid black;
    padding: 10px;
    width: 100%;
}
.programmeimagediv
        {
            float: left;
            width: 33.3%;
            padding: 20px;
        }
.programmeimagediv img
        {
            width:100%;
        }   
.footer
{
    border: 1px solid black;
    width: 100%;
    font-size:20px;
    padding:30px;
    background-color: #333322;
    color: White;
    display:inline-block;
}

.quicklink
{
   line-height:15px;
   text-align:left;

}
.footer1,.footer2,.footer3,.footer4
{
   border: 0px solid red;
   width:25%;
   float:left;
   text-align:left;
}


.footer a
{
    text-decoration:none;
    color:White;
}

.footer-item
{
    color:White;
    font-size:20px;
    width:120px;
    padding:5px;
}


.labelcss
{
    font-size: 20px;
    font-weight: bold;
}
#header-style
{
    background: linear-gradient(235deg,#59593C 30%,#6ea148ed 112%);
    color: White;
    padding: 10px;
    text-align: center;
    font-size: 21px;
    display:inline-block;
    width:100%;
}
.activity-panel
{
    padding: 10px;
    border: 0px solid black;
}
.under-activity
{
    box-shadow: 10px 10px 10px #888888;
    border-radius: 5px;
}
.activity-data
{
    padding: 10px;
    border: 1px solid black;
}
.activity-data img
{
    width:100%;
}
.para
{
    border: 0px solid black;
    width: 100%;
    text-align: justify;
    padding: 20px;
}
.under-para
{
    border: 1px solid black;
    width: 80%;
    margin: 0 auto;
}
.panel1-header
{
    width: 100%;
    background-color: #996633;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    color: White;
}
.para-data
{
    width: 100%;
    padding: 10px;
    font-size: 18px;
}
.table-div
{
    padding:20px;
   
}
.feedback-table
{
    width: 65%;
     box-shadow: 10px 10px 10px #888888;
}
.member-div
{
    border:0px solid red;
    text-align:center; 
    width:100%;
}
 .member-grid
{
    margin:0 auto;
    Width:35%;
    text-align:center;
}

 .updatepage-div
        {
            padding: 10px;
            width: 100%;
            border: 0px solid red;
        }
       .updatetable td
        {
            padding: 10px;
        }
        .update-grid
        {
            width: 50%;
            margin: 0 auto;
            border:1px solid black;
        }
        .updatetable
        {
            width: 50%;
            margin: 0 auto;
            background-color: #59593C;
            color: White;
            font-size: 20px;
            
        }
        .FileuploadCss
        {
            font-size:20px;
        }
        .Telephone-updatepage-div
        {
            padding: 10px;
            width: 100%;
            border: 0px solid red;
        }
       .Telephone-updatetable td
        {
            padding: 10px;
        }
        .Telephone-update-grid
        {
            width: 70%;
            margin: 0 auto;
            border:1px solid black;
        }
        .Telephone-updatetable
        {
            width:70%;
            margin: 0 auto;
            background-color: #59593C;
            color: White;
            font-size: 20px;
            
        }
        
@media (max-width:1500px)
{
    .cp
    {
        width:50%;
    }

    .header1
    {
        width: 30%;
    }
    .header2
    {
        width: 46%;
    }
    .header3
    {
        width: 24%;
    }
    
    .feedback-table
    {
        width: 60%;
    }
   
    .member-grid
    {
        width: 60%;
    }
   

   
}
@media (max-width:1400px)
{
     .updatetable
       {
          width:75%;
       }
       .update-grid
        {
          width: 75%;
         }
              .Telephone-updatetable
    {
         width:70%;
    }
     .Telephone-update-grid
    {
        width: 70%;
    }
 }
      
@media (max-width:1000px)
{
    .cp
    {
        width: 100%;
    }

    .header1
    {
        width: 40%;
    }
    .header2
    {
        width: 25%;
    }
    .header3
    {
        width: 35%;
    }
    #header-style
    {
        font-size: 18px;
    }
    .panel-data
    {
        font-size: 16px;
    }

    .footer
    {
        font-size: 16px;
    }
    .feedback-table
    {
        width: 100%;
    }
    .feedback-table
    {
        width: 80%;
    }
  .slideshow
    {
       display:inline-block;
       width:100%;
    }
    .member-grid
    {
        width:90%;
    }
       .Telephone-updatetable
    {
         width:100%;
    }
     .Telephone-update-grid
    {
        width: 100%;
    }
   
    
}
@media (max-width:900px)
{
    .footer1,.footer2,.footer3,.footer4,.footer4
    {
         width:50%;
         height:140px;
    }
     .updatetable
    {
         width:100%;
    }
     .update-grid
    {
        width: 100%;
    }
       .Telephone-updatetable
    {
         width:100%;
    }
     .Telephone-update-grid
    {
        width: 100%;
    }
}
@media (max-width:700px)
{
    .cp
    {
        width: 100%;
    }

    .header1
    {
        width: 55%;
    }
    .header2
    {
        width: 0%;
    }
    .header3
    {
        width: 45%;
    }
    #header-style
    {
        font-size: 17px;
    }
    .panel-data
    {
        font-size: 15px;
    }
   
   .slideshow
    {
       display:inline-block;
    }
    .feedback-table
    {
        width: 95%;
    }
   .member-grid
    {
        width:95%;
    }
  .programmeimagediv
  {
    width:100%;
  }

}