body { background-color: #dee7f4; background-image: linear-gradient(to right, rgba(163,170,179,0), rgba(163,170,179,1)); font-family: 'Titillium Web', sans-serif; width: 100%; height: 100%; }
.navbar-white { background-color: #105f8b87; }
.navbar-grey .nav-link, .navbar-grey .navbar-brand { color: #999; font-weight: bold; }
.navbar-white .nav-link, .navbar-white .navbar-brand { color: #ddd; font-weight: bold; }
.nav-link:hover, .navbar-brand:hover { color: #9eb2b5 !important; }
.blink { color: #9eb2b5 !important; text-decoration: none !important; -webkit-animation: blink 3s infinite ease-in-out;
	animation: blink 3s infinite ease-in-out; }
@-webkit-keyframes blink {
	0%, 50%, 100% {
		opacity: 0.4;
	}
	25%, 75% {
		opacity: 1;
	}
}

@keyframes blink {
	0%, 50%, 100% {
		opacity: 0.4;
	}
	25%, 75% {
		opacity: 1;
	}
}


.bg-image { background-repeat: no-repeat; background-attachment: fixed; background-position: center center;
    height: 100vh; width: 100%; -o-background-size: cover; -moz-background-size: cover; 
    -webkit-background-size:cover; background-size: cover; }
#main-intro { background-image: url("/img/bg/appmain.png"); position: relative; }
.caption-us { position: absolute; text-align: center; width: 35%; top: 75%; left: 60%; }
.slogan { color: #dadddfb0; font-weight: bolder; font-size: 34px; }
.separated { letter-spacing: 15px; }
.cursiva { font-family: "Great Vibes", cursive; font-weight: 400; font-style: normal; font-size: 60px; }
.caption-us2 { position: relative; text-align: center; width: 30%; top: 30%;  left: 55%;  }
.main-us-text { color: #224149; font-weight: bold; font-size: 24px; text-align: justify;  }
#think-better { background-color: #688ba1; height: 15vh; }


#main-portfolio { padding: 10vh 0vh; background-color: #688ba1; }
.title-clientes { text-align: center; font-weight: bold; }
.card-cliente { position: relative; height: 250px; border-radius: 10px; }
.card-light { background-color: #e7e2c7cf; }
.card-dark { background-color: #101010a8; }
.cliente-logo { position: absolute; max-width: 70%; transform: translateY(0%); transition: all 1s; 
    z-index:2; }
.cliente-descripcion { position: absolute; text-align: center; bottom: 0; padding: 0px 10px;
    transform: translateY(30%); transition: all 1s; z-index: 1; opacity: 0; font-weight: bold; }
.card-light .cliente-descripcion { color: #356889; }
.card-dark .cliente-descripcion { color: #a4abaf; }
.card-cliente:hover .cliente-logo { transform: translateY(-45%); width: 100%; max-width: 80%; }
.card-cliente:hover .cliente-descripcion { transform: translateY(-18%); opacity: 1; }
.cliente-tipo { font-style: italic; }

#us-intro { background-image: url("/img/bg/appnosotros.jpg"); position: relative; }
#caption-nosotros { position: relative; text-align: center; width: 40%; top: 17%; left: 7%;
    padding: 25px;  }
.caption-nosotros2 { position: absolute; text-align: center; width: 35%; top: 75%; left: 60%; }
#nosotros-title { color: #5c8ca3de; font-weight: bold;  }
.nosotros-text { color: #5c8ca3de; font-weight: bold; font-size: 24px; text-align: justify;  }
.divisor { height: .3rem; background-color: #33313080; margin: 2rem 0rem; }
.slogan-us { color: #5c8ca390; font-weight: bolder; font-size: 34px; }
.step-img { width: 130px; height: 130px; padding: 10px; border-radius: 50%; margin: 15px auto; }
.card-step { padding: 50px; border-top: solid 4px #c77014; border-bottom: solid 1px #edecec;
    border-left: solid 1px #edecec; border-right: solid 1px #edecec; border-radius: 7px;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 15px 15px -10px; height: 70vh; }
.step-title { text-align: center; font-weight: bold; }
.step-text { text-align: justify; color: #535c65; font-size: 18px; }

#servicios-intro { background-image: url("/img/bg/appservicios.jpg"); position: relative; }
#caption-servicios { position: absolute; text-align: center; width: 40%; top: 24%; left: 50%; padding: 25px;  }
#servicios-title { color: #dadddfde; font-weight: bold;  }
.servicios-divisor { height: .3rem; background-color: #255a65c7; margin: 2rem 0rem; }
.servicios-text { color: #dadddfde; font-weight: bold; font-size: 24px; text-align: center;  }
#apparte-servicios { position: absolute; text-align: center; width: 30%; top: 75%; left: 0%; }
#servicios-web { background-color: white; }
.slogan-servicios { color: #255a6569; font-weight: bolder; font-size: 34px; }
.servicio-img { width: 250px; height: 250px; padding: 10px; border-radius: 50%; margin: auto; display: block; }
.servicio-title { text-align: center; font-weight: bold; }
.servicio-text { text-align: center; width: 60%; margin: auto; font-size: large; }

#contacto-intro { background-image: url("/img/bg/appcontacto.jpg"); position: relative; }
#caption-contacto { position: absolute; text-align: right; width: 30%; top: 24%; left: 70%; padding: 25px;  }
#contacto-title { color: #0b1218; font-weight: bold;  }
.contacto-divisor { height: .3rem; background-color: #0b1218; margin: 2rem 0rem; }
.contacto-text { font-weight: bold; font-size: 24px; }
.contacto-link { color: #0b1218; }
.slogan-contacto { color: #dadddfde; font-weight: bolder; font-size: 34px; }

.center { text-align: center; }
.float-right { float: right; }
.servicio { margin: auto; display: block; }
footer { background-color: black; color: #eee; padding: 20px; }
footer h4 { font-weight: 500; font-size: 1.5rem; }
.footer-text { font-size: 18px; }
.footer-link { color: #eee; font-size: 18px; text-decoration: none; }
.footer-link:hover { color: #bbb; }
.footer-img { width: 80px; }