@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'feathericons';
	src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
	src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
		url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
		url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
		url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
}
@font-face { 

	font-family: 'Montserrat'; 
	font-weight: normal;
	src:url("fonts/Montserrat-Regular.ttf");
 }

/*--------------HEADER--------------*/
body {
	background-image: linear-gradient(120deg, #fdfbfb 0%, #153b63 100%);
	padding-top: 100px;
}
* { 
-webkit-transition: all 0.3s;
  transition: all 0.3s; 
  font-family: "Montserrat";
}

#header { 
	background: white; 
	transition:0.5s;
	height: auto;
	z-index: 5001;

} 


.header-up { 
	height: 100px; 
}
#header .navbar { 
	-webkit-transition: all 0.3s;
  transition: all 0.3s;
}
 .navbar-brand { 
	height: 90px; 
}

#header .navbar .navbar-brand img { 
	float:left;
	height: 90px;
		position:absolute;
	left:0px;
	
	-webkit-transition: all 0.3s;
  transition: all 0.3s; 
}
#sec { 
	position:absolute;
	left:-300px;
	height: 100px;
	top:5px;
	background: rgba(255,255,255,.8);
	border-radius:50px;


	 }
#header .navbar-collapse .navbar-nav  { 
	width: 50%;
	justify-content: space-between;
	
	}
.header-down { 
height: auto; 
-webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.navbar-down { 
	height: 45px; 
	-webkit-transition: all 0.3s;
  transition: all 0.3s;
  
}
#header .navbar .navbar-down img { 
	position:absolute;
	left: -300px;
	height: 0;

}
.mostrarsec { 
	top:-40px;
	left:0px; 
	height: 80px;
	}


/*---------------------------------SLIDER-------------------------------*/



#carouselExampleControls .carousel-control-prev ,  
#carouselExampleControls .carousel-control-next { 
opacity: 0;
}

/*-------------------------SERVICIOS-----------------------------------*/

.info-servicios {
	position:absolute;
	top: 500px;
	width: 100%; 
	height:500px;
	background-color:;  
	z-index: 5000;
	overflow: hidden;

	
}
.ind-servicios { 
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	 }
.info-servicios .relleno-servicios { 
	height: 500px; 
	background-color: rgba(0,0,0,.80);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	flex-wrap: wrap;

	 }
.info-servicios .enlace-cotizacion { 
	text-decoration: none; 
	padding: 15px; 
	border:solid 1px white;
	border-radius: 10px;
	color:white;
	
	
	 }

	 .info-servicios .enlace-cotizacion:hover { 
	 		border-color:silver;
	 		color: silver;
	 	 }
	 .info-servicios .relleno-servicios .demo , 
	 .info-servicios .relleno-servicios .explicacion { 
	 	width: 50%;
	 	height: 80%; 
	 	color: white;
	 	text-align: justify;
	 	padding: 10px;
	 }
	 .info-servicios .relleno-servicios .explicacion ul, 
	 .info-servicios .relleno-servicios .explicacion p, 
	 .info-servicios .relleno-servicios .demo ul, 
	 .info-servicios .relleno-servicios .demo p { 
	 padding: 10px;
	  }
	 .info-servicios .relleno-servicios .regresar { 
	 	width: 100%; 
	 	height: 10%;
	 	cursor: pointer;
	 	z-index: 7000;
	 }

.info-servicios .relleno-servicios h2 { 
	word-spacing: -0.15em;
    font-weight: 300;
	color: white;
	width: 100%;
	padding-top: 10px;
	height: 10%;
	 }
	 .infoservicios .relleno-servicios h2 span  { 
	 	
	 	font-weight:800;
	 	 }
	 .info-servicios .relleno-servicios h3 { 
	 	font-size: 1rem;
	 	color:white;


	 	 }

/*--------------VECTORIZACION DE LOGOS --------------------- */


#info-v-logos { 
	background:url(images/sizes/v-logos.jpg);
	background-size: cover; 
  	background-repeat: no-repeat;
  	background-size: cover;

	
}








	/*------------------------------BRANDING --------------------------*/
