/*
    Theme Name: Biblioteca
 
    Description:plantilla para la bilbioteca nacional
    Author: Yoward diaz
   
    Version: 1.0
    Tags: gray, red, two-columns, left-sidebar
*/

/*estilo de tabla bilbioteca y su gente*/


div.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 100%;
}

/* Style the buttons inside the tab */
div.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current "tab button" class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 100%;
}


/*estilo de tabla bilbioteca y su gente*/


ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;

}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}



ul.topnav li.icon {display: none;}


@media screen and (max-width:680px) {
  
.social{
margin-top:1cm;
}
}




.social {
position: absolute; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/



top: 6%; /* Bajamos la barra 200px de arriba a abajo */
z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
.social ul {
list-style: none;
}
 



.social ul li a {
display: inline-block;
color:#fff;
background: #000;
padding: 5px 10px;
text-decoration: none;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}
 
.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
.social ul li .icon-twitter {background: #00abf0;}
.social ul li .icon-googleplus {background: #d95232;}
.social ul li .icon-pinterest {background: #ae181f;}
.social ul li .icon-mail {background: #666666;}
 
.social ul li a:hover {
background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
padding: 10px 20px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}


.sociali {
position: absolute; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
background:#fff;
color:#000;
margin-left:8cm;
width:50%;
height:30%;
text-align:center;
top: 10%; /* Bajamos la barra 200px de arriba a abajo */
z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 


a,
#home-slider .caption h1 span, 
#twitter-carousel .item span, 
#footer .footer-bottom, 
#single-portfolio .close-folio-item:hover, 
.single-table.featured .btn.btn-primary, 
.contact-info ul li a:hover, 
#footer .footer-bottom a  {
  color: #86041C;
}

.btn.btn-primary:hover,
.btn-submit:hover {
  background-color: #000
}

a:hover, a:focus {
	color: #000;
}

.main-nav, 
.service-icon, 
.progress-bar.progress-bar-primary, 
.single-table.featured, 
.btn.btn-primary, 
.twitter-icon .fa-twitter, 
.twitter-left-control:hover, .twitter-right-control:hover, 
.post-icon, 
.entry-header .date:after, 
.btn-loadmore:hover, 
.btn-submit,
#footer, 
.caption .btn-start:hover, 
.left-control:hover, 
.right-control:hover, 
.folio-overview a:hover {
  background-color:#86041C;
}



.twitter-left-control:hover, 
.twitter-right-control:hover, 
.btn-loadmore:hover  {
	border: 1px solid #86041C;
}

.caption .btn-start:hover, 
.left-control:hover, 
.right-control:hover {
	border-color: #86041C;
}

.twitter-icon .fa-twitter:after {
	border-color: #86041C transparent transparent;
}