*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	box-sizing:border-box;
}

body{
	overflow-x: hidden;
	background:#222222;
	font-family: "Ubuntu",sans-serif;
}

ul, ol{
	padding: 0;
}

a:visited, a:link, a:focus, a:hover, a:active{
	list-style: none;
	text-decoration: none;
}

/*================================
=            INGRESO             =
================================*/

#backIngreso{
	position:relative;
	height:100vh;
	background:linear-gradient(rgba(0,0,150,1), rgba(0,100,200,1));
}

form#formIngreso{
	position:absolute;
	border-radius:5px;
	box-shadow:0px 0px 10px #001;
	width:300px;
	height:auto;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-115px;
	background:#eee;
	padding:0px 20px 10px 20px;
}

form h1#tituloFormIngreso{
	display:block;
	width:100%;
	text-align:center;
	font-size: 14px;
	line-height:50px;
	background:#333;
	color:white;
}

form input.formIngreso{
	margin:10px auto;
}

/*=============================================
INICIO 
=============================================*/

.enlacesInicio{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
}

.botonesInicio{
	display:flex;
	justify-content:center;
	align-items:center;
}

.botonesInicio a{
	width:100%;
}

.botonesInicio div{
	text-align:center;
	padding:50px;
}

.botonesInicio div span{
	margin-top: 15%;
	font-size:40px;
	color:white;
	padding:15%;
}

.botonesInicio div p{
	font-size:15px;
	color:white;
}

.visitaVisible{
	display:visible;
}

.visitaOculta{
	display: none;
}


/*=============================================
CLIENTES        
=============================================*/
.zonas{
	margin: 0;
	padding: 0;
}
.titulo{
	background: #222222;
	padding-bottom: 10px;		
}

.title{
	color:#eeeeee;
	padding-bottom: 20px;
}

.fila{
	margin: 0px;
	padding:10px;
}

label{
  color:#fff;
}


#agragarNuevaVisita .campos{
	margin-left: 0px;
	margin-right: 0px;
}

.fila:nth-child(even){
	background: #dddddd;
}

.fila:nth-child(odd){
	background: #aaaaaa;
}
.columna-title{
	margin: 0;
	padding: 10px;
	color: #222222;
	font-weight: 800;
}

.columna{
	margin:0;
	padding:10px;
	color:#222222;
}

.columna-in{
	color:#444444;
}
.columna-cliente, .columna-cliente a{
	color:#eeeeee;
}
.columna .name{
	color:#000;
	font-weight: 800;
	text-transform:uppercase;
}

.observaciones{
	border:2px solid #fff;
	min-height:100px;
	padding:10px;
}

.separadorDos{
	border:4px solid #fff;
	width:60px;
	display:block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:40px;

}

.backColor,.backColor a{
	background: #222222;
	color:#fff;
	
}
.arriba{
   padding-top: 10px;
}
.abajo{
	display: none;
	padding-bottom:10px;
}

#btnZonas{
	line-height: 40px;
	font-size: 16px;
}
#btnZonas p span i{
	cursor: pointer;
	margin-left: 10px;
}
#zonas{
	padding-top: -10px;
}
.paginacion{
	display: flex;
	justify-content:center;
	align-items:center;
}

.previsualizarCliente{
	width:100px;
	height:100px;
}

.footer{
	padding:20px 0px;
	color:#dddddd;
}



/*=============================================
BOTONERA          
=============================================*/

/*Logotipo*/ 

#logo{
	padding:20px;
}


.botones{
	width:100%;	
	/*padding: 0;
	margin: 0*/;
} 
.botones button{
	margin-right: 20px;
	color:#222222;
}
.botones button a{
	margin-right: 20px;
	color:#222222;
}

.btn-warning{
	color:#222222;
}

/*Botonera*/
.botonera{
	margin: 0;
	padding: 0;	
}

#botonera ul li{
	width: 100%;
}

#botonera ul li a {
	color:#fff;
	width:100%;
}
#botonera ul li:hover a {
	color:#000;
}
#botonera ul li:hover {
	background: #fff;
}
#botonera ul li a span{
	margin-right: 10px;
}

/*=============================================
CABEZOTE
=============================================*/
.cabezote{
    padding:15px;
    background: #222222;
}
.zonaAvisos{
	display:flex;
}

#cabezote #admin{
	display:none;
}
.fechaReloj{
	color: #eee;
}
.perfil{
	color:#eee;
}
.flecha{
	padding-right: 20px;
}


/*=============================================
BIENVENIDA
=============================================*/
.jumbotron{
	display:flex;
	justify-content:center;
	align-items:center;
}

