:root {
    --color-institucional: #ed6517;
    --color-institucional-footer: #eaeaea;
    --color-institucional-font: #414042;
}

body {
    /*background-color: #fafafa;
	overflow-y:scroll;
	overflow-x:hidden;	
	*/
    overflow-y: scroll;
    overflow-x: hidden;
    background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
    /*-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);	
	*/
}

div#Titulo {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  margin-left: 10px;
  color:#FFF;	
  font-family: Calibri;
  font-size: 24px;
  text-shadow:1px 1px 3px rgba(0,0,0,0.8);
  opacity: .9;
}

/*
div#Titulo:first-of-type {
  animation: showup 7s infinite;
}

div#Titulo:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
}
*/
div#Titulo:last-of-type span{
  margin-left:-355px;
  animation: slidein 15s infinite;
}

@keyframes slidein {
    0% { opacity:0;margin-left:-800px; }
    20% { opacity:.4;margin-left:-300px; }
    35% { opacity:.9;margin-left:0px; }
	50% { opacity:1;margin-left:0px; }
	80% { opacity:1;margin-left:0px; }
	90% { opacity:.8;margin-left:0px; }
    100% { opacity:0;margin-left:0px; }
}

/*
@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}	
    100% {opacity:0;width:355px;}
}
*/
#Banner{
	background-image: url(../images/Banner.jpg);
	background-position: 100% 0; 
	height: 220px;
}

nav > .nav.nav-tabs{
  	border: none;
    color:#fff;
    background:#272e38;
    border-radius:0;
}
nav {
    background: #3ab3c8!important;
}
nav > div a.nav-item.nav-link,
nav > div a.nav-item.nav-link.active {
    border: none;
    padding: 18px 25px;
    color: #fff;    
    border-radius: 0;
}

nav > div a.nav-item.nav-link.active:after
 {
	content: "";
	position: relative;
	bottom: -60px;
	left: -10%;
	border: 15px solid transparent;
	border-top-color: #00796b ;
}
.tab-content{
  	background: #fdfdfd;
    line-height: 25px;
    border: 0px solid #ddd;
    border-top:5px solid #00796b;
}

nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus
{
  	border: none;
    background: #00796b;
    color:#fff;
	text-align: center;
    border-radius:0;
    transition:background 0.20s linear;
}
.navbar {
    background: #3ab3c8;
    border-color: #3ab3c8;
}
.btn-default {
    border-color:white!important;
}

/* personalizo el tooltip de boostrap*/
.tooltip-inner {
    background-color: #00acd6 !important;
    /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
    color: #fff;
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--color-institucional);
}

.tooltip.right .tooltip-arrow {
    border-right-color: var(--color-institucional);
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--color-institucional);
}

.tooltip.left .tooltip-arrow {
    border-left-color: var(--color-institucional);
}