header{
    
  background-color: white;
    z-index: 3000;
}
 .navbar-default{
    
    background: none;
      background-color: rgba(255, 255, 255, 0);
      border-color: rgba(255, 255, 255, 0);
      border-top: none;
      border-radius: 0px;
      height: auto;
            padding-top: .5em;
    margin: 0;
    position: relative;
 


  }

.brand-tagline {
    margin: 0;
    width: auto;
	float: left;
}

.nav-pills>li>a{

   color: #333;
   font-size: 1em;
    font-weight: 700;

}

.navbar-default .navbar-nav>li>a {
      color: #777;
      font-size: 1.8em;

  }

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    
    color: #333;
    background-color: #ffffcc;
    border-left: 6px solid #ffeb3b;
}

.content p {
    
    text-align: justify;
}

.products>p {
    
    padding: 2em;
   
}

.logo, .info, .input-group {
    
      z-index: 1050;
}

.form-control{width:100%}

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
    .row.content {height: auto;
 background-color: white;
        margin-bottom: 2em;
       
}
    
.tab-content {
    
    margin-top: 5em;
}

.navbar-fixed-top {
    z-index: 1060;
}

    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #f1f1f1;
      height: 100%;
            padding: 0;
    }

  /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 10px;
      }
      .row.content {height: auto;}
    }


/* Extra styles for the cancel button */

/* Center the image and position the close button */




/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {

    
    
}



* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}






img {
  margin-bottom: -4px;
}


img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}