@import url(iconos.css);
*,
*::before,
*::after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
p,
img,
figure,
blockquote,
ul,
dl,
dd {
  margin: 0;
}
img {
  /*display: block;*/
  max-width: 100%;
   border-radius: 5px 5px 5px 5px;
}
body {
    margin: 0px;    
  min-height: 100vh;
  background-color: #f2f2f2;
  font-family: Arial, Helvetica, sans-serif;
 
}
h1, h2, h3, h4, h5, h6 {
 letter-spacing: 1.7px;
}
.contenedor-main{
     margin: 0 auto;   
    padding: 0;
     width: 100%;
     min-height: 100vh;    
    max-width: 950px;
    text-align: center;
}
/******Estilos de Header***********/
.header{
     width: 100%;
     margin: 5px 0px 0px 0px;
     text-align: center;
     padding: 3px 2px 3px 2px;
     background-color: yellowgreen;    
}
.header img{
            width: 100%;
            max-width: 710px;
            margin-left: auto;margin-right: auto;/*centrado de la img****/
            padding: 0;
            vertical-align:middle;
            object-fit: cover;
 }
.link{
    text-decoration: none;
	
}
/****Estilos "titulin"***********/
div.titulin{
     width: 100%;
     margin-bottom: 20px;
     text-align: left;
     padding-left: 20px;padding-top: 25px;
     font-weight: 700;
     letter-spacing: 1px;
 }
.nombre-pico{
	text-align: center;
    padding: 3px 0px 3px 3px;
    color: #000080;            
           }
.nombre-pico2{font-weight: 700;
     letter-spacing: 1px;
	text-align: center;
    padding: 10px 0px 10px 3px;
    color: #000080;            
           }
span.concejo{
    color: #ff0000;
}
.pico-vacio{
	color:#f2f5f7;
}
.sombra-img{
       filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
      }

/****Estilos Linea-Grid************/
 .linea-grid{ 
            margin: auto;
            display: grid;
            grid-gap: 8px;           
            padding: 5px 5px 5px 5px;      
          }
 
   .itemI{
        text-align: center;
            }
.itemI img{
	margin-top: 10px;
}
 .itemD{ 
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   background-color: #f2f5f7;
   padding: 2px 0px 2px 15px;
	 text-align: left;
   border-radius: 5px 5px 5px 5px;
        }
p.item{
    width: 100%;
    margin: 0;
    padding: 5px 0px 0px 0px;
    font-size: 0.9rem;
            }
.granate{
    font-weight: 700;
    color:#b03;    
}
.granate-h{
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1rem;
    font-weight: 700;
    color:#b03;    
}
.situacion{
	color:#000080;
	font-weight: 700;
	font-size: 0.8rem
}
.distanciador{
	padding-left: 1rem;
}
p.wiki-p{
            width: 100%;
            display: inline-block;
             margin: 0;
             padding: 1px 0px 0px 0px;                   
        }
.wiki-img{
            max-width: 92px;
            margin-right: 15px;
            vertical-align:middle;
     }
p.earth-p{
            width: 100%;margin: 0;margin-top: 3px;
             padding: 0px 5px 0px 1px;
            background-color:  #f0f8ff;
        }
 p.wiki-p, .earth-p, a:link{
             text-decoration: none;
          display: inline-block; padding: 2px 5px 2px 5px;    
        }
.earth-p a:hover {
  text-decoration: none;position: relative;top: 2px;
         color: #ff0000;   
        }
        p.wiki-p a:hover {
background-color:  #cacaca;/*color: #990000;*/color: #ff0000;
font-weight:600;
            text-decoration: none;position: relative;top: 2px;
        }
