/* cssCustomizadoCliente.css. Hoja de estilos para que el cliente ajuste determinados estilos según su preferencia */

/*---------------------------
      Colores Básicos
---------------------------*/
/*
    color-blanco:#fff; - relleno de paneles y cabecera;
    color-negro:#000; - texto;
    color-gris1:#EAE8E3; - relleno;
    color-gris2:#3F3F3F; - texto;
    color-gris3:#8C8C8C; - borde;
    color-gris4:#D8D8D8; -  borde, relleno panel ".columnaDerecha.portadaEMI .bloque";
*/

/*---------------------------
      Colores Secundarios
---------------------------*/
/*
    color-azul:#372E95; - botones, pestañas, links, hover de inputs;
    color-azul-light: #4B4395; - cabeceras de paneles y de contenedores de trámites;
    color-amarillo:#FFD040; -  botón "Modificar Datos";
    color-rojo:#ED0046; -  botón "borrar", link "Identificate" 
    color-verde:#1BA395;- borde de justificante;
    color-naranja: #FFA600; - botón "back-to-top";
*/


/**********************************************************************************
    Caso #3: con Imagen pequeña - con escudo a la izquierda - con Titna 1 y 2 

              Tamaño de Imagen (máximos): 480x320 px;  
      
              Height Escudo: máximo 180 px;
***********************************************************************************/

.cabecera {
    background-image: url(../img/cabecera2.jpg);
    background-size: 480px auto;
}

.cabecera .cabTitulo span.titna1 {
    color: #ED0046;
    display: none;
    font-weight: normal;
    font-size: 13px;
    /*left: 0;
    top: 0;*/
}

.cabecera .cabTitulo span.titna2 {
    color: #372E95;
    display: none;
    font-weight: normal;
    font-size: 28px;
    /*left: 0;
    top: 0;*/
}

/*Escudo*/
.cabecera .logo a {
	background: transparent url(../img/escudo.jpg) top left no-repeat;
	width: 280px;
	height: 80px;
    padding: 5px 20px;
}

.cabecera img {
    width: auto;
}

/*----------------------------------------------------------------------------------------------------------------
                                             MEDIA QUERIES - 1366px
-----------------------------------------------------------------------------------------------------------------*/
/*max-width 960px*/
@media (max-width: 960px) {

    .cabecera {
        background-image: url(../img/cabecera2.jpg);
        background-size: 350px auto;
    }

    .cabTitulo {
        margin-left: 50px;
        top: 0;
    }

    /*Escudo*/
    .cabecera .logo a {
        display: inline-block;
    }

    .cabecera .logo a img {
        padding: 5px 20px;
    }

    .cabecera img {
        width: auto;
    }

}

/*max-width 600px*/
@media (max-width: 600px) {

    .cabecera {
		background-image: none;
        background-size: 100%;
    }

    .cabecera .logo {
		top: 0;
    }

    .cabecera .cabTitulo span.titna2 {
        color: #EAE8E3;
        /*top: 0;*/
        font-size: 20px;
    }

}


/*max-width 414px*/
@media (max-width: 414px) {

	.cabecera {
		background-image: none;
		background-size: 100%;
	}

	.cabecera .cabTitulo span.titna1 {
		color: #EAE8E3;
		top: 20px;
	}

    .cabecera .cabTitulo span.titna2 {
        color: #fff;
        font-size: 16px;
    }

    /*Escudo*/
    .cabecera .logo {
        top: 0;
    }
    
	.cabecera .logo a {
        display: inline-block;
    }
    
	.cabecera .logo a img {
        padding: 5px 20px;
    }

    .cabecera img {
        width: auto;
    }

}