// set background color of website to whitesmoke background

html {
  background: lightgrey;

}
body {

  background: whitesmoke;
 
}





/* -------------  CSS Loader  ----------- */\

* {
  box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.column {
  float: left;
  padding: 5px;
   padding-right: 25px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left {
  width: 40%;
}

.right {
  width: 60%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

div.parent{ 
    border:solid black 1px;
    display:table;
    padding:5px; 
    width:100%;
    margin:5px 0; /* you can change/remove margin */
	
}

div.parent .img{
    vertical-align:middle;
    display:table-cell;
    padding-right:0px;
    width:auto; /* you can change width */
}
div.img img{ 
padding-left: 15px; 
    width:auto;
    height:auto; /* you can change height */
    vertical-align:middle;
}



// for sliding menu of the main webpage

body {
  font-family: "Lato", sans-serif;


  
}

.sidenav {
  display: none;
  height: 90%;
  width: 130px;
 position: fixed;
  z-index: 100;
  top:10px;
  left:0;
   background: #DCDCDC;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 30px;
 
}

.sidenav a {
  padding: 4px 0px 5px 0px;
  text-decoration: none;
  font-size: 14px;
   transition: 0.3s;
  color: black;
  display: block;
}

.sidenav a:hover {
 background-color: #DC143C;
  color: black;
 
}

.sidenav .closebtn {
	
  position: absolute;
  top: 0;
  outline: 0;
   padding:0px 2px 0px 2px;
  right: 1px;
  font-size: 30px;
  margin-top:15px;
  margin-left: 70px;
  
}

/* Hide scrollbar for Chrome, Safari and Opera */
.sidenav::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.sidenav {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: thin;  /* Firefox */
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}





//for image styling in index php


#fitimage {
  float: none;
  width: 50%;
  max-height: auto;
  max-width : auto;
  border: 0px;
  display:table-cell;
  horizontal-align:middle; 
  vertical-align:middle; 
  
}

#fitimage img {
	
height: 100%;
max-width: 100%;

  margin-right: auto;
  margin-left: auto;
  
  

}

@media only screen and (min-width: 600px) {
    /* styles for MacBook Pro-sized screens and larger */
	
}

.center {
  text-align: center;
}


/*only for menu buton side navigation */


#mySidenav1 a {
  position: fixed;
  left: 0px;
  transition: 0.5s;
  padding: 0px;
  width: 28px;
  text-decoration: none;
  font-size: 15px;
  font-weight: bolder;
  color: black;
  border-radius: 0 5px 5px 0;
   z-index: 100;
 
  
  
}

#mySidenav1 a:hover {
  left: 0;
}

#about {
  background-color: #f16; /* black */
 
}