/* Mixins */
/* Vars */

.tabs_wrapper {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  background: transparent;
}

ul.tabs {
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 10;
  margin: 25px 0 0;
  padding: 0;
  width: 23%;
  min-width: 175px;
  list-style: none;
  -ms-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
ul.tabs li {
  margin: 0;
  cursor: pointer;
  padding: 10px 15px;
  line-height: 23px;
  color: #535353;
  text-align: left;
  font-weight: bold;
  background: #f1f1f1;
 
}
ul.tabs li:hover {
  background: #f5f5f5;
  color: #020480;
}

ul.tabs li.active {
  background: #ccc;
  color: #535353;
}

.tab_container {
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 20;
  left: -2%;
  width: 70%;
  min-width: 10px;
  text-align: left;
  background: white;
  border-radius: 12px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.tab_content {
  padding: 20px;
  height: 100%;
  display: none;
}

.tab_drawer_heading {
  display: none;
}

@media screen and (max-width: 1024px) {
  ul.tabs {
    display: none;
  }

  .tab_container {
    display: block;
    margin: 0 auto;
    width: 100%;
    border-top: none;
    border-radius: 0;
    box-shadow: 0px 0px 10px black;
  }

  .tab_drawer_heading {
    background-color: #ccc;
    background: #600026;
    /* Old browsers */
    background: -moz-linear-gradient(top, #600026 0%, #c60943 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #600026), color-stop(100%, #c60943));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #600026 0%, #c60943 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #600026 0%, #c60943 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #600026 0%, #c60943 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #600026 0%, #c60943 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#600026", endColorstr="#c60943",GradientType=0 );
    /* IE6-9 */
    color: #fff;
    margin: 0;
    padding: 5px 20px;
    display: block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
  }
  .tab_drawer_heading:hover {
    background: #ccc;
    background: #ae0046;
    background: -moz-linear-gradient(top, #ae0046 0%, #fb0f56 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ae0046), color-stop(100%, #fb0f56));
    background: -webkit-linear-gradient(top, #ae0046 0%, #fb0f56 100%);
    background: -o-linear-gradient(top, #ae0046 0%, #fb0f56 100%);
    background: -ms-linear-gradient(top, #ae0046 0%, #fb0f56 100%);
    background: linear-gradient(to bottom, #ae0046 0%, #fb0f56 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ae0046", endColorstr="#fb0f56",GradientType=0 );
    color: white;
  }

  .d_active {
    background: #fff;
    background: #4c001e;
    background: -moz-linear-gradient(top, #4c001e 0%, #9f0735 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c001e), color-stop(100%, #9f0735));
    background: -webkit-linear-gradient(top, #4c001e 0%, #9f0735 100%);
    background: -o-linear-gradient(top, #4c001e 0%, #9f0735 100%);
    background: -ms-linear-gradient(top, #4c001e 0%, #9f0735 100%);
    background: linear-gradient(to bottom, #4c001e 0%, #9f0735 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4c001e", endColorstr="#9f0735",GradientType=0 );
    color: #dddddd;
  }
}