/*=============================================
SCROLL UP
=============================================*/
#scrollUp{
	bottom: 20px;
	right: 20px;
	width: 25px;
	height: 25px;
	background: url(../img/plantilla/flecha.jpg);
}

/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width:1200px){

	/*fecha y hora*/

	#time{
		font-size:12px;
		padding-top:15px;
	}

	/*Columna 1*/

	#col1{
		background: black;
		height:auto;
	}

	/*Cabezote*/
	/*.cabezote{
		padding: 15px;
	}*/

	.cabezote ul li{
		list-style: none;
		margin:5px;
		width:35px;
		height:35px;
		text-align:center;
		line-height:35px;
		border-radius: 50%;
		font-size:16px;
		color:white;
		cursor: pointer;	
	}

	.perfil{
		display:flex;
		justify-content:flex-end;
		padding: 0;

	}

	#cabezote img{
		width:40px;
		height:40px;
		margin:5px;
	}

	#cabezote #admin{
		position:absolute;
		top:65px;
		right:-10px;
		text-align:left;
		padding:15px;
		width:60%;
		font-size:12px;
		border:1px solid #aab;
		background:white;
		box-shadow:0px 0px 2px #999;
		z-index: 10;
			
	}

    #cabezote #member{
    	
    	position: relative;
    	top:10%;
    }
	#cabezote #member span{
		cursor:pointer;
		position: relative;
		top:20px;
		right: 37%;
	}

	#cabezote #admin li{
		height:25px;
		line-height: 25px;
		text-decoration: none;
		list-style:none;
	}

	#cabezote #admin li span{
		margin-right:10px;
	}

}

/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/

@media (max-width:1199px) and (min-width:992px){

  	/*fecha y hora*/

	#time{
		font-size:12px;
		padding-top:15px;
	}

	/*Columna 1*/

	#col1{
		background: black;
		height:auto;
	}

	/*Cabezote*/

	#cabezote ul li{
		list-style: none;
		margin:5px;
		width:35px;
		height:35px;
		text-align:center;
		line-height:35px;
		border-radius: 50%;
		font-size:16px;
		color:white;
		cursor: pointer;	
	}

	.perfil{
		display:flex;
		justify-content:flex-end;
		padding: 0;

	}

	#cabezote img{
		width:40px;
		height:40px;
		margin:5px;
	}

	#cabezote #admin{
		position:absolute;
		top:65px;
		right:-10px;
		text-align:left;
		padding:15px;
		width:60%;
		font-size:12px;
		border:1px solid #aab;
		background:white;
		box-shadow:0px 0px 2px #999;
		z-index: 10;
			
	}

   #cabezote #member{
    	
    	position: relative;
    	top:10%;
    }
	#cabezote #member span{
		cursor:pointer;
		position: relative;
		top:20px;
		right: 37%;
	}

	#cabezote #admin li{
		height:25px;
		line-height: 25px;
		text-decoration: none;
		list-style:none;
	}

	#cabezote #admin li span{
		margin-right:10px;
	}

}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

@media (max-width:991px) and (min-width:768px){

    /*fecha y hora*/

	#time{
		font-size:12px;
		padding-top:15px;
	}

	/*Columna 1*/

	#col1{
		background: black;
		height:auto;
	}

	/*Cabezote*/

	#cabezote ul li{
		list-style: none;
		margin:5px;
		width:35px;
		height:35px;
		text-align:center;
		line-height:35px;
		border-radius: 50%;
		font-size:16px;
		color:white;
		cursor: pointer;	
	}

	.perfil{
		display:flex;
		justify-content:flex-end;
		padding: 0;

	}

	#cabezote img{
		width:40px;
		height:40px;
		margin:5px;
	}

	#cabezote #admin{
		position:absolute;
		top:65px;
		right:-10px;
		text-align:left;
		padding:15px;
		width:60%;
		font-size:12px;
		border:1px solid #aab;
		background:white;
		box-shadow:0px 0px 2px #999;
		z-index: 10;
			
	}

    #cabezote #member{
    	
    	position: relative;
    	top:10%;
    }
	#cabezote #member span{
		cursor:pointer;
		position: relative;
		top:20px;
		right: 37%;
	}

	#cabezote #admin li{
		height:25px;
		line-height: 25px;
		text-decoration: none;
		list-style:none;
	}

	#cabezote #admin li span{
		margin-right:10px;
	}


}
/*=============================================
MOVIL (XS revisamos en 768px)
=============================================*/