#info-a-logos { 
	background:url(images/sizes/a-logos.jpg);
	background-size: cover; 

	 }
	 #info-a-logos .demo { 
	 	display: flex;
	 	flex-wrap: wrap;
	 	align-items: center;
	 	justify-content: center;
	 	}
	 #info-a-logos .demo .imagenes-redes img { 
	 	width: 100%;

	 	 }

/*----------------------DiEÑO DE LOGOS-----------------------------------*/
#info-d-logos { 
	background:url(images/sizes/d-logos.jpg);


	 }

#info-d-logos .demo img { 
padding: 10px;
 	 }



	 /*----------------------------DISEÑO WBB--------------------------*/
#info-d-web { 
	background:url(images/sizes/3.jpg);

	 }
/*------------APLICACIONES WEB--------------------*/
#info-a-web { 
	background:url(images/sizes/a-web.jpg);
	 }
#info-a-web .demo {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
	align-items: center;
	 }
	 #info-a-web .demo .imagenes-backend { 
	 	 }
	 #info-a-web .demo .imagenes-backend img { 
	 	width: 30%;

	 	 }

	 /*--------------------------*/
.ind-servicios { 
	width: 100%;
	height: 0px; 
	background: silver;
	opacity: 0;
	transition: 0.8s;


 }
 





