header {
	background: #004B90;
	color: #fff;
}

@font-face {
font-family: "Comfortaa";
src: url(../fonts/Comfortaa-Regular.ttf) format("truetype");
}

@font-face {
font-family: "Avenir-Roman";
src: url(../fonts/Avenir-Roman.otf) format("truetype");
}

body {
	position: relative; 
	font-family: "Comfortaa", sans-serif !important;
}

.putConfortaa{
	font-family: "Comfortaa", sans-serif !important;
}

.putAvenir{
	font-family: "Avenir-Roman", sans-serif !important;
}

.nav-pills > li.active > a {
    background: #ffd533;
    color: white;
}
// This changes the color of the active

.nav-pills > li.active > a:hover {
    background: #ffd533;
    color: white;
}
// This changes the color of the hovered pill

.main{
	background: #ffffff;
}

.color1{
	background: #ffd533;
	color: #000
}

.paintButtoms{
	background-color: #ffd533;
	color: #000
}

.color2{
	background: #004B90;
	color: #fff
}
.color3{
	color: #ffd533;
}

.greyBorder{
	background: #E9E9E9;
	outline: 8px solid #E9E9E9;
}

.greyPanel{
	width: 120%;
}

.enderezarDerecha{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.enderezarIzquierda{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.redondearDerecha{
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

.redondearIzquierda{
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

.corregirPildora{
	margin-left: -15px ;
	width: 261px;
}

.centerText{
	text-align: center;
}

.background1 {
    background-image: url(../imagenes/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}

.bgSecVl {
    margin-bottom: 0px;
    background-image: url(../imagenes/backVlSector.png);
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    color: black;
}

.bgContacts {
    margin-bottom: 0px;
    background-image: url(../imagenes/bg_man.png);
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    color: black;
}

.table-borderless td,
.table-borderless th {
    border: 0;
}

aside{
	background: #ffffff;
	color: #fff
}


footer{
	background: #000000;
	color:#fff;
}

.panel-heading {
    padding: 5px 15px;
}

.panel-footer {
	padding: 1px 15px;
	color: #A0A0A0;
}

.profile-img {
	width: 96px;
	height: 96px;
	margin: 0 auto 10px;
	display: block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.jumbotron {
	background: transparent;
	margin-bottom: 0px;
}

.transparentar {
    background-color: transparent;
}

.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #ffd533;
}
 
/* Aplicar gradientes de colores */
/* Nota: no se muestran aquí todos los gradientes que tendrás que
   definir para los diferentes navegadores. */
.btn-ttc {
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
  ...
}
 
/* Estilos del estado :hover del botón */
/* Uno de los estilos más sencillos y eficaces para el estado :hover
   consiste en subir hacia arriba ligeramente la imagen de fondo del
   botón, pero puedes definir otros estilos adicionales si quieres. */
.btn-ttc:hover {
  background-position: 0 -15px;
}