/*cargar fuentes para todos los usuarios*/
@font-face {
font-family: lobster;
src: url(/img/lobster.otf);
}
html {
margin:0;
padding: 0;
height: 100%;
}
body {
  position: relative;
  margin:0;
  min-height: 100%;
  background-color: #2780e3;
  font-family: Palatino, Verdana, Helvetica, sans-serif;
  /*padding-bottom: 6rem;*/
}

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

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

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


.botons-container {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  max-width: 1600px;
  height: 100%;
  /*margin: 40px 50px 40px 50px;*/
  padding-bottom:70px; 
  }

.boton {
	margin: 10px;  
   padding: 20px;
   flex-basis:30%;
   border: 1px solid white;
   border-radius: 10px;
   max-width: 90vw;
   justify-content:center; 
   text-align: center;
  
   /* 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: inline-block;
  border-radius: 10px;
  height: 350px;
  max-height: 350px;
  width:350px;
  max-width: 90%;
  margin:10px;
  padding: 5px; 
}

.botons-container a{
display: inline-block;
max-width: 100%;
color: black;
text-decoration: none;

margin: 0 auto;
}
.boton img.bottom {
opacity: 0;
}
.boton img { 
   position: absolute;
   left: 0;
   right:0;
   border-radius: 10px;
   max-width: 100%;
   max-height: auto;
   text-align: center;
   /* 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, .boton:focus img.top{
	
	opacity: 0;
}

.boton:hover img.bottom, .boton:focus 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;
    height:50px;
    width: 100%;
    background-color: black;
    color: white;
    padding: 0.5rem;
    display: flex;
    /*align-items: center;
    justify-content:center;*/
    }

#share-buttons{
	vertical-align:middle;
	padding: 2px;
   width:100%;
   margin:auto;}
   
.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-right: 3vw;
	margin-left: 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 all and (orientation:portrait) {
.cabecera img {
	width: 75%;
}    
.cabecera p {
font-size: 8vw;
} 
}     

@media all and and (max-width:400px) {
#foto {
width: 200px;
height: 200px;
max-width: 95%;
max-height: 95%;
}
}  
 
/* @media (min-width: 900px) {
  .botons-container {
    display: flex;
    justify-content: center;
  } */