/*-------------------------FORMULARIO-----------------------------------*/
.clearfix { 
	clear: both; 
	display: block;
	margin:20px; 
}
#contacto { 

	padding:20px;
	width:100%;
	background-image: url(images/BACKGROUND.svg);
	background-attachment: fixed; 
	background-repeat: no-repeat;
	background-size: cover;
	background-position:0px 0px ;

	 }
	 #contacto h1 { 
	 	color: white; 
	 	padding: 10px;

	 }
	 #contacto form ul { 
	 	list-style: none;
	 	padding: 0;
	 	 padding-bottom:60px; 
	 	 }
	 	 #contacto form ul li { 
	 	 	padding:0; 
	 	 	width: 100%;
	 	 	display: flex; 
	 	 	justify-content: center;
	 		}
	 	 #contacto ul li input, #contacto ul li select  { 
	 	 	border-radius:15px;
	 	 
	 	 	margin: 20px;
	 	 	width: 40%;
	 	 	height: 55px;

	 	


	 	 	 }
	 	 	 #contacto ul li select { 
	 	 	  color:rgba(0,0,0,.65); 
	 	 	  border-color:none; 
	 	 	}
	 	 	  #contacto ul li select:focus , 
	 	 	  #contacto ul li select option:focus, 
	 	 	    #contacto ul li select option:active,
	 	 	    #contacto ul li select option:checked  { 
	 	 	    	outline: none;
	 	 	 	border:none; 
	 	 	 	color: -internal-light-dark(none, none);
	 	 	 	
	 	 	 	
	 	 	 	}
	 	 	 	#contacto ul input.btn  {
	 	 	 	width: 70%;
	 	 	 	margin-left: 15%;

	 	 	 		
	 	 	 		 }


	 	 	 		 /*--------------------FORMULARIOS-----------------------------*/


	 	 	 		 .datos-personales  { 
	 	 	 		 	max-width: 800px; 
	 	 	 		 	min-width: 280px; 
	 	 	 		
	 	 	 		 	background-color: red;
	 	 	 		 	margin:auto;
	 	 	 		 	border-radius: 15px; 
	 	 	 		 	box-shadow:100px black;
	 	 	 		 	background-color: #F9FBFC;
	 	 	 		 	
	 	 	 		 	padding: 40px; 
	 	 	 		 	-webkit-box-shadow: 0px 2px 32px -9px rgba(0,0,0,0.75);
						-moz-box-shadow: 0px 2px 32px -9px rgba(0,0,0,0.75);
						box-shadow: 0px 2px 32px -9px rgba(0,0,0,0.75);
	 	 	 		 }
	 	 	 		 .datos-personales  ul { 
	 	 	 		 list-style: none;
	 	 	 		 max-width: 700px; 
	 	 	 		 min-width: 200px; 
	 	 	 		 width: 80%;
	 	 	 		 margin:auto;
	 	 	 		 padding: 30px;

	 	 	 		  }
	 	 	 		  .datos-personales   ul li { 
	 	 	 		  
	 	 	 		  	color:silver;
	 	 	 			 padding: 10px 0px 10px 0px;
	 	 	 			 width: 100%;
	 	 	 		  	position: relative;

	 	 	 		  	 }
	 	 	 		 .datos-personales  .info-personal ul li input { 
	 	 	 		 	height: 60px; 
	 	 	 		 	border:none;
	 	 	 		 	border-bottom: 1px solid silver;
	 	 	 		 	width: 100%;
	 	 	 		 	background-color: #F9FBFC;
	 	 	 		 	

	 	 	 		 	}
	 	 	 		 .datos-personales ul li input:focus { 
	 	 	 		 	outline: none;
	 	 	 		 	border-color:blue; 
	 	 	 		 }
	 	 	 		 
	 	 	 		 .datos-personales .info-personal ul li input:focus  + label{
	 	 	 		 	color:white;
	 	 	 		 	background-color: #B6B6B6;
	 	 	 		 	border-radius: 5%;
	 	 	 		 	left: 10px;


	 	 	 		 } 


	 	 	 		 .datos-personales  .info-personal ul li input + label { 
	 	 	 		 	
	 	 	 			padding: 5px;
	 	 	 		 	position: absolute;
	 	 	 		 	font-size: .8rem; 
	 	 	 		 	left:0px;
	 	 	 		 	top:-5px;
	 	 	 		 	transition: .3s;
	 	 	 		 	
	 	 	 		 	


	 	 	 		  }
	 	 	 		 	.datos-personales  .info-personal li ul#redes-sociales { 
	 	 	 		 		display: flex;
	 	 	 		 		font-size: 2rem; 
	 	 	 		 		padding: 30px;
	 	 	 		 		justify-content: space-around;
	 	 	 		 		width: 100%;
	 	 	 		 	}
	 	 	 		 	.datos-personales li ul#redes-sociales li { 
	 	 	 		 		flex-wrap: wrap;
	 	 	 		 		justify-content: center;
	 	 	 		 		text-align: center;

	 	 	 		 	}
	 	 	 		

	 	 	 		 	.datos-personales  .info-personal li ul#redes-sociales li label input  { 
	 	 	 		 		overflow: hidden;
	 	 	 		 		height:0; 
	 	 	 		 		width: 0;
	 	 	 		 		opacity: 0;
	 	 	 		 		text-align: center;
	 	 	 		 		position: relative;
	 	 	 		 		top: 40px;
	 	 	 		 		font-size: 1rem;


	 	 	 		 		}
	 	 	 		 	.datos-personales  .info-personal li ul#redes-sociales li label input.usuarios-redes::placeholder  {
	 	 	 		 		font-weight: lighter;
	 	 	 		 		font-size:1rem;
	 	 	 		 		color: #B6B6B6;
	 	 	 		 		opacity: 1;
	 	 	 		 	} 

	 	 	 		 		.datos-personales  .info-personal li ul#redes-sociales li label input + span { 
	 	 	 		 			padding: 25px; 
	 	 	 		 			border-radius: 50%;
	 	 	 		 			border:2px solid #B6B6B6;
	 	 	 		 			cursor: pointer;
	 	 	 		 			margin:auto;
	 	 	 		 			font-size: 3rem;
	 	 	 		 			margin-bottom: 10px;
	 	 	 		 			opacity: 0.7;


	 	 	 		 		}
	 	 	 		 	.datos-personales .info-personal li ul#redes-sociales li label input:checked + span{ 
	 	 	 		 		background-color: #B6B6B6; 
	 	 	 		 		color:white;
	 	 	 		 		opacity: 1;
	 	 	 		 		border-color:white;
	 	 	 		 	}
	 	 	 		 	.datos-personales .boton-formulario { 
	 	 	 		 		width: 20%; 
	 	 	 		 		margin-left: 40%;
	 	 	 		 		margin-top:50px;
	 	 	 		 		height: 45px;
	 	 	 		 		background-color:#3498db;  
	 	 	 		 		border:none;
	 	 	 		 		font-weight: bold;
	 	 	 		 		color:white;
	 	 	 		 		align-self: center;
	 	 	 		 		}
	 	 	 		 		.datos-personales .boton-formulario:hover  { 
	 	 	 		 				background-color:#42A5F5; 
	 	 	 		 				color: #B6B6B6;


	 	 	 		 		 }
	 	 	 		 	
	 	 	 		 	 	
	/*-----------------------------CONTACTO VECTORIZACION DE LOGOS-----------------------------------------------------*/
	.datos-personales .vectorizacion-formulario ul {
		display: flex;
		flex-wrap: wrap;

	 }

	.datos-personales .vectorizacion-formulario ul li { 
		width: 50%;
		padding: 10px;
		display: flex;
		justify-content: space-between;


	}
	 	 	 		 	

