@media screen and (max-width: 574px) {


			/*bodu*/
			body { 
				padding-top:80px;
				 }
				 *{

				 }

			/*H-groups*/
			h1 { 
				font-size: 1.8rem; 
			}
			h2 { 
				font-size: 1.5rem;
				 }
			h3 { 
				font-size: 1.1rem;
				 }
			h4 { 
					font-size: 1rem; 
						margin: 0;}


			/*Header*/

			.navbar-brand { 
				height: 70px;
				 }
			#header .navbar .navbar-brand img { 
				height: 70px;
				 }

			#sec { 
				height: 70px; }
			.navbar-down { 
				height: 45px; 
				-webkit-transition: all 0.3s;
			  transition: all 0.3s;
			  
			}
			#lista-barra .nav-item .nav-link {
			text-align: center; 
			height: 80px;
				 }


			#header .navbar-collapse .navbar-nav  { 
				width: 100%;
				padding-top: 20px;
				justify-content: center;

			}

			/*SECCION SERVICIOS*/

			.grid { 
				height:500px;  
				padding: 0;
				display: flex;
				flex-direction: column;

				}

				.grid figure { 
					width: 100%;

					 }
					 .info-servicios { 
					 	top:0;
					 	height: 500px;
					 	left:100vw; 
					 	overflow: scroll;
					

					 	 }
					 	 .info-servicios * { 
					 	 	text-align: left;
					 	 	
					 	 	 }
					 	 .ind-servicios { 
					 	 
					 	 	overflow: scroll;
					 	 	position: absolute;
					 	 	height: 0px;

					 	 	 }
					 	 	 .ind-servicios img {
					 	 	 width: 100%; 
					 	 	  }
					  .info-servicios .relleno-servicios { 
					  	height: auto;
					  	
					  	 }
					  	 .info-servicios .relleno-servicios .regresar { 
					  	 width: 100%;
					  	 text-align: center; 
					  	 background-color: white; 
					  	 color: black; 
					  	 margin: 0; 
					  	 border-radius: 20px 20px 0px 0px; 


					  	}
					  	.info-servicios .relleno-servicios .demo , 
						 .info-servicios .relleno-servicios .explicacion { 
				 		width: 100%;
				 		height: auto;
				 		 }
				 		 .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: 4px;
						 }
						 .info-servicios .enlace-cotizacion  { 
						 	border-radius: 0px; 
						 	background-color: blue;
						 	font-weight: bold;
						 	padding: 10px;
						 	border:0px;
						 	margin: 10px;
						 	display: block;
						 	text-align: center;

						 	 }

					  /*Secciones individuales servicios */
					 #info-a-logos .demo { 
					 	height: auto;
					 	box-sizing: border-box;
					 	 }
					 	}
					#info-d-logos .demo img { 
					padding: 5px;
					display: block;
					margin: auto;
					width: auto;
					 	 }


					figure#ancho { 
					width: 100%;
					 }


					#info-v-logos .enlace-cotizacion { 
						width: auto; 
						text-align: center;
						 }

					#info-a-logos { 
					display: block; }


			/*FORMULARIOS*/
			 .datos-personales { 
			 	width: 100%;
			 	box-shadow: none;
			 	border-radius:0px;
			 	font-size: .8rem;
			 	 }

			 	 .datos-personales ul { 
			 	 	width: 98%;
			 	 	padding: 5px;
			 	 	 }
			 	.datos-personales  .info-personal li ul#redes-sociales { 
			 		padding: 5px;
			 		flex-wrap: wrap;

			 		 }
				 .datos-personales li ul#redes-sociales li { 
				 	flex-wrap: nowrap;
				 	padding: 2px;
				 

				 }
				 .datos-personales  .info-personal li ul#redes-sociales li label   { 
				 	display: flex;
				 	margin:0;
				 	justify-content: center;


				 }
				 .datos-personales  .info-personal li ul#redes-sociales li label input   { 
				 	top:0;
				 	transition-delay: .2s;


				 }
				 .datos-personales  .info-personal li ul#redes-sociales li label input + span { 
				 	padding: 10px;
				 	font-size: 2rem;
				 	margin: 2px;

				  }
				  .datos-personales .boton-formulario { 
				  	width: 70%;
				  	margin-left: 15%;

				  	 }
				  	 .datos-personales 

				  /*VECTORIZACION DE LOGOS FORMULARIO*/
				.datos-personales .vectorizacion-formulario ul li { 
					width: 100%;
				}


			    /*FORMULARIO DISEÑO WEB */
			     li#secciones-pagina .agregar-seccion {
				
				

			}
			/*Formulario diseño de logos */
			.lista-checkboxes ul  {
				width: 100%;
			 column-count: 1;


			 }

	 	 #contacto ul li input, #contacto ul li select  { 
			  width: 80%;
			  }

}

@media (min-width: 576px) { 


}


@media (min-width: 768px) { ... }

@media (min-width: 992px) { ... }


@media (min-width: 1200px) { ... }