.tabs {
    position: absolute;
    top: -1px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 11111111;
}

.tabs a {
    text-align: center;
    padding: 13px 0px;
    display: inline-block;
    margin: 0px -0.5px;
    width: 120px;
    color: silver;
    border: 1px solid #fff;
    font-size: 0.8em;
    line-height: 0.8em;
    vertical-align: middle;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.4s;
}

.tabs a.active, .tabs a:hover, .tabs a:focus {
    color: #fff;
    background: #3700d0; /* Old browsers */
    background: -moz-linear-gradient(top, #3700d0 0%, #ca409a 100%);
    background: -webkit-linear-gradient(top, #3700d0 0%,#ca409a 100%);
    background: linear-gradient(to bottom, #3700d0 0%,#ca409a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3700d0', endColorstr='#ca409a',GradientType=0 );
}

.tabs a.active:after {
content: "";
position: absolute;
border-width: 7px 7px 0;
border-style: solid;
border-color: #fff transparent;
display: block;
width: 0;
}

.tabs a.one.active:after {
    bottom: -6px;
    left: 55px;    
}

.tabs a.two.active:after {
    bottom: -6px;
    left: 170px;    
}

.tabs a.three.active:after {
    bottom: -6px;
    right: 55px;
}

.tabs .one {
      border-bottom-left-radius: 2em;
}

.tabs .three {
      border-bottom-right-radius: 2em;
}


@media (max-width: 800px) {
	.tabs {
		width: 270px;
		display: table;
	}
	.tabs a {
		display: table-cell;
		width: 100px;
		color: silver;
		padding: 10px 0px;
		font-size: 0.75em;
		line-height: 0.8em;
		vertical-align: middle;
		letter-spacing: 1px;
		text-transform: uppercase;
		transition: 0.4s;
	}

.tabs a.one.active:after {
    bottom: -6px;
	left: 11vw;   
}

.tabs a.two.active:after {
bottom: -6px;
left: 34vw; 
}

.tabs a.three.active:after {
    bottom: -6px;
    left: auto; 
	right: 11vw;   	
}	
}


@media (max-width: 800px) and (orientation: landscape) {

.tabs a.one.active:after {
    bottom: -6px;
    left: 6vw;    
}

.tabs a.two.active:after {
    bottom: -6px;
    left: 19vw;  
	
}

.tabs a.three.active:after {
    bottom: -6px;
	left: auto;
    right: 6vw;  
	}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
	.tabs a {
		width: 90px !important;
		color: silver;
		padding: 10px 0px;
		font-size: 0.65em !important;
		line-height: 0.8em;
		vertical-align: middle;
		letter-spacing: 1px;
		text-transform: uppercase;
		transition: 0.4s;
	}
}