:root{
    --gray: #5F5F5F;
    --ligth: #BCC0C3;
    --red: #D90A0A;
}
body {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    color: var(--gray);
}
h1, h2, h3, h4, h5 {font-family: 'Red Hat Display', sans-serif; font-weight: 600}
h1 {font-size: 2.2rem}
.h1, .h2, .h3, .h4, .h5 {font-weight: 600}
main {margin-top: 7rem;}
.buscar {width: 100px;}
.language-link{color: var(--gray); text-decoration: none}
.language-link:hover {color: red; text-decoration: underline}
.lead {font-weight: ;}
hr {background-color: var(--gray); margin: 0; padding: 1px; opacity: 100}
.ico-right {padding: 0 .6rem 0 0}

.heads {letter-spacing: .2rem; background-color: white; display: inline-block}
.dashed-line {
    background-image: url(../images/dashed.png); background-repeat: repeat-x; background-position: 10px 18px;
}
.text-danger {color: var(--red)}
.bg-danger, .btn-danger {background-color: var(--red);}
.red-link {color: black; text-decoration: none}
.red-link:hover{color: var(--red); text-decoration: underline}
.underline-title:hover{background-color: rgb(220,220,220); color: var(--gray)}
.underline-title {text-decoration: none; color: var(--gray);background-color: rgb(240,240,240); padding: 3px}
.caja-underline {text-decoration: none; color: var(--gray);letter-spacing: -0.05rem}
.caja-underline:hover{color: var(--gray)}
.caja, .caja2 {padding: .6rem; background-color: rgb(230,235,235); border-radius: 7px; height: auto;}
.caja:hover, .caja2:hover {background-color: rgb(215,220,220)}
.caja2 {background-color: rgb(230,220,210)}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {   color: #fff;background-color: #000;}
.nav-link, .nav-link:hover {color: var(--gray)}
.img-tit {width: 30%; padding-left: .4rem}
.esquina::before {content: url('../images/esquina.png')}
.contenido img {display: block; margin: 0 auto; padding: 2rem 0 3rem 0; width: 100%}
.vh-75 {height: 100vh;}
.w-80 {width: 100%}
.p-16 {font-size: 16px;}
.nav-link {padding: .49rem}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #000;
  background-color: #fff;
}
.carousel-item > img {
    position: relative;
    left: -10rem;
    height: 50vh;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 0;
  left: 15%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: #fff;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  top: 0;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #495057;
  background-color: #fff;
  border-color: var(--gray) var(--gray) #fff;
}
@media (min-width:768px){
    .buscar {width: auto}
    .nav-link {padding: .4rem  .6rem}
    .carousel-item img {
        left: 0;
        width: 100vw; 
        height: auto; 
    }
}
@media (min-width: 960px){
    .img-tit {width: 40%;}
    .contenido img {width: 90%}
    .vh-75 {height: 87vh;}
    .w-80 {width: 80%}
    h1 {font-size: 3rem}
    .carousel h2 {font-size: 3rem}
}