/*!
 * Start Bootstrap - Grayscale v5.0.9 (https://startbootstrap.com/template-overviews/grayscale)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-grayscale/blob/master/LICENSE)
 */

.cover {
	background: #fff;
	position: fixed;
	width: 100%;
	height: 100%;
	opacity: 0;
    z-index: 1000;
	
	animation: fade-out 4s /*infinite*/;
}

.cover #icon {
	--size: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: var(--size);
	
	animation: zoom-in 2s /*infinite*/;
	animation-delay: 2s;
}

@keyframes zoom-in {
	50% {
		width: var(--size);
	}
	60% {
		width: calc(var(--size) * 0.9);
	}
	100% {
		width: 250%;
	}
}
@keyframes fade-out {
	0%, 85% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.content {
	width: 100%;
}

#mainNav {
  min-height: 56px;
  background-color: #fff;
}

#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.75rem;
  color: #64a19d;
  border: 1px solid #64a19d;
}

#mainNav .navbar-toggler:focus {
  outline: none;
}

#mainNav .navbar-brand {
  color: #161616;
  font-weight: 700;
  padding: .9rem 0;
}

#mainNav .navbar-nav .nav-item:hover {
  color: fade(white, 80%);
  outline: none;
  background-color: transparent;
}

#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
  outline: none;
  background-color: transparent;
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
  }
  #mainNav .navbar-brand {
    padding: .5rem 0;
    color: rgba(0, 0, 0, 0.5);
  }
  #mainNav .nav-link {
    transition: none;
    padding: 2rem 1.5rem;
    color: rgba(0, 0, 0, 1);
    
  }
  #mainNav .nav-link:hover {
    color: rgba(0, 0, 0, 0.75);
  }
  #mainNav .nav-link:active {
    color: #05254c;
  }
  #mainNav.navbar-shrink {
    background-color: #fff;
  }
  #mainNav.navbar-shrink .navbar-brand {
    color: #161616;
  }
  #mainNav.navbar-shrink .nav-link {
    color: #161616;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 0.25rem solid transparent;
  }
  #mainNav.navbar-shrink .nav-link:hover {
    color: #05254c;
  }
  #mainNav.navbar-shrink .nav-link:active {
    color: #05254c;
  }
  #mainNav.navbar-shrink .nav-link.active {
    color: #05254c;
    outline: none;
    border-bottom: 0.25rem solid #ce0f38;
  }
    
  .sponsor_resp{
   width: 80%;
}
    
  .tecnologias_xs{
  display: none;
}

 .img_tec_lg{
 width: 90%
 }
 

}

.masthead {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 35rem;
  padding: 15rem 0; 
  background: linear-gradient(to bottom,rgba(255,255,255,.3) 0,rgba(255,255,255,.7) 75%,#F8F8FF 100%),url(../img/teaser/home_copia.jpg);
  /*background: url(../img/teaser/home_copia.jpg);*/
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-attachment: fixed;
  background-size: cover;
}

.masthead h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 200%;
  line-height: 2.5rem;
  background: #05254c;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.acento{
  color: #05254c;
  font-weight: bolder;
}

.masthead h2 {
  max-width: 20rem;
  font-size: 1rem;
  color: #05254c;
}

.whats{
  position: relative;
  bottom: 12%;
  width: 100%;
}

@media (min-width: 768px) {
  .masthead h1 {
    font-size: 4rem;
    line-height: 4rem;
  }
       
}

