body {
	/*overflow-x: hidden;*/
	margin:0 auto;
}

 
/* ESTILO DE LA PAGINA PRINCIPAL */
#principal {
    /*transition: margin-left .5s;*/
    /*overflow:auto;*/
    width:100%;
    max-width:100%;
}

#ico{
  display: none;
}
 
/*Capa contiene la imagen de portada*/
#encabezadoImg{
	/*Borra la secuancia de otras capas*/
	clear:both;
	
	/*Ocupa el ancho máximo del navegador*/
	max-width:100vw; 
	
	/*Centra*/
	margin:0 auto;
	
	/*Para que no aparezca la barra de deslizamiento*/
	overflow:hidden;
	
	/*Para que ocupe máximo todo el alto de la página*/
	max-height: 100vh;

	/*border: 1px solid blue;*/
}

/*Capa contiene la imagen de portada, está dentro de "encabezadoImg"*/
#imagenPrincipal{
	/*Borra la secuancia de otras capas*/
	clear:both;
	
	/*Ancho automatico, se ajusta al ancho de la capa padre*/
	width:auto;
	
	
	/*Para que no aparezca la barra de deslizamiento*/
	overflow:hidden;

	/*border: 1px solid red;*/
}

/*Es la imágen de portada*/
#imagenPrincipal img {
	/**El ancho máximo solo puede llegar a ser del 100%*/
	max-width: 100%;
	
	/*El alto es automático para que sea relativo*/
	height: auto;
	
	/*Le decimos que cubra el ancho de la capa padre*/
	width:100%;
	
	/*Le decimos que se vaya debajo de las demás capas*/
	z-index: -2;
}

/*Capa que contiene el texto que flota y se pega al borde superior o inferior*/
#encabezado{
	clear:both;
	position: -webkit-sticky;
	position: sticky;
	top: 5px;
	bottom: 5px;
	padding: 5px;
	background-color: #000;
	color:#0C0;
	text-align:center;
	font-family: 'Anton', sans-serif;
	font-size:250%;
	z-index: 1;
	background:rgba(0,0,0,0.8);
	text-shadow: 1px 1px 10px #000;
	cursor:pointer;
}

/*Número de teléfono*/
#encabezadoTelefono{
	/*clear:both;*/
	width:100%;
	/*top: 5px;
	bottom: 5px;*/
	padding: 5px;
	background-color: blue;
	color:#fff;
	text-align:center;
	font-family: 'Anton', sans-serif;
	font-size:250%;
	z-index: 2;
	/*cursor:pointer;*/
}

#contenedorMensajeWhatsapp{
	width:100%;
	text-align:center;
}

#mensajeWhatsapp{
	margin:0 auto;
	width:600px;
	max-width:100%;
	padding:10px;
	font-family: 'Livvic', sans-serif;
	font-size:100%;
    text-align: center;
	color:blue;
	border-radius:25px 0 25px 0;
	border: solid 5px  green;
}

#encabezadoTelefono a{
	text-decoration:none;
}

#encabezadoTelefono a:hover{
	color:yellow;
}

/*Capa que sirve para crear un espacio vacío entre dos capas*/
.separador{
	height:50px;
	width:100%;
	clear:both;
	float:left
	clear:both;
}


/********************************** INICIA CONTACTO ******************************************************/

#n1{
    padding: 10px;
	background-color:#DFF;
}


#n1 p, li{
	font-family: 'Livvic', sans-serif;
	text-align:justify;
	font-size:150%;
}

#n1 li{
	float:left;
	margin:5px;
    list-style-type:none;
    height:auto;
	width:250px;
	color:purple;
	background-color:#FFD;
    cursor:pointer;
	margin-top: 2px;
	padding:2px 5px 2px 5px;
	/*background:rgba(0,0,0,0.7);*/
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
	border-radius: 10px 0px 10px 0px;;
	border: 2px solid purple;
	text-align:center;
}

.noticia{
	/*float:left;*/
	margin: 50px 0 50px 0;
}

.noticia p{
	border-left:solid #F00 15px;
	background-color: #FFD;
	padding:10px;
	box-shadow: 0 0 10px #000;
	font-size:200%;
}

/********************************** GALERIA VIDEOS ******************************************************/
#n2{
	padding: 20px 0 20px 0;
	float:left;
	clear:both;
    background-color:#000;
	color:coral;
	text-align:center;
	margin: 50px 0 50px 0;
	max-width: 100%;
}

#videos iframe, #videos object, #videos embed {
	/*position: absolute;*/
    margin: 10px;
	height: 315px;
	width: auto;
	max-height: 100%;
	max-width: 100%;
}


/********************************* INICIA FOTOS *******************************************/
#fotos{
	clear:left;
	padding-top:15px;
	padding-bottom:25px;
	background-color:#000;
	color:#fff;
	height: auto;
	text-align:center;
}

#fotos .container, #GaleriaFotos{
	/*height: 90%;*/
}


#GaleriaFotos .carousel-inner, #GaleriaFotos .item {
	height: 100%;
}

#GaleriaFotos img {
	margin:0 auto;
    max-width: 100%;
    max-height: 100%;
}

