@font-face {
  font-family: "CharllyFontDuo";
  src: url("fonts/Charlly_Font_Duo/CharllySans.eot");
  src: url("fonts/Charlly_Font_Duo/CharllySans.woff") format("woff"),
  url("fonts/Charlly_Font_Duo/CharllySans.otf") format("opentype"),
  url("fonts/Charlly_Font_Duo/CharllySans.svg") format("svg");
}

.tabs-style-bar nav {
	background: rgba(40,44,42,0.05);
}

.tabs-style-bar nav ul {
	border: 4px solid transparent;
}

.tabs-style-bar nav ul li a {
	margin: 0 10px;
	background-color: #f7f7f7;
	color: #74777b;
	transition: background-color 0.2s, color 0.2s;
}

.tabs-style-bar nav ul li a:hover,
.tabs-style-bar nav ul li a:focus {
	color: #2CC185;
}

.tabs-style-bar nav ul li a span {
	font-family: "CharllyFontDuo";
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 500;
	font-size: 50px;
	color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.tabs-style-bar nav ul li.tab-current a {
	background: #2CC185;
	color: #fff;
}

.tabs-style-bar nav ul li a.cirugia {
	margin: 0 10px;
	background-image: url("../img/servicios/cirugia/Cirugia-Color.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px;
	height: 250px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
	color: #74777b;
	transition: background-color 0.2s, color 0.2s, .6s;
}

.tabs-style-bar nav ul li.tab-current a.cirugia {
	background-image: url("../img/servicios/cirugia/Cirugia-Color.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px;
	height: 250px;
	color: #fff;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: .6s;
}

.tabs-style-bar nav ul li a.cirugia:hover,
.tabs-style-bar nav ul li a.cirugia:focus {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: .6s;
	color: #df006d;
}

.tabs-style-bar nav ul li a.aparatologia {
	margin: 0 10px;
	background-image: url("../img/servicios/aparatologia/Aparatologia-Color.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px;
	height: 250px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
	color: #74777b;
	transition: background-color 0.2s, color 0.2s, .6s;
}

.tabs-style-bar nav ul li.tab-current a.aparatologia {
	background-image: url("../img/servicios/aparatologia/Aparatologia-Color.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px;
	height: 250px;
	color: #fff;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: .6s;
}

.tabs-style-bar nav ul li a.aparatologia:hover,
.tabs-style-bar nav ul li a.aparatologia:focus {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: .6s;
	color: #df006d;
}

.tabs-style-bar nav ul li a.fillers {
	margin: 0 10px;
	background-image: url("../img/servicios/fillers/Fillers-Color.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px;
	height: 250px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
	color: #74777b;
	transition: background-color 0.2s, color 0.2s, .6s;
}

.tabs-style-bar nav ul li.tab-current a.fillers {
	background-image: url("../img/servicios/fillers/Fillers-Color.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0px;
	height: 250px;
	color: #fff;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: .6s;
}

.tabs-style-bar nav ul li a.fillers:hover,
.tabs-style-bar nav ul li a.fillers:focus {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: .6s;
	color: #df006d;
}