/*Estilos logotipo de la aplicacion*/

.logo_leyenda

    {
        position: absolute;

        top: 50%;
        left: 50%;
 
        width: 225px;
        height: 225px;
    
        margin:-113px 0 0 -113px;
    }



.fondo_burbujas_360_logo

    {
/*
        position: absolute;

        top: 50%;
        left: 50%;
 
        width: 326px;
        height: 326px;
    
        margin:-163px 0 0 -163px;
*/
        -webkit-animation:spin 30s linear infinite;
        -moz-animation:spin 30s linear infinite;
        animation:spin 30s linear infinite;
    }



@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }



/*...............................................................................................................*/



@font-face

    {
       font-family: 'Austin-Pen_editada';
       src: url('../fonts/Austin-Pen_editada.ttf'); 
    }



@font-face

    {
       font-family: 'GreatVibes-Regular';
       src: url('../fonts/GreatVibes-Regular.ttf'); 
    }



@font-face

    {
       font-family: 'Questrial-Regular';
       src: url('../fonts/Questrial-Regular.ttf'); 
    }



@font-face

    {
       font-family: 'Typo-Hoop_Regular_punto';
       src: url('../fonts/Typo-Hoop_Regular_punto.ttf'); 
    }



html,body

	{
/*
		background-image: url(../imgs/nodos.png);

		background-repeat: no-repeat;

		background-size:100% 100%;
*/	
		background-image: radial-gradient(#fff, #fff, #cbcbcb, #b2b2b2, #666);

		/*background-image: url(../imgs/fondo.jpg);*/

		margin:0px;

		height:100%;

		width:100%;

		font-family: Questrial-Regular; 

		font-size:18px;
	}


    
textarea 

	{
	    resize: none;
	}



/*Para que en los inputs estén centrados todos placeholder en toda la aplicación*/

::-webkit-input-placeholder 

	{
		text-align: center;
	}



:-moz-placeholder 

	{  
		/* Firefox 18- */
	    text-align: center;  
	}



::-moz-placeholder 

	{  
		/* Firefox 19+ */
		text-align: center;  
	}



:-ms-input-placeholder 

	{  
	   text-align: center; 
	}



/*Para que los placeholder de los inputs tengan un color concreto*/

::placeholder 

	{ 
		/* Chrome, Firefox, Opera, Safari 10.1+ */
	    color: #4f555c !important;
	}



:-ms-input-placeholder 

	{ 
		/* Internet Explorer 10-11 */
	    color: #4f555c !important;
	}



::-ms-input-placeholder 

	{ 
		/* Microsoft Edge */
	    color: #4f555c !important;
	}



.tooltip 

	{
		color: #95782a !important;

		font-family: Typo-Hoop_Regular_punto; 

		font-size:16px;
	}



/*LOGO / FORMULARIO LOGIN....................................................*/

.contenedor_formulario_login

	{
		/*
		Sirve para que cuando se carga el index o se cierra sesión, 
		el logo reaparezca con un fadeIn usando jquery
		*/
		display: none; 

		height: 100%;

		width: 100%;
	}

	

.contenedor_logo

	{
		position: absolute;	

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%); 
	}



.mano

	{
		position: absolute;	

        left: 100%;
        top: 87%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%); 
	}



.formulario_login

	{
		/*background-color: #ff0000; opacity: 0.5;*/
	
		position: relative;	

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);

		height: 275px; 

		/*width: 315px;*/

width: 595px;	

		padding-top: 45px;
/*		
        padding-left: 45px;
        padding-right: 45px;       
*/
padding-left: 45px;
padding-right: 45px;

        text-align: center !important;
	}



.dni_usuario

	{
		margin-top: 37px;

padding-left: 140px;
padding-right: 140px;			
	}



.clave_usuario

	{
		margin-bottom: 55px;

padding-left: 140px;
padding-right: 140px;			
	}



.contenedor_empresas_posicion

	{
		/*guia background-color: #ff0000; opacity: 0.7;*/

		/*width: 280px;*/

padding-left: 10px; 

padding-right: 10px;

/*border:3px solid #666;*/

width: 560px;

height:350px;

		margin-left: 30px;
/*
		padding-left: 25px;

		padding-right: 25px;
*/
	}



.empresas_posicion

	{
		margin-bottom: 5px;	
	}



.area_scroll_empresas

	{


		/*guia background-color: yellow; opacity: 0.5;*/

		margin-top: -50px; 

		padding-top: 50px; 

		/*width: 285px;*/ 

width: 565px;

		height: 200px; 
	} 



.empresa_elegida

	{
		border-radius: 10px;

		border: 3px solid #cec8c0;

		font-weight: bold;

		text-align: center; 

		color: #95782a;

		font-size: 16px; 

		/*color: #2f76ff;*/		
	}



.empresa_elegida:focus

	{
		border: 3px solid #cec8c0;	

		color: #95782a;



		/*
		Las siguientes 2 líneas son para que al hacer clic no 
		aparezca un remarcado azul que da bootstrap
		*/

		-webkit-box-shadow: none;

    	box-shadow: none;	
	}



.email, .password

	{
		border-radius: 30px;

		border: 3px solid #cec8c0;

		font-weight: bold;

		text-align: center;
	}