#configFotos{
    background-color:#FFC;
    //float:left;
    border: 3px outset #cccccc;
    /*height:125px;*/
    text-align:center;
    margin: 5px;
    padding: 5px;
}

#admon #configFotos a {
    color : #000;
}
/********************************* TERMINA FOTOS *******************************************/



/***********************************************************************************************************
****************************************** LISTA DE SERVICIOS *******************************************************
************************************************************************************************************/	


#n4{
	/*float:left;*/
	/*width:98%;*/
	padding: 10px;
	clear:both;
}

#n4 h2{ /*TITULO DE LA SECCION*/
	clear:both;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #0099FF;
	color:#FFF;
	font-size: 200%;
}

#n4 ul{
	/*box-shadow: 1px 1px 1px #000;*/
	/*margin-left: 20px;*/
	text-align:center;
}


#n4 li{
	/*float:left;*/
	margin:10px;
	padding: 10px;
    height:auto;
	width:auto;
    list-style-type:none;
	color: #000;
	background-color: #9FF;
    cursor:pointer;
	/*background:rgba(0,0,0,0.7);*/
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
	border-radius: 10px 0px 10px 0px;;
	border: 2px solid purple;

	font-family: 'Livvic', sans-serif;
	font-size:100%;
	
	display:inline-table;
}

/* ------------------------------------------------------- COMENTARIOS -----------------------------------------------------*/

#n5{
	/*padding: 0 10px 10px 10px;*/
	clear:both;
	background-color:#DFF;
}

#n5 h2{
	clear:both;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #0099FF;
	color:#FFF;
	font-size:200%;
}

#n5 h3{
	text-align:center;
}

#contactoFormulario #boton{
	clear: left;
    text-align: center;
}

#contactoFormulario #cc{ /* CAMPO PARA EL CAPTCHA */
	width: 200px; 
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> BARRA DE BOTONES REDES Y CONTACTO >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.ContenedorbarraContacto{
    /*Define que está en una posición fija*/
	position:fixed;
	
	/*Define que está pegada a la parte de abajo*/
    bottom:0px;
	
	/*Ancho total del contenedor*/
    width:235px; 
    
	/*Tamaño que está escondido, si se pone mayor número negativo, se esconte más*/
	right:-150px;
	
	/*Indice de visibilidad, si es mayor, estará sobre otras capas*/
	z-index: 2;
}
.barraContacto li{
    list-style-type:none;
    height:53px;
    cursor:pointer;
	background:rgba(0,0,0,0);
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}

.barraContacto li:hover{
	/* El tamaño que sale desde la derecha, si es menor, sale menos*/
    margin-left:-105px; 
	
	/* Se convierte en transparente*/
	background:rgba(0,0,0,0); 
}

.barraContacto li img{ 
	/*Espacio que tienen las imagenes de margen*/
    margin:5px 3px 3px 3px; 
	
	/*Flotar a la izquierda*/
    float:left;
}

.barraContacto #logo{
	float:left;
	width:45px;
	background:rgba(0,0,0,0.9);
	border-radius: 50% 0% 0% 50%;
    height:53px;
}

.barraContacto .logo_Contenido{
	float:left;
	width:110px;
	height:100%;
	display: block;
    background-color:gray;
	text-align:center;
}

.barraContacto .logo_Contenido a{
	color: yellow;
    text-decoration:none;
	font-weight:bold;
	text-shadow: 1px 1px 2px #000;
	font-size:15px;
}

.barraContacto li p{
    padding-top:7px;
	margin:0px;
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< BARRA DE BOTONES REDES Y CONTACTO <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<</
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

#contactoDatos{
	background-color:#000;
}

#contactoDatos h3{
	/*padding-left:20px;*/
	text-align:center;
	color:#FFF;
}


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> INICIA LISTA DE SERVICIOS  CON FOTO >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

@media only screen and (max-width: 600px) {
	.servicio{
		width: 96%;
		max-width:96%;
		/*border: solid 1px  red;*/
	}
	div.encabezado{
		font-size:150%;
	}
}

@media only screen and (min-width: 601px) and (max-width: 1000px) {
	.servicio{
		width: 46%;
		min-width:46%;
		max-width:46%;
		/*border: solid 2px  blue;*/
	}
	div.encabezado{
		font-size:200%;
	}
}

@media only screen and (min-width: 1001px) and (max-width: 1500px) {
	.servicio{
		width: 22%;
		max-width:22%;
		/*border: solid 2px  green;*/
	}
	div.encabezado{
		font-size:250%;
	}
}

@media only screen and (min-width: 1501px){
	.servicio{
		width: 15%;
		min-width:15%;
		max-width:15%;
		/*border: solid 2px  coral;*/
	}
	div.encabezado{
		font-size:300%;
	}
}

.tituloServicio h2{
	clear:both;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #0099FF;
	color:#FFF;
	font-size:200%;
}

.contenedorServicio{
	text-align:center;
	width:100%;
	max-width:100%;
}

.servicio{
	margin: 10px;
	/*width: 400px;*/
	background-color: #FFF;
	display:inline-table;
	box-shadow: 0px 0px 5px #555;
	
}

.servicio img{
	width:100%;
}

.servicioDescripcion{
	padding: 10px;
	font-size: 15px;
}



/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< TERMINA LISTA DE SERVICIOS <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<</
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/