@media (max-width:768px) and (min-width:330px){

	.logotipo{
		margin-top: 15px;
	}

	  /*fecha y hora*/

	#time{
		font-size:12px;
		padding-top:15px;
	}

	/*Columna 1*/

	#col1 {
		background: black;
		height:auto;
	}

	/*Cabezote*/
	.filaCabezote{
		display:flex;
		flex-wrap:wrap;
	}

    .fechaReloj{
    	order:-1;
    	margin-bottom: 10px;
    }

	.cabezote ul li{
		list-style: none;
		margin:5px;
		width:35px;
		height:35px;
		text-align:center;
		line-height:35px;
		border-radius: 50%;
		font-size:16px;
		color:white;
		cursor: pointer;	
	}

	.perfil{
		display:flex;
		justify-content:flex-end;
	}

	#cabezote img{
		width:40px;
		height:40px;
		margin:5px;
	}

	#cabezote #admin{
		position:absolute;
		top:50px;
		right:10px;
		text-align:left;
		padding:15px;
		width:200%;
		font-size:11px;
		border:1px solid #aab;
		background:white;
		box-shadow:0px 0px 2px #999;
		z-index: 10;
			
	}

    #cabezote #member{   	
    	position: relative;
    	top:10%;
    }
	#cabezote #member span{
		cursor:pointer;
		position: relative;
		top:30%;
		right: 30%;
	}

	#cabezote #admin li{
		height:25px;
		line-height: 25px;
		text-decoration: none;
		list-style:none;
	}

	#cabezote #admin li span{
		margin-right:10px;
	}

	.jumbotron h1{
		font-size: 20px;
	}

	.inicio{
		margin: 0;
		padding: 0;
	}

	.enlacesInicio{
	display:flex;
	flex-wrap:wrap;

	}

	.botonesInicio{
		display:flex;
		/*justify-content:space-around;*/

	}

	.botonesInicio a{
		width:100%;
	}

	.botonesInicio div{
		text-align:center;
		padding:5px;
	}

	.botonesInicio div span{
		margin-top: 15%;
		font-size:20px;
		color:white;
		padding:15%;
	}

	.botonesInicio div p{
		font-size:15px;
		color:white;
	}

	/*Clientes*/
	.principio{
		margin: 0;
		padding: 0;
	}

	.titulo{
		/*display: none;*/
	}
	.tituloClientes{
		background: #eee;
	}
	.cajaDerecha{
		margin: 0;
		padding: 0;
	}

}	




/*=============================================
MOVIL (XS revisamos en 320px)
=============================================*/

@media (max-width:329px){

	.logotipo{
		margin-top: 15px;
	}

	  /*fecha y hora*/

	#time{
		font-size:12px;
		padding-top:15px;
	}

	/*Columna 1*/

	#col1 {
		background: black;
		height:auto;
	}

	/*Cabezote*/
	.filaCabezote{
		display:flex;
		flex-wrap:wrap;
	}

    .fechaReloj{
    	order:-1;
    	margin-bottom: 10px;
    }

	.cabezote ul li{
		list-style: none;
		margin:5px;
		width:35px;
		height:35px;
		text-align:center;
		line-height:35px;
		border-radius: 50%;
		font-size:16px;
		color:white;
		cursor: pointer;	
	}

	.perfil{
		display:flex;
		justify-content:flex-end;
	}

	#cabezote img{
		width:40px;
		height:40px;
		margin:5px;
	}

	#cabezote #admin{
		position:absolute;
		top:50px;
		right:10px;
		text-align:left;
		padding:15px;
		width:200%;
		font-size:11px;
		border:1px solid #aab;
		background:white;
		box-shadow:0px 0px 2px #999;
		z-index: 10;
			
	}

    #cabezote #member{   	
    	position: relative;
    	top:10%;
    }
	#cabezote #member span{
		cursor:pointer;
		position: relative;
		top:20%;
		right: 20%;
	}

	#cabezote #admin li{
		height:25px;
		line-height: 25px;
		text-decoration: none;
		list-style:none;
	}

	#cabezote #admin li span{
		margin-right:10px;
	}

	.jumbotron h1{
		font-size: 20px;
	}

	.inicio{
		margin: 0;
		padding: 0;
	}

	.enlacesInicio{
	display:flex;
	flex-wrap:wrap;

	}

	.botonesInicio{
		display:flex;
		/*justify-content:space-around;*/

	}

	.botonesInicio a{
		width:100%;
	}

	.botonesInicio div{
		text-align:center;
		padding:5px;
	}

	.botonesInicio div span{
		margin-top: 15%;
		font-size:20px;
		color:white;
		padding:15%;
	}

	.botonesInicio div p{
		font-size:15px;
		color:white;
	}

	/*Clientes*/
	.principio{
		margin: 0;
		padding: 0;
	}

	.titulo{
		/*display: none;*/
	}
	.tituloClientes{
		background: #eee;
	}
	.cajaDerecha{
		margin: 0;
		padding: 0;
	}
	.nuevoCliente{
		margin-right: 20px;
	}


}