@media (min-width: 992px) {
  .masthead {
    height: 100vh;
    padding: 0;
  }
  .masthead h1 {
    padding: 18% 0 0 0;
    font-size: 2.5rem;
    line-height: 3.5rem;
    font-weight: normal;
    
  }
  .masthead h2 {
    max-width: 30rem;
    font-size: 1.25rem;
    color: #05254c;
    /* font-family: Roboto; */
    font-weight: normal;
  }
    
.title_carousel{
  font-weight: lighter !important;
  font-size: 300% !important;
  color: #05254c;
}
    
.sponsor_resp{
width: 80%;
}
    
.clientes_xs{
display: none; 
}
    
.social2 {
  position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
  right:0; /* Establecemos la barra en la izquierda */
  left: 92%;
  top: 200px; /* Bajamos la barra 200px de arriba a abajo */
  z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
    

    
}


@media (max-width: 768px){
 .whats{
 position: relative;
 bottom: 20%;
 width: 20%;
} 
.sponsor_resp{
width: 90%;
}

.clientes_lg{
display: none; 
}
    
.tecnologias_lg{
display: none;
}

.img_tec_xs{
width: 100%
}
    
.social2 {
 position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
 right:0; /* Establecemos la barra en la izquierda */
 left: 70%;
 top: 200px; /* Bajamos la barra 200px de arriba a abajo */
 z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}

    
}

@media (max-width: 375px){
 .whats{
 position: relative;
 bottom: 20%;
 width: 20%;
}
       
.txt_slider_resp{
 position:relative;
 bottom: 40%;  
}
    
.title_carousel{
font-weight: lighter !important;
font-size: 250% !important;
color: #05254c;
position: relative;
bottom: 45%;
}
    
.masthead h1 {
 font-family: 'Roboto', sans-serif;
 font-size: 222%;
 /* line-height: 1.9rem; */
 /* letter-spacing: 0.5rem; */
 background: #05254c;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
}
    
.sponsor_resp{
width: 90%;
}
    
.tecnologias_lg{
display: none;
}
    
.img_tec_xs{
width: 100%
}
    
.social2 {
 position: fixed;
 right: 0;
 left: 72%;
 top: 250px;
 z-index: 2000;
}
    
    
}

.btn {
  box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
  padding: 1.25rem 2rem;
  font-family: 'Roboto', sans-serif;
  font-size: 80%;
  text-transform: uppercase;
  letter-spacing: .15rem;
  border: 0;
}

.btn-primary {
  background-color: #ce0f38;
}

.btn-primary:hover {
  background-color: #960f38;
}

.btn-primary:focus {
  background-color: #960f38;
  color: white;
}

.btn-primary:active {
  background-color: #960f38 !important;
}

.about-section {
 padding-top: 4rem;
 background:linear-gradient(to bottom,rgba(22,22,22,.6) 0,rgba(22,22,22,.8) 95%,#161616 100%),url(../img/teaser/nosotros.jpg);    
 background-size: cover;
 background-repeat: no-repeat;

}

.about-section p {
  margin-bottom: 5rem;
}

.text_carousel{
  position: absolute;
  top: 20%;
  left:10%;
  
}

.icono_servicio{
  width: 50%;
}

.title_teaser{
  color: #05254c !important;
}



.projects-section {
  padding: 3rem 0;
}

.projects-section .featured-text {
  padding: 2rem;
}

@media (min-width: 992px) {
  .projects-section .featured-text {
    padding: 0 0 0 2rem;
    border-left: 0.5rem solid #64a19d;
  }
}

.projects-section .project-text {
  padding: 3rem;
  font-size: 90%;
}

@media (min-width: 992px) {
  .projects-section .project-text {
    padding: 5rem;
  }
  .projects-section .project-text hr {
    border-color: #64a19d;
    border-width: .25rem;
    width: 30%;
  }
}

.signup-section {
  padding: 10rem 0;
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0.1) 0%, rgba(22, 22, 22, 0.5) 75%, #161616 100%), url("../img/bg-signup.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

.signup-section .form-inline input {
  box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
  padding: 1.25rem 2rem;
  height: auto;
  font-family: 'Roboto', sans-serif;
  font-size: 80%;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  border: 0;
}

.contact-section {
  padding: 5rem 0 0;
}

.contact-section .card {
  border: 0;
  border-bottom: 0.25rem solid #64a19d;
}

.nosotros_title{
  text-align: left;
  color: #fff;
}

.title_acent{
  text-align: center !important;
  font-size: 300% !important;
  color: #05254c;
  font-weight: lighter;
}

.contact-section .card h4 {
  font-size: 0.8rem;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
}

.contact-section .card hr {
  border-color: #64a19d;
  border-width: 0.25rem;
  width: 3rem;
}

.contact-section .social {
  margin-top: 5rem;
}

.contact-section .social a {
  text-align: center;
  height: 3rem;
  width: 3rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  line-height: 3rem;
  color: rgba(255, 255, 255, 0.3);
}

.contact-section .social a:hover {
  color: rgba(255, 255, 255, 0.5);
}

.contact-section .social a:active {
  color: #fff;
}

body {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.0625em;
}

.title_acent_white{
  font-weight: lighter;
  text-align: left;
  font-size: 300%;
}

.p_acent_white{
  text-align: left !important;
  font-weight: normal;
}

a {
  color: #64a19d;
}

a:focus, a:hover {
  text-decoration: none;
  color: #3c6360;
}

.bg-black {
  background-color: #05254c !important;
}

.bg-primary {
  background-color: #64a19d !important;
}

.text-primary {
  color: #64a19d !important;
}

footer {
  padding: 5rem 0;
}

.conteo{
  width: 100%;
  height: 100%;
  background: url(../img/teaser/experiencia.jpg);
  padding: 8% 0 10% 0;
  
  background-size: cover;
  background-repeat: no-repeat;
}

.conteo p{
  font-size: 150%;
  color: #05254c;
  text-align: center;
  line-height: 200%;
  text-align: center;
  position: relative;
  bottom: 20%;
}

.conteo p strong{
  font-size: 600%;
  color: #05254c;
  text-align: center;
}

.count {
  font-size: 600%;
  font-weight: bolder;
  color: #05254c;
  text-align: center;
   
}

.exito{
  width: 100%;
  background: #ebebeb;
  padding: 5% 0 5% 0;
}

.title_testimonial{
  text-align: center;
}

.txt_testimonial{
  font-size: 100%;
  color: 05254c;
}

.form_contacto{
  width: 100%;
  padding: 10% 0 10% 0;
}



	.social2 ul {
		list-style: none;
	}

	.social2 ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		padding: 10px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}

	.social2 ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social2 ul li .icon-twitter {background: #00abf0;}
	.social2 ul li .icon-googleplus {background: #d95232;}
	.social2 ul li .icon-pinterest {background: #ae181f;}
	.social2 ul li .icon-mail {background: #666666;}

	.social2 ul li a:hover {
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}


 
	.social2 ul {
		list-style: none;
	}
 
	.social2 ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		padding: 30px 20px 0 50px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.social2 ul li .icon-facebook {background:#00bb2d;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social2 ul li .icon-twitter {background: #0084ff;}
	.social2 ul li .icon-googleplus {background: #d95232;}
	.social2 ul li .icon-pinterest {background: #ae181f;}
	.social2 ul li .icon-mail {background: #666666;}
 
	.social2 ul li a:hover {
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 30px 60px 0 50px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}

    .icon_redes{
     font-size: 1.9rem;
     position: relative;
     left: -110%;
     top: 19%;
     /* bottom: 37%; */
     margin: -60% 0 61% 0;
     padding: -6% 0 0 0;
    }

    .enviar{
    box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
    padding: 1.25rem 2rem;
    font-family: 'Roboto', sans-serif;
    font-size: 80%;
    text-transform: uppercase;
    letter-spacing: .15rem;
    border: 0;
    background-color: #ce0f38;
    color: #fff;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }