.tab-content{
  border-top: 1px solid #ff3030e3;
}
.tile
{
  width:100%;
  margin:60px auto;
}
#tile-1 .tab-pane
{
  padding:15px;
}
#tile-1 .nav-tabs {
  width: 80%;
  margin: 0 auto;
  position:relative;
  border:none!important;
  background-color:#fff;
/*   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); */
  border-radius:6px;
}
#tile-1 .nav-tabs li {
  margin:0px!important;
}
#tile-1 .nav-tabs li a {
  position:relative;
  margin-right:0px!important;
  padding: 10px 5px !important;
  font-size:16px;
  border:none!important;
  color:#333;
  text-transform: uppercase;
}


#tile-1 .nav-tabs a:hover {
  background-color:#fff!important;
  border:none;
}
#tile-1 .slidertabs {
  display:inline-block;
  width:25px;
  height:4px;
  transition: background-color 0.3s ease;
  position:absolute;
  z-index:1;
  bottom:0;
  transition:all .4s linear;
  
}



#tile-1 .nav-tabs .active {
  background-color:transparent!important;
  border:none!important;
}

.red .nav-link:hover,
.red .nav-link.active {
  color: #e4416d!important; 
 
}
.green .nav-link:hover,
.green .nav-link.active {
  color: #009d8f!important;
 
}

.purple .nav-link:hover,
.purple .nav-link.active  {
  color: #8e29b5!important; 
  
}
.yellow .nav-link:hover,
.yellow .nav-link.active {
  color: #f9bb28!important;
  
}
.slidertabs {
  position: absolute;
  bottom: 0;
  height: 4px;
  transition: all 0.3s ease;
  background-color: transparent;
}
.nav-tabs {
  position: relative;
}

@media screen and (min-width: 1261px) and (max-width: 1560px) {
   
  .tile {
    width:85%;
  }

}

@media screen and (min-width: 961px) and (max-width: 1260px) {
   
  #tile-1 .nav-tabs {
    width: 100%;
  }
  #tile-1 .nav-tabs li a {
    font-size: 15px;
  }
  .tile {
    width:100%;
  }

}
@media screen and (min-width: 641px) and (max-width: 960px) {
   
  #tile-1 .nav-tabs {
    width: 100%;
  }
  #tile-1 .nav-tabs li a {
    font-size: 15px;
  }
  .tile {
    width:85%;
  }

}
@media screen and (min-width: 321px) and (max-width: 640px) {
   
  #tile-1 .nav-tabs {
    width: 100%;
    display: block !important;
  }
  #tile-1 .slidertabs{
    display: none !important;
  }
  #tile-1 .nav-tabs li a {
    padding: 5px 5px !important;
  }
  #tile-1 .nav-tabs li a {
    font-size: 15px;
  }
  .tile {
    width:80%;
  }

}
@media screen and (max-width: 320px) {
    
  #tile-1 .nav-tabs {
    width: 100%;
    display: block !important;
  }
  #tile-1 .slidertabs{
    display: none !important;
  }
  #tile-1 .nav-tabs li a {
    padding: 5px 5px !important;
  }
  #tile-1 .nav-tabs li a {
    font-size: 14px;
  }
}



.nav-tabs .nav-item {
  margin-bottom: -1px;
  align-self: center!important;
}