/*cargar fuentes para todos los usuarios*/
@font-face {
font-family: lobster;
src: url(/img/lobster.otf);
}

body {
  
  position:relative;  
  margin:0;
  min-height: 100%;
  background-color: #2780e3;
  font-family: Palatino, Verdana, Helvetica, sans-serif;
  padding-bottom: 100px;
}

.cabecera img {
	display: block;
   margin-left: auto;
   margin-right: auto;
   width: 35%;
   border-bottom: 1px solid #ffffff;
}

.btntxt h1 {
color: #ff9900;
font-family: lobster;
text-align: center;
}


.btntxt p {
color: white;
font-size: 15px;
text-align: justify;
padding: 0px 10px 0px 10px;}


.botons-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1400px;
  /*margin: 40px 50px 40px 50px;*/ 
  }

.boton {
	margin: 10px;  
   padding: 20px;
   flex-basis:30%;
   border: 1px solid white;
   border-radius: 10px;
   /*max-width: 90vw;*/
    
  
   /* añadir sombra*/
	 position: relative;
    -moz-box-shadow: 4px 8px 16px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 4px 8px 16px rgba(0, 0, 0, .5);
    box-shadow: 4px 8px 16px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
    background-color: #202020;
}

#foto {
  position:relative;
  display:flex;
  /*gap:50px;
  text-align: justify;
  /*justify-self: center;*/
  /*border-radius: 10px;*/
  height:200px;
  max-height: 400px;
  width:200px;
  max-width: 250px;
  /*ign-items: flex-start;*/
  margin:auto;
  padding-top: 10px; 
}

.botons-container a{
color: black;
text-decoration: none;
}
.boton img.bottom {
opacity: 0;
}
.boton img { 
   position: absolute;
   /*display: flex;*/
	left:0;
	right:0;
	margin:auto;
	text-align: center;
	z-index: 1;
   border-radius: 10px;
   max-width: 100%;
   max-height: 100%;
  
   /* transición para cambio de foto*/
   /*-webkit-transition: opacity 0.2s ease-in;
   -moz-transition: opacity 0.2s ease-in;
   -o-transition: opacity 0.2s ease-in;
   transition: opacity 0.2s ease-in;*/
}

/* animaciones al pasar por encima del botón*/



.boton:hover img.top{
	
	opacity: 0;
}

.boton:hover img.bottom {
	
	opacity:1;}

/*animación al pulsar*/
.boton:active {
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
	top:3px;
}

 /* pie*/
.pie {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    /*width: 100%;*/
    background-color: black;
    color: white;
    padding-top: 5px;
    display: flex;
    /*align-items: center;
    justify-content:center;*/
    }


   
/*.img-cnt {
	vertical-align:middle;
   display:inline-block;
   width:10%;
   max-width:40px;
   min-width:25px;
   height:auto;
   padding:2px;
   border: 0;
   box-shadow: 0;}*/
   
#cc {
	vertical-align: middle;
	padding: 2px;
	
	margin:auto;
}
                    
.ccimg{
	vertical-align:middle;

   max-width:100px;
   min-width:40px;
   height:auto;
   padding: 2px;
   /*margin:2px 20px 2px 2px;*/
   border: 1px solid white;
}                   
@media (min-width: 900px) {
  .botons-container {
    display: flex;
    justify-content: center;
  }