/* ------------------------------------------------
   The Whisky Exchange
   Designed and Built by The Whisky Exchange
   All Rights Reserved

   Sort CSS file 

   Content:
   Layout
   Type
   View
   Order
   ------------------------------------------------ */

/* ------------------------------------------------
   Layout
   ------------------------------------------------ */
.sort-type {
   width: 100%;
   float: left;
}
.sort-view {
   width: 40%;
   float: left;
}
.sort-order {
   width: 60%;
   float: left;
}
@media (min-width: 680px) {
   .sort-container {
      padding: 0 10px;
   }
   .sort-type {
      width: 50%;
      float: left;
   }
   .sort-view {
      width: 20%;
      float: left;
   }
   .sort-order {
      width: 30%;
      float: left;
   }
}
@media (min-width: 980px) {
   .sort-wrapper {
      padding-top: 30px;
/*      background: url(../images/sort/gradient.png) center bottom no-repeat;   */
   }
   .sort-view {
      width: 15%;
      margin-left: 15%;
      float: left;
   }
   .sort-order {
      width: 20%;
      float: left;
   }
}
/* ------------------------------------------------
   Type
   ------------------------------------------------ */
.sort-type li {
   display: block;
   float: left;
   width: 33.3333%;
   border-right: 1px solid #fff;
}
.sort-type li:last-of-type {
   border-right: none;
}
.sort-type a,
.sort-type .disabled {
   display: block;
   position: relative;
   padding: 10px 0;
   font-family: 'Fjalla One', 'Lato', arial, sans-serif;
   text-transform: uppercase; 
   color: #fff;
   background: #999999;
   text-align: center;
}
.sort-type a:hover,
.sort-type a.active {
   background: #ff7010;
}
.sort-type span {
   display: block;
}
@media (min-width: 680px) {
   .sort-type a,
   .sort-type .disabled {
      padding: 15px 0;
   }
   .sort-type a.active:after,
   .sort-type a:hover:after {
      z-index: 3;
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -15px;
      content:'';
      width: 0;
      height: 0;
      border-top: solid 15px #ff7010;
      border-left: solid 15px transparent;
      border-right: solid 15px transparent;
   }
}
@media (min-width: 980px) {
   .sort-type span {
      display: inline;
   }
}
/* ------------------------------------------------
   View
   ------------------------------------------------ */
.sort-view {
   border-right: 1px dotted #999;
}
.sort-view a {
   display: block;
   float: left;
   width: 50%;
   padding: 15px 0;
   font-family: 'Fjalla One', 'Lato', arial, sans-serif;
   text-transform: uppercase;
   color: #8b8b8b;
   text-align: center;
}
.sort-view a:hover,
.sort-view a.active {
   color: #ff7010;
}
@media (min-width: 680px) {
   .sort-view a {
      padding: 24px 0;
   }
}
@media (min-width: 980px) {
   .sort-view a {
      padding: 15px 0;
   }
}
/* ------------------------------------------------
   Order
   ------------------------------------------------ */   
.sort-order {
   padding: 10px 0;
}
.sort-order a {
   display: block;
   float: left;
   width: 33.3333%;
   padding: 5px 0;
   font-family: 'Fjalla One', 'Lato', arial, sans-serif;
   text-transform: uppercase;
   color: #8b8b8b;
   text-align: center;
   border-right: 1px dotted #999;
}
.sort-order a:hover,
.sort-order a.active {
   color: #ff7010;
}
.sort-order a:last-of-type {
   border-right: none;
}
@media (min-width: 680px) {
   .sort-order a {
      padding: 14px 0;
   }
}
@media (min-width: 980px) {
   .sort-order a {
      padding: 5px 0;
   }
}