/*----------------------------------------------COTIZACION PAGINAS WEB-----------------------------------------------------*/

li#secciones-pagina ul, 
li#secciones-pagina ul li {
width: 100%; 
padding: 0;
margin: 0;
 }
li#secciones-pagina ul li input{
	width: 100%;
	border: none;
	border: 1px solid #B6B6B6;

	height: calc(1.5em + 0.75rem + 2px);

}
li#secciones-pagina ul li .contenido-editable { 
width: 100%; 
background-color: white;
min-height: calc(1.5em + 0.75rem + 2px); 
border: 1px solid #B6B6B6;
color: black;
padding: 4px;
 }
li#secciones-pagina ul li .contenido-editable span {
	font-weight: lighter;
} 
li#secciones-pagina ul li .contenido-editable span::selection {
background-color: #B6B6B6;
}


li#secciones-pagina ul li .contenido-editable::selection {  
	background-color: #B6B6B6;

} 
li#secciones-pagina ul li .contenido-editable:focus {
border:1px solid #B6B6B6;
outline: none;
}  
li#secciones-pagina .agregar-seccion {
	display: flex;
	width: 100%;
	justify-content:center;
	align-items: center;
	border: 1px solid #B6B6B6;
	cursor: pointer;
	margin-top: 10px;


}
li#secciones-pagina .agregar-seccion span {
	font-size:2rem;
	margin-right: 4px;
	align-items: center;

}
li#secciones-pagina .agregar-seccion:hover span  {
	color:grey;
	transition:.05s;
}

/*asd*/
li#url-referencia ul, 
li#url-referencia ul li {
width: 100%; 
padding: 0;
margin-top: 10px;
 }
li#url-referencia ul li input{
	width: 100%;
	border: none;
	border: 1px solid #B6B6B6;

	height: calc(1.5em + 0.75rem + 2px);

}
li#url-referencia ul li .contenido-editable { 
width: 100%; 
background-color: white;
min-height: calc(1.5em + 0.75rem + 2px); 
border: 1px solid silver;
color: black;
padding: 4px;
 }
li#url-referencia ul li .contenido-editable span {
	font-weight: lighter;
} 
li#url-referencia:selection {
background-color: #B6B6B6;
}

li#url-referencia ul li .contenido-editable::selection {  
	background-color: #B6B6B6;

} 
li#url-referencia ul li .contenido-editable:focus {
border:1px solid #B6B6B6;
outline: none;
}  
li#url-referencia .agregar-seccion {
	display: flex;
	width: 100%;
	justify-content:center;
	align-items: center;
	border: 1px solid #B6B6B6;
	cursor: pointer;
	margin-top: 10px;


}
li#url-referencia .agregar-seccion span {
	font-size:2rem;
	margin-right: 4px;
	align-items: center;

}
li#url-referencia .agregar-seccion:hover span  {
	color:grey;
	transition:.05s;
}
#url-pagina::selection, 
#g.pagina::selection { 
background-color: #B6B6B6;
 }

 /*DISEÑO DE LOGOS*/
