.indexheader, .allheader{  background-color: #33405C; 
	background-image: linear-gradient(45deg, #657EE0, #33405C ); }

.header {display:block;}


.indexheader { width:100%; 
	height:400px; 
	background:url("../layout/header.png"); 
	background-size:100% 400px; 
	transition:1s;}

.allheader{ height:150px; 
	color: white; display:flex; flex-direction:column;
	justify-content:center;align-items:center;text-align:center; 
	width:100%; overflow:hidden; }




@media screen and (max-width:900px){  
 	.indexheader {  height: 250px; background-size:100% 250px;   }
 }



@media screen and (max-width:600px){  
	.topheader { padding: 0px 0px; align: center;}
	.indexheader {  height: 150px; background-size:100% 150px;   }

}





    /* Formatting search box */
  


    /* Formatting search box */


.search {
    display: inline-block; 
    position: relative; top:0; left:0;
    margin: 20px 20px 0 0 ; margin-left: 0;
    height: 40px;
    box-sizing: border-box;
    width: 100%!important;
    padding: 0px;


}
  

  div.search input[type=text]{
  height: 40px;
  padding: 10px 20px;
  border: 1px solid grey;
  width: calc(100% - 50px )!important; 
  min-width: 50px!important; 
  max-width: 2000px!important; 
  border-radius:  5px ;
  margin:0;margin-left: 0!important;
}

div.search form {    background:white; }

div.search i {
  display: inline-block;
  height:40 px;
  width:40px; 
  padding:8px ;
  margin:0 ;margin-top:-5px;
  background:brown;
  color: white;
  cursor: pointer;
  border-radius: 10px ;
}

div.search i:hover {
  background: red;
}







a.notification span {
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 0 10px;
  margin-left: 10px;
  
  font: normal bold 12px/18px Arial, sans-serif;
  background: #ccc;
  
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}