.email:focus

	{
		border: 3px solid #cec8c0;	

		/*
		Las siguientes 2 líneas son para que al hacer clic no 
		aparezca un remarcado azul que da bootstrap
		*/

		-webkit-box-shadow: none;
		
    	box-shadow: none;	
	}



.password:focus

	{
		border: 3px solid #cec8c0;	

		/*
		Las siguientes 2 líneas son para que al hacer clic no 
		aparezca un remarcado azul que da bootstrap
		*/

		-webkit-box-shadow: none;
		
    	box-shadow: none;	
	}


/*
.nombre_completo

	{ 		
		font-family: Questrial-Regular;

		font-size: 16px; 

		font-weight: bold;
	}
*/



/*Sombra para el email y el password*/

.sombra_base_email, .sombra_base_password

	{
		width:90%;		
	}



.sombra_base_email, .sombra_base_password, .sombra_base_empresa_elegida

	{
		position:relative;
		float:left;
		padding:5px;
		background:#fff;

		-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
				box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	}



.sombra_base_email:before, .sombra_base_email:after 

	{
		content:"";
		position:absolute;
		z-index:-2;
	}



.sombra_base_password:before, .sombra_base_password:after 

	{
		content:"";
		position:absolute;
		z-index:-2;
	}



.sombra_elevada

	{
		-moz-border-radius:30px;
			 border-radius:30px;

		-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		   -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
				box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	}



.sombra_elevada_empresa_elegida

	{		
		border-top-left-radius:10px;
		border-bottom-left-radius:10px;

		border-top-right-radius:10px;
		border-bottom-right-radius:10px;

		-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		   -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
				box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

		margin-top: 5px;

		margin-bottom: 10px;
	}



/*NAVBAR-PRICIPAL..............................................................*/

.navbar_principal

	{
		display:none;	

		/*background-color: #2e2e2e !important;*/

		background-image: linear-gradient(#0f0f0f, #2e2e2e, #2e2e2e, #2e2e2e, #2e2e2e, #2e2e2e, #2e2e2e); 
	}



.navbar_principal_segun_modulo

	{
		/*background-color: #2e2e2e !important;*/

		background-image: linear-gradient(#0f0f0f, #2e2e2e, #2e2e2e, #2e2e2e, #2e2e2e, #2e2e2e, #2e2e2e);
	}



@media screen and (min-width:1025px) and (max-width:3000px) 

	{
		.navbar_principal

			{
				/*
				Con esto la altura del navbar se mantiene ya que la primera letra del 
				titulo de la empresa ensancha mas el navbar_principal.

				Y he usado "media screen", para que cuando se despliegue el menú 
				en una tablet o movil, se pueda desplegar el menú, sino no se puede
				*/				
				height: 63px !important; 
			}



		.navbar_principal_segun_modulo

			{
				/*
				Con esto la altura del navbar se mantiene ya que la primera letra del 
				titulo de la empresa ensancha mas el navbar_principal.

				Y he usado "media screen", para que cuando se despliegue el menú 
				en una tablet o movil, se pueda desplegar el menú, sino no se puede
				*/				
				height: 63px !important; 
			}


		/*
		EL titulo_empresa se mete aquí para que no sube y baje en su posicionamiento 
		según sea navbar_principal_segun_modulo o navbar_principal
		*/
		.titulo_empresa

			{
				color: #95782a !important;

				font-family: Typo-Hoop_Regular_punto; 

				font-size:22px;

				letter-spacing: 2px;

				margin-top: 0px !important;				
			}


		/*
		EL titulo_emrpesa se mete aquí para que no sube y baje en su posicionamiento 
		según sea navbar_principal_segun_modulo o navbar_principal
		*/
		.titulo_empresa_segun_modulo

			{
				color: #95782a !important;

				font-family: Typo-Hoop_Regular_punto; 

				font-size:22px;

				letter-spacing: 2px;

				margin-top: 6px !important;
			}


	}


@media screen and (min-width:240px) and (max-width:1024px) 

	{
		.titulo_empresa

			{
				color: #95782a !important;

				font-family: Typo-Hoop_Regular_punto; 

				font-size:22px;

				letter-spacing: 2px;

				margin-top: 0px !important;				
			}



		.titulo_empresa_segun_modulo

			{
				color: #95782a !important;

				font-family: Typo-Hoop_Regular_punto; 

				font-size:22px;

				letter-spacing: 2px;
			}
}


.nav-link:hover

	{
		color: #95782a !important;
	}



.sombra_elevada_navbar_principal

	{		
		-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		   -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
				box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	}



.primera_letra_titulo_empresa

	{
		font-family: GreatVibes-Regular;

		font-size: 27px; 

		font-weight: bold;
	}



.menu_posicionado_derecha

	{
		float:right !important;
	}



/*VERSIÓN.................................................................................*/
/*
.version 

	{ 

		position: absolute; 

		bottom: 0px; 

		right: 0; 

		padding-right: 50px; 

		padding-bottom: 30px;
	}



.tipografia_version

	{
		font-family: Austin-Pen_editada; 

		font-size: 28px;

		font-weight: bold;

		letter-spacing: 1px;	

		color: #2e2e2e;		
	}



.tipografia_numero

	{
		font-family: GreatVibes-Regular; 

		font-size: 30px;	

		font-weight: bold;	

		color: #2e2e2e;
	}
*/