.lista-checkboxes ul  {
	width: 100%;
 column-count: 2;


 }
 .lista-checkboxes ul li { 
 	display: flex; 
 	justify-content: space-between;
 	align-items: center;
 	width: 100%;
 	 }

 .datos-personales .lista-checkboxes ul li input {
 	height: auto;
 	width: auto;
  
 }
 .datos-personales .lista-checkboxes ul li label {
margin-bottom: 0;
 }
/*COTIZACION APLICACIONES WEB */
.aplicaciones-web ul li .descripcion-app { 
	width: 100%; 
	min-height: 80px;
	background-color: white; 
}
.aplicaciones-web ul li .descripcion-app:focus {
	outline: none; 
	border:none;
} 

.aplicaciones-web ul li .descripcion-app p:selection {
	background-color: silver;  }
/*FOOOTER*/
footer { 
display: flex; 
flex-wrap: wrap;
background-color: #202020;
color:#6d6d6d;
padding:10px; 
 }
 footer .texto, 
 footer .lista { 
 	display: flex;
 	justify-content: center;
 	width: 100%;
  	text-align: center;
  }
  footer .texto { 
  	font-weight: bold;
  	 }
  footer .lista { 
  display: flex;
   }
   footer .lista a { 
   	text-decoration: none; 
   	border:0px; 
   	padding: 10px;
   }

   footer .lista span { 
   	color:#6d6d6d;
   	font-size:2rem;
   	
   	}



/*ANIMACION DE CARGA*/

#snippet {
	height:calc(100vh - 400px) ; 
	width: calc(100vw - 400px);  

	  }
	  .ocultar { 
	  height: 0px; 
	  overflow: hidden;
	}
#snippet img.carga { 
	position: absolute;
	margin-left: 35vw; 
	height: 30vh;
	width: auto;
	animation-duration: 5s;
  animation-name:cargando ;
  animation-iteration-count: 1;
  animation-direction: alternate; 

}

#snippet img#carga {
border:2px solid white; 
border-radius: 50%;



}
#carga2{ 
	opacity: 0;

 } 
@keyframes cargando { 
0% { 
		opacity:0; 
		transform: rotate(0deg);
		

 } 
 50% { 
 	transform: rotate(180deg);
 	opacity: .;
 	 }

 100% { 
 	/* opacity: 1;*/  
 	opacity: 1; 
 	transform: rotate(0deg);

 	 
 }
}


 /*INFORMACION EXPANDIDA SERVICIOS*/
#seccion-servicios .container { 
	max-width: 800px; 
	text-align: justify; }
#seccion-servicios .container-fluid { 
	padding: 0;  }
#seccion-servicios > div { 
	margin-top:40px;  
	display: flex;
	flex-wrap: wrap;
	padding: 30px;
}
#seccion-servicios > div h2 {
	color: white;
	text-align: left;
} 
#seccion-servicios .olas-svg { 
height:100px; 
}
#seccion-servicios .vector-logos .container-fluid  {
	background-color: #273c75; 
	color:white;
	padding: 30px;
	 }

#seccion-servicios .diseno { 
	background-color:#2c3e50;
	color:white;
	padding: 20px;
	background-image: url("images/d-logos.jpg");
	background-size: cover; 
	background-position: center;
	background-attachment: fixed;
	margin: 0;
	
	  }
#seccion-servicios .diseno .container-fluid { 
	background-color: rgba(0,0,0,.40);
	padding: 10px;
	


	 }
#seccion-servicios .diseno-logos{
	margin-top:20px;

}
#seccion-servicios .aplicacionesweb .container-fluid{
	background-color: #487eb0;
	padding: 30px;
}

#seccion-servicios .enlace-cotizacion { 
width: 50%; 
text-decoration: none; 
cursor: pointer; 
background-color: silver; 
color:white;
display: block;
text-align: center;
margin: auto; 
padding: 1rem;
font-weight: bold; 
 }
 #seccion-servicios .enlace-cotizacion:hover {

 	background-color: ; 
 	color:;  
  }
#seccion-servicios .branding { 
	background-color: #192a56;
	color: white;
	padding: 30px;
	margin: 0;

	 }