body, button, input {
   font-family: 'Lato', sans-serif;
}

/*Hide navbar items and make brand clickable*/
/*#mainNav ul.nav, .navbar .btn-navbar {
   display:none;
}*/

.navbar .nav li:not(#contact) {
   display:none;
}

.brand {
   cursor:pointer;
}

/*Make searchbar larger & restyle*/
#docsSearch:before{
   content: "Gather Support";
   display: block;
   margin: 24px auto 8px;
   max-width: 1080px;
   font-size: 32px;
   font-weight: 700;
   width: 80%;
}

#searchBar {
   width: 80%;
   max-width: 1080px;
}

#searchBar .search-query {
   border: 2px solid #ccc;
   border-radius: 2px;
}

#searchBar button{
   background: #3ac0f0;
   border: #3ac0f0;
   letter-spacing: .8px;
   text-shadow: none;
}

#searchBar button:hover{
   background: #0e88b4;
   border: #0e88b4;
}

#searchBar button .icon-search{
   color: #fff;
}

@media (min-width: 768px) {
   #searchBar button .icon-search{
      display: inline;
      margin-right: 8px;
   }
}

/*Hide homepage tiles and restyle headers as tiles*/
.category-list {
   display: none;
}

.collection-category {
   box-sizing: border-box;
   display: block;
   float: left;
   padding: 8px;
   position: relative;
   width: 100%;
}

.collection-category h2 {
   background: #f5f5f5;
   border: 1px solid #ccc;
   border-radius: 2px;
   font-size: 25px;
   line-height: 1;
   margin: 0;
   padding:0;
   text-align: center;
}

.collection-category h2:hover{
   border: 1px solid #3ac0f0;
   background: #3ac0f0;
   box-sizing: border-box;
   color: #fff;
}

.collection-category h2 a{
   box-sizing: border-box;
   display: block;
   padding: 24px;
}

.collection-category h2 a:hover{
   border:0;
   color: #fff;
   cursor:pointer;
}

/*New tile media queries*/
@media (min-width: 768px) {
   .collection-category {
      width: 50%;
   }
}

@media (min-width: 992px) {
   .collection-category {
      width: 33.333333%;
   }
}

/* separate out footer */
footer{
   clear:both;
}

/*call out "What's New?" category*/
#collection-category-294 h2{
   background: #fff;
}

#collection-category-294 h2:hover{
   background: #3ac0f0;
}

@media (min-width: 768px){
   #collection-category-294{
      display: block;
      padding: 32px 8px;
      width: 100%;
   }
   #collection-category-294 h2{
      margin: 0 auto;
      width: 66%;
   }
}