/*********Linea verde separadora ****************/
.linea-verde{
    width: 99%;
    margin: 0 auto;
   margin-top: 1rem;
    margin-bottom: 0.5rem;    
    border-top: 2px solid green;
}
/*********Titulo "color-cagaleta" ****************/
.titul-ruta{
	color: #800000;
	background-color: #CCCC00;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 700;
	padding: 8px ;
	margin: 0.5rem 0;
	border-top: 1px solid #800000;
	border-bottom: 1px solid #800000;
}
.titul-ruta p{
	margin: 0;padding: 0;
}
span.en-ruta{
	color: #C8487E;
	background-color: #C0C0C0;
font-size: 0.8rem;
	padding: 3px;
	margin-left: 1rem;
}

/*********Texto relato y/o introducción ****************/

.relato{ /* incluye todo el contenido hasta el pie***/
    width: 100%;
    margin: 0;
    padding: 0;
}
.introduccion{/** incluye la intro y/o el relato escritos**/
    width: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
}
.intro{/*parrafo del la "introduccion"**/
    padding: 5px 5px;
    font-family: 'Comic Sans MS' , cursive, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    text-indent: 15px;
    text-align: justify;
}
/****wikiloc********/
.mapa{
             margin-bottom: 1rem;
	margin-top: 1rem;
         }
.wk{
             width: 100%;
             max-width: 900px;margin: auto;
            height: 500px; overflow: hidden;
         }

/******* Estilos de las fotos************/
.semeyes{/*DIV que contiene las fotos**/
    width: 100%;
    margin: 0;
    border-radius: 4px;
    box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);    
    padding: 2px;
}
.semeyes img{
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);    
    padding: 2px;
       
}

img.vert{
    max-width: 480px;
}
.txtncima-foto{/*párrafo encima de la foto*/
    padding: 15px 5px ;
	font-weight: 400;
    font-size: 1rem;
    text-align: justify;
    line-height: 1.2em; 
    background-color: #fff;
     border-radius: 5px 5px 5px 5px;
        

}
.parra-foto{
    width: 100%;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 1.1rem;
   padding:0px 2px 10px 2px;    
    /* border:1px solid #fce016;*/
    /* border-radius: 0px 0px 5px 5px;*/
    font-family: 'Comic Sans MS', cursive, sans-serif; 
    font-size: 1rem;    
    background-color: #fff; 
    border-radius: 5px 5px 5px 5px;
}

/****************stilos del footer****************/
.footer {
  background: #333;
  color: #fff;
  padding: 10px;
  margin-bottom: 30px;
  margin-top: 15px;
  width: 100%;
  text-align: center;
}

.footer_contenedor {
  margin: auto;
}
.footer .social [class^="icon-"] {
  display: inline-block;
  color: #ff0000;
  text-decoration: none;
  font-size: 1.5rem;
  padding: 3px;
  background: white;
  border-radius: 50%;
  width: 35px;
  height:35px;
  line-height: 35px;
}
    .footer-aviso{         
    width: 100%;
}
p.aviso{width: 100%;
    font-size: 0.7em;
    text-align: left;
    margin: 0;
    padding: 5px 0px 15px 0px ;
}
.copy{
        font-size: 0.6em;
    }
#barraaceptacion {
	display:none;
	position:fixed;
	left:0px;
	right:0px;
	bottom:0px;
	padding-bottom:20px;margin-bottom: 10px;
	width:100%;
	text-align:center;
	min-height:50px;
	background-color: rgba(0, 0, 0, 0.5);
	color:#fff;
	z-index:99999;
}

.inner {
	width:100%;
	position:absolute;
	padding-left:5px;
	font-family:verdana;
	font-size:13px;
	top:30%;
}

.inner a.ok {padding:4px;color:#00ff2e;text-decoration:none;}
.inner a.info {padding-left:5px;text-decoration:none;color:#faff00;}

@media (min-width:600px){  
	
            .linea-grid{
                   grid-template-columns:repeat(2, 37% 63%);
    }
	p.item{
		font-size: 1rem;
	}
	.situacion{
		font-size: 0.9rem;
	}
	
	.nombre-pico2{
		font-size: 1.2rem;
	}
}

@media (min-width:750px){
	.nombre-pico2{
		font-size: 1.4rem;
	}
	.nombre-ruta{
		font-size: 1.4rem;
	}
}