.middle-content button,
.middle-content .button {
  position: relative;
  display: inline-block;
  color: #333;
  padding: 0.75rem 2rem;
  margin: 0 auto;
  background-color: #ccc;
  /*border-bottom: 2px solid #696969;*/
  
  width: 100%;
  font-weight: normal;
  font-size:15px;
  text-align: center;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.middle-content button:hover,
.middle-content .button:hover {
  background-color:#003399;
  color: #FFF;
  /* border-bottom: 2px solid #003399;*/
}
.middle-content button:hover:before, .middle-content button:hover:after,
.middle-content .button:hover:before,
.middle-content .button:hover:after {
  color: #003399;
}
.middle-content button:after, .middle-content button:before,
.middle-content .button:after,
.middle-content .button:before {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* ---------------------- Vertical Tabs */
.tabs {

 
    max-height: 600px;
    overflow-x: hidden; 
    overflow-y: scroll;    
    
  position: relative;
  min-height: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  width:100%;
  float:left;
  margin:15px 0px;
  /* ---------------------- Tab */
  /* ---------------------- Content */
}


.tabs::-webkit-scrollbar {
    width: 5px;
}

.tabs::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.8);
    border-radius: 2px;
}

.tabs::-webkit-scrollbar-thumb {
    background-color: #003399;
    outline: 1px solid slategrey;
    border-radius: 2px;
}

.tabs .tab {
  margin-bottom: 1px;
  float:left;
  position:relative;
  display:block;
  margin-right:20px;
  width:50px !important;
  /* ---------------------- Tab Toggle */
}
/*@media screen and (min-width: 55rem) {*/
  .tabs .tab {
    float: left;
    margin-right:20px;
 	 position:relative;
  	display:block;
  	width:50px;
	
  }
/*}*/
.tabs .tab .tab-toggle {
  padding: 1rem 4rem 1rem 2rem;
  position: relative;
  outline: none;
  width: 50px;
  font-size:25px;
  font-weight:600;
   right:0rem;
}
@media screen and (min-width: 55rem) {
  .tabs .tab .tab-toggle {
    text-align: center;
  }
}
.tabs .tab .tab-toggle:after {
  content: "\25C0";
  position: absolute;
  display: block;
  right: 1rem;
  top: 50%;
  padding:30px 0px 0px 20px;
  -webkit-transform: rotate(-90deg) translateX(50%) translateY(0);
  -moz-transform: rotate(-90deg) translateX(50%) translateY(0);
  -ms-transform: rotate(-90deg) translateX(50%) translateY(0);
  -o-transform: rotate(-90deg) translateX(50%) translateY(0);
  transform: rotate(-90deg) translateX(50%) translateY(0);
  
}
@media screen and (min-width: 55rem) {
  .tabs .tab .tab-toggle:after {
    -webkit-transform: rotate(-90deg) translateX(50%);
    -moz-transform: rotate(-90deg) translateX(50%);
    -ms-transform: rotate(-90deg) translateX(50%);
    -o-transform: rotate(-90deg) translateX(50%);
    transform: rotate(-90deg) translateX(50%);
  }
}
.tabs .tab .tab-toggle.active {
  color: #FFF;
  background-color: #003399;
  cursor: default;
   float:left;
 	 position:relative;
  	display:block;
  	width:25px;
	font-size:25px;
}
.tabs .tab .tab-toggle.active:after {
  color: #FFF;
  -webkit-transform:  rotate(-90deg) translateX(50%) translateY(0);
  -moz-transform:  rotate(-90deg) translateX(50%) translateY(0);
  -ms-transform:  rotate(-90deg) translateX(50%) translateY(0);
  -o-transform:  rotate(-90deg) translateX(50%) translateY(0);
  transform: rotate(-90deg) translateX(50%) translateY(0);
    right: 1rem;
}
@media screen and (min-width: 55rem) {
  .tabs .tab .tab-toggle.active:after {
    -webkit-transform: rotate(-90deg) translateX(50%) translateY(0);
    -moz-transform: rotate(-90deg) translateX(50%) translateY(0);
    -ms-transform: rotate(-90deg) translateX(50%) translateY(0);
    -o-transform: rotate(-90deg) translateX(50%) translateY(0);
    transform: rotate(-90deg) translateX(50%) translateY(0);
    right: 1rem;
  }
}
.tabs .content {
  max-height: 0;
  overflow: hidden;
  padding: 0 2rem;
  /*background-color: #efefef;*/
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}
.tabs .content .description{ padding: 0 15px; }

/*@media screen and (min-width: 55rem) {*/
  .tabs .content {
    max-height: none;
    position: absolute;
    left:0;
	margin-top:70px;
    top: 0;
    width: 100%;
    opacity: 0;
    padding:0px;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
 /* }*/
}
.tabs .content.active {
  max-height: 1000px;
}
/*@media screen and (min-width: 55rem) {*/
  .tabs .content.active {
    max-height: none;
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
	 left:0;
	margin-top:70px;
    top: 0;
    width: 100%;
	 position: absolute;
  }
  
  .contacts-inner-detail .tabs .content.active {margin-top:100px;}
/*}*/




.tabs .content > .heading {
  font-size:20px;
  margin-bottom:20px;
}

.content-border-bottom{border-bottom:1px solid #ccc; background-color:#f1f1f1; padding:5px;margin: 20px 0px 5px;}





.contacts-inner-detail .tabs .tab {
  margin-bottom: 1px;
  float:left;
  position:relative;
  display:block;
  margin-right:20px;
  
 margin-bottom:20px;
  width:250px !important;
  /* ---------------------- Tab Toggle */
}

.contacts-inner-detail .tabs .tab .tab-toggle {
  padding: 1rem 4rem 1rem 2rem;
  position: relative;
  outline: none;
  width: 250px;
  font-size:15px;
  font-weight:600;
   right:0rem;
}


@media screen and (max-width: 991px) {
	.tabs{margin:0;}
    
    
    }

@media screen and (max-width: 767px){
    
    .content-border-bottom{padding: 5px 10px;}
}
 

@media screen and (max-width: 400px) {

.tabs .tab{margin-right: 5px;}
    
.tabs .tab .tab-toggle {
    padding: 0rem 4rem 1rem 1rem;
    }
    
}