/* general styles */
html, body {
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
  position: relative;
}

/* padded section */
.pad-section {
  padding: 50px 0;
}
.pad-section img {
  width: 100%;
}

/* vertical-centered text */
.text-vcenter {
  display: table-cell;
   left;
  vertical-align: middle;
  color: white;
  background: rgba(68, 68, 68, 0.6);
  padding-left: 4%;
}

.text-vcenter h1 {
  font-size: 4.5em;
  font-weight: 700;
  margin: 0;
  /* padding: 0; */
}



#soi-para-empresas-saludables {
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

.soi1 {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  color: black;
  /* background: rgba(68, 68, 68, 0.6); */
  padding-left: 4%;
  padding-right: 4%;

}

#soii {
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

  .soii1 {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    color: black;
    /* background: rgba(68, 68, 68, 0.6); */
    padding-left: 4%;
    padding-right: 4%;
  
  }

.navbar-default {
  background-color:#2b2b2b;
}

.nav.navbar-nav.navbar-right li a {
  color: white;}
  .nav.navbar-nav.navbar-right li a:hover {
      color: #00b7ff;
      transition: all 0.5s ease-out; }

    
      .navbar-default .navbar-nav .active a {
        color: #00b7ff !important;
        background-color:transparent !important;
        /* font-weight: bold !important; */
    }

    /* .navbar-default .navbar-nav.active a:hover{
     color: #00b7ff;
        background-color: white;
    }  

     .navbar-default .navbar-nav.active a:focus{
    color: #00b7ff;
        background-color: white;
    }  */


/* additional sections */
#home {
  /* background: url(../images/home.jpg) no-repeat center center fixed;  */
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}



#about {

}

#desarrollos-para-empresas {
  background-color: #306d9f;
  color: #ffffff;
}
#desarrollos-para-empresas .glyphicon {
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  font-size: 60px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
}


#soi-services {
  background-color: #306d9f;
  color: #ffffff;
}

#soi-services .glyphicon {
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  font-size: 60px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
}

#informacion {
  /* background: url(../images/estate.jpg) no-repeat center center fixed;  */
  display: table;
  height: 800px;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#informacion .panel {
  opacity: 0.85;
}

#contacto {
  height: 500px;
  width: 100%;
  background: url(../images/contactenos1.jpg) no-repeat center center ;
  /* background: no-repeat center center fixed; */
   /* letter-spacing: 1pt;  */
}

footer {
  /* padding: 20px 0; */
  background-color:#2b2b2b;
  color:white;
}
footer .glyphicon {
  color: #333333;
  font-size: 60px;
}
footer .glyphicon:hover {
  color: #306d9f;
}

.arrow {
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
	bottom: -64px;
	bottom: -4rem;
	left: calc(50% - 19px);
	position: absolute;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	transition: opacity 250ms ease-in-out;
	width: 38px;
}
.arrow--hide {
	opacity: 0;
}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	60% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	60% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}



 /* width */
 ::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  background: #535151; 
}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:#00b7ff;}



  .parallax__container {
    clip: rect(0, auto, auto, 0);
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -100;
  }
  
  .parallax {
    position: fixed;
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
  
    /* BG behaviour */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .col-12-1 { 
    background: rgba(0,0,0,.75);
      border-radius: 25px;
      color: #fff;
      margin: 0 auto;
      padding: 10px 10px;
      /* text-align: center; */
      /* width:65%; */

}

.icons {
  margin-top: 1rem; 
  letter-spacing: 5pt;
}
  
  .icons a {
    padding: 0.4rem; 
    color: white ;}
    .icons a:hover {
      color: #00b7ff;
      transition: all 0.5s ease-out; }