/* ROOT */
:root {

  --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

	--cuerpoweb: #f3f4f5;
	--aavv: #b6d531;  /*verde*/
	--cabecera: white;
	--lan: white;
	--texto: black;
	--titulos: black;
	--titulo_claro:#343a40;
	--titulo_dif: #007bff;
	--enlaces: #354CC2;
	--enlaces_hover: #8B0000;
}

/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, 
h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, 
cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, 
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, 
dd, ol, ul, li, fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td { 
	margin: 0; 
	border: 0; 
	padding: 0; 
	background: transparent; 
	vertical-align: 
	baseline; outline: 0; 
	font-size: 100%; 
} 
ol, ul { list-style: none; }
:focus { outline: 0; }
/* No olvides resaltar de alguna manera el texto insertado/borrado */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* En el código HTML es necesario añadir cellspacing="0" */
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
}

body{
	width: 100vw;
	height: 100vh;
}

/*
TRABAJANDO
*/
.lan{
	width:100%;
	height: 100%;
	background-color: var(--lan);
}
.lan img {
	width: 50%;
	max-width: 500px;
	margin: 25% 0 0 25%;
}
@media (min-width: 960px)  { 
	.lan img { 
		margin: 5% 0 0 35%;
	}	
}

/*   *****  *****  *****  ****   *   *   ****  *****
/*   *      *        *    *   *  *   *  *        *
/*   *      *        *    *   *  *   *  *        *
/*   ****   *****    *    ****   *   *  *        *
/*   *          *    *    **     *   *  *        *
/*   *          *    *    * *    *   *  *        *
/*   *****  *****    *    *  *    ***    ****    *
/***********************************************************
/***********************************************************/

/* RESPONSIVE */
#responsive { height:1em;  }

/* POSICIONAMIENTO
/*---------------------------------
*/
.headweb 	{ position: relative; }

.fixed	{
	position:fixed; 
	top: 0em; 
	z-index: 2; 
	width:100%;
}

/* CAJAS
/*---------------------------------
*/
#nagusia {
	display: flex;
	flex-direction: column;
	margin: 0 auto; 
}
/***********************************************************
/***********************************************************
/***********************************************************
/*   											HEAD
/***********************************************************
/***********************************************************
/***********************************************************/

.headweb { 
	display: flex;
	flex-direction: row;	
	width:100%; 
	height: 12em;
}
#menu{
	width:30px;
	height:30px;
	z-index:2;
	background: transparent;
}
#logo{ 
	width: 70%; 
	overflow: hidden;
	z-index:1;
}
#datuak{
	display:none;
	margin-top: 30px;
}
#iconos{
	width: 30%;
	position:relative;
	right:0; 
	display: flex;
	flex-direction: column;
}

/***********************************************************
/***********************************************************
/***********************************************************
/*   											ERDIA
/***********************************************************

/***********************************************************
/***********************************************************/

#erdikoweb { box-sizing: border-box; }

.capitulo.grupo{
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	border: none;
}
.capitulo.med {
	width: 40%;
	margin: 10px auto;
}
.capitulo.grande{
	width:95%;
}
#argazki { }
#bazkide { }

.berria{
	width:95%;
	margin: 20px auto;
}

.capitulo img, .berria img {
	width:100%;
}

.berria.txiki img {
	width:40%;
	margin: 0 auto;
}

.sec_auzoa{display:none;}
.sec_argazki{display:none;}
.sec_bazkide{display:none;}
.sec_gaia{display:none;}

@media (min-width: 480px)  { 
}
@media (min-width: 592px)  { 
	#datuak{display:block;}
	#logo{ width: 50%; }
	.capitulo.med { width: 22%; } }
}	
@media (min-width: 672px)  {	
}	
@media (min-width: 768px)  { 
}	
@media (min-width: 960px)  {	
}
@media (min-width: 1200px) { 
}

/*		****   *****   ****  *   ****  *    *
/*		*	*  *      *      *  *      **   *
/*		*	*  *      *      *  *      * *  *
/*		*	*  ***     ***   *  * ***  *  * * 
/*		*	*  *          *  *  *   *  *   **
/*		*	*  *          *  *  *   *  *    *
/*		****   *****  ****   *   ***   *    * 
/***********************************************************
/***********************************************************/
#nagusia { background-color: var(--cuerpoweb);}

