*{
  font-family: 'Poppins', sans-serif;
  background: #E6E6E6;
  scroll-behavior: smooth;

}
body{
  background: none !important;
  width: 100% !important;
  background-image: url('../images/background.png')!important;
  background-position: center;
  background-size: contain!important;
}
header div{
  background: inherit !important;
}
h1, h2, h3, h4, h5, h6, p, span, div, strong {
  background: transparent;
}
h1{
  font-size: 3em!important;
}
h2{
  font-size:1.2em !important;
  line-height: 2em !important;
}
img{
  width:100%;
  background: transparent;
}

.descarga {
  position: fixed !important;
  display: block;
  z-index: 7000;
  bottom: 2rem ;
  right:2rem;
  box-sizing: border-box;
  border-radius: 8px;
}
.descarga hr{
  border: 1px solid white;
  width: 50%;
}
.descarga a {
  color: white !important;
  text-decoration: none !important;
  margin-top: 10px;
}
.descarga .collapsed{
  opacity: 0;
  height: 0px;
  transition: all 0.3s ease;
}

.descarga:hover .collapsed{
  opacity: 1;
  height: 9rem;
}


header{

  background: transparent;
}

.hero{
  position: absolute;
  top:0;
  width: 100%;
  height: 90vh !important;
  background-image: url('../images/main-backgroud.png');
  background-size: cover;
  background-position: center;
  z-index: -10;
}
.hero h2{
  padding:0 3rem!important;
}
.color-hero{
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
  z-index:-1;
  background: #2A8E83;
  opacity: 0.75;
}
.content-01{
  margin-top: 80vh;
}
.content-02 img{
  padding: 5% 33%;
  min-height: 125px;
}
.pilar{
  border-radius: 36px;
  box-sizing: border-box;
  height: 100%;
}
.features{
  z-index: -9999999;
}
.ocultar{
  display: flex !important;
}

.card{
  background: transparent !important;
}
.logos-final div{
  height: 60%;
}
.logos-final div:last-child{
  border-right: none !important;
}

/*Dot Navigation*/
#mainnav{
  z-index: 50000;
  background: transparent;
  max-width: 100%;
}


.dotnav-right {
  right: 10px;
  top: 40%;
  margin-top: -50px;
  position: fixed;
}

.dotnav {
  padding: 0;
  list-style: none;
  font-size: 0.001px;
  background: transparent;
  z-index: 99999999;
}

.dotnav > li {
  display: inline-block;
  font-size: 1rem;
  vertical-align: top;
  background: transparent;
}

.dotnav > li:nth-child(n+2) {
  margin-left: 15px;
}

.dotnav > li > a {
  display: inline-block;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #009CA6;
  vertical-align: top;
  overflow: hidden;
  padding: 0;
  text-indent: -999%;
}

.dotnav > li > a:hover,
.dotnav > li > a:focus {
  background: #009CA6;
  outline: none;
}

.dotnav > li > a:active {
  background: #009CA6;
}

.dotnav > li.active > a {
  background: #009CA6;
}

.dotnav-vertical > li {
  display: block;
  margin-right: 10px;
}

.dotnav-vertical > li:nth-child(n+2) {
  margin-left: 0;
  margin-top: 10px;
}

.nav-tooltip + .tooltip > .tooltip-inner {
  background-color: #009CA6;
  color: #fff;
  border: 1px solid #009CA6;
}

.nav-tooltip + .tooltip.left > .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #009CA6;
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
}
.tooltip-inner {
background-color: #009CA6 !important;
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #009CA6  !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #009CA6  !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #009CA6  !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #009CA6  !important;
}
.otros{
  padding: 3rem;
}
@media (max-width: 576px) {
  body{
    background-position: center;
    background-size: auto;
    background: none !important;
  }
  h1, h3, h4, h5, h6 {
    font-size: 1.5em!important;
  }

  h2, p, span, a {
    font-size: 1em!important;
  }
.descarga{
  bottom: 1rem ;
  right:1rem;
  left: 1rem;
}
.hero{
  height: 100vh !important;
}
.hero h2{
  padding:0 20px!important;
}
.intro{
  margin-top: 10%;
}
#contexto .row{
  padding: 0!important;
}
.content-01{
  margin-top: 80vh;
}
.otros{
  padding: 0!important;
}
.ocultar{
  display: none !important;
}
.spacing-mobile{
  height: 5vh !important;
}
}