#responsive { background-color: #18e5f5; }

.headweb 	{ 	
	background-color: var(--cabecera);
	border-bottom: solid 10px var(--aavv);
}
.barra_menu{
	height:0;
	width:24px;
	border: solid 1.5px var(--titulo_claro);
	margin-top: 4px;
	margin-left: 3px;
}
#logo img{ 
	width: 70%;
	max-width:300px;	
	margin: 20px auto;
}
#lang{
	margin-top: 12px;
	margin-right: 40px;
}
#eus {display:none;}

#face {
	margin-top: 7em;
	margin-left: 55%;
}
#faceimg {
	height: 35px;
	width: 35px;
}

#datuak .imgico{  /*logo whatsapp*/
	display:inline-block;	
	width: 5%;	
	float:left;
	margin-top: 0em;
	margin-left: .5em;
	border-radius:50%; 	
}

#salida{
	width: 2em !important; 
	height: 2em !important; 
	float: right !important;
	margin:  .2em .2em 0 0 !important;
}

/***********************************************************
/***********************************************************
/***********************************************************
/*   											ERDIKOA
/***********************************************************
/***********************************************************
/***********************************************************/
#erdikoweb { background-color: var(--cabecera); }

.eu {display:yes;}
.es {display:none;}

.capitulo{ border: solid 3px var(--aavv); }

.sec_auzoa .rec {
	background-color: var(--titulo_claro);
	border: solid 2px var(--enlaces_hover) ;
	border-radius: 3px ;
}

#erdikoweb .boton{ 
	background-color: var(--yellow);
	border: solid 1px var(--hierba) ; 
	border-radius: .5em;
}

/***********************************************************
/***********************************************************
/***********************************************************
/* TIPOGRAFIA GENERAL y ENLACES
/***********************************************************
/***********************************************************
/***********************************************************/

body { 
	color: var(--texto);
	font-family: var(--font-family-sans-serif); /*verdana, calibri, "sans serif"; */
	font-size: .9em; 
	line-height: .1em; 	
}	
h1, h2, h3, h4 {
	display:block;
	text-align: center; 	
	font-weight: bold; 	
	margin-top: 1em;
}
h1, h2 { 
	color: var(--titulo_claro);
	font-size: 1.6em;  
	line-height: 1.5em ; 
} 
h3 { 
	font-size: 1.6em; 
	line-height: 1.3em; 
}
h4{
	color: var(--titulo_dif); 
	font-size: 1.6em; 	
}
p {	
	font-style: var(--font-family-monospace);
	font-size: 1.1em; 
	line-height: 1.2em ; 
	text-align: justify;  
	text-decoration: none; 
	text-indent: 1em; 
}
a { 
	color: var(--enlaces); 
	cursor: pointer; 
	display: block;  
	text-decoration: none; 
}
a:hover { 
	color:var(--enlaces_hover); 
	text-decoration: underline; 
} 

img {
  max-width: 100%;
  display: block;
}

.br { 
	display: block; 
	height: 1em; 
	width: 100%; 
}
.inline { display: inline; text-decoration: none; }
.center{ text-align:center; }

#lang {
	font-size: 70%;
	color: var(--titulo_claro);
}

#datuak>p, #datuak>a { 
	font-size: .8em; 
	line-height: 1.6em;
}

.capitulo h1{ font-size: 80%;}

#menu_exp .nivel1{ margin-left: 2em;}
#menu_exp .nivel2{ margin-left: 3em;}

@media (min-width: 480px)  { 
	#responsive { background-color: yellow; }
	#logo{width: 320px;}
}
@media (min-width: 592px)  { 
	#responsive { background-color: red-pink;}
}
@media (min-width: 672px)  { 
	#responsive { background-color: pink-light;}
}
@media (min-width: 768px)  { 
	#responsive { background-color: green;  }
}
@media (min-width: 960px)  { 
	#responsive { background-color: brown;  }
	.ordu>h2 {font-size: 1em;}
}
@media (min-width: 1200px) { 
	#responsive { background-color: grey;}
}