@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
* {
  box-sizing: border-box;
}

.guias_div{
  margin-left:auto;
  margin-right: auto;
  width: fit-content;
}
.buttonpdf:hover,.buttonword:hover, .buttonexcel:hover , .buttonpowerpoint:hover, .buttonimage:hover, .buttonguia:hover{
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}
.guias_texto{
  font-weight: bold;
  margin-bottom: 10px;
}
.enlace_guias{
  color: #64e2e2;
  font-size: 20px;
}
.enlace_guias:hover{
  color: #0a59d1;
}
body {
  font-family: "Open Sans";
  background: #F1F1F4;
}

h1 {
  margin-top: 0;
  text-align: center;
}
h3{
  text-align: center;
  color: #042557;

}
p {
  margin: 0 0 1.5rem;
}

main {
  max-width: 960px;
  margin: 2rem auto;
  background: #FFF;
  padding: 1.25em;
}
.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}
.navbar {
  z-index: 1003;
  max-width: 920px;
  background-color: white;
  width: 100%;
  height: 4rem;
}

.logo-nav {
  width: 200px;
  height: 60px;
}
.search{
  text-align: center;
}
.iconos{
  text-align: center;
  padding-bottom: 2%;
}

.iconos .fa-solid:hover{
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #CCC;
  padding: 1rem;
}
.card h2 {
  margin: 0 0 1rem;
  text-align: center;
}
.card figure {
  padding-top: 5%;
    align-items: center;
    text-align: center;
 
}
.card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.card.flippable {
  height: 250px;
  padding: 0;
  position: relative;
  perspective: 700px;
}
.card.flippable .flip-area {
  transform-style: preserve-3d;
  position: relative;
  height: 100%;
  width: 100%;
  transition: transform 1s cubic-bezier(0.57, -0.55, 0.55, 1.47);
}
.card.flippable .front,
.card.flippable .back {
  position: absolute;
  backface-visibility: hidden;
}
.card.flippable .front {
  height: 100%;
  width: 100%;
  margin: 0;
}
.card.flippable .back {
  display: flex;
  flex-direction: column;
  transform: rotateY(-180deg);
  background: #042557;
  height: 100%;
  width: 100%;
  color: #FFF;
  padding: 1rem;
}
.card.flippable .back .button {
  background: #0a59d1;
}
.card.flippable .back .button:hover {
  background: #0744a0;
}
.card.flippable:hover .flip-area {
  transform: rotateY(180deg);
}
.textodocumentos{
	font-size: medium;
}
h3{
  font-size: 30px;
}
.buttonguia{
  margin-top: auto;
  background: gray;
  color: #FFF;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 800;
  text-align: center;
  padding: 15px;
  transition: 0.3s;
}
.buttonpdf {
  margin-top: auto;
  background: #ff0000;
  color: #FFF;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 800;
  text-align: center;
  padding: 15px;
  transition: 0.3s;
}
.buttonword {
  margin-top: auto;
  background: blue;
  color: #FFF;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 800;
  text-align: center;
  padding: 15px;
  transition:  0.3s;
}
.buttonexcel {
  margin-top: auto;
  background: green;
  color: #FFF;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 800;
  text-align: center;
  padding: 15px;
  transition:  0.3s;
}
.buttonpowerpoint {
  margin-top: auto;
  background: orange;
  color: #FFF;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 800;
  text-align: center;
  padding: 15px;
  transition:  0.3s;
}
.buttonimage {
  margin-top: auto;
  background: purple;
  color: #FFF;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 800;
  text-align: center;
  padding: 15px;
  transition:  0.3s;
}


.highlighted {
  background-color: #ffe658;
}

.highlighted.current {
  background-color: #ffe658;
  border: 1px solid red;
}
.card{
  padding-top: 5%;
  align-items: center;
  text-align: center;
}
#imagen {
  background-color: #8064A2 !important;
  border-color: #8064A2 !important;
}
.fa-book-atlas{
  color: gray
}

.fa-file-pdf{
  color: red;
  transition: 0.3s;
}
.fa-file-word{
  color:blue;
  transition: 0.3s;
}
.fa-file-excel{
  color:green;
  transition: 0.3s;
}
.fa-file-powerpoint{
  color:orange;
  transition: 0.3s;
}
.fa-file-image{
  color:purple;
  transition: 0.3s;
}

.fa-circle-arrow-up{
	color: #03114E;
  display:none;
	padding:20px;
	font-size:20px;
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;
  transition: 1s;
}
.fa-circle-arrow-up:hover{
  transform: rotate(360deg)
}


.buscador{
	padding-left: 41%;
}
.search__input{
	border-radius: 5px;
	height: 30px;
	text-align: center;
}

.search__input:focus{
	box-shadow: 0 3px 3px rgba(0, 157, 255, 0.697);
}

.search__input::placeholder{
	text-align: center;
}
.invisiblo{
  display: none;
}

/*RESPONSIVE*/
@media all and (max-width: 554px)  {
  .buscador{
    padding-left: 24%;
  }
  .search__input{
    border-radius: 5px;
    height: 30px;
    text-align: center;
  }
  .fa-file-powerpoint{
    color:orange;
    padding-top: 5%;
  }
  .fa-file-image{
    color:purple;
    padding-top: 5%;
  }
  .card{
    padding-top: 5%;
    align-items: center;
    text-align: center;
  }
  
  .card h2 {
    margin: 0 0 1rem;
    text-align: center;
  }
  .card figure {
    padding-top: 5%;
    align-items: center;
    text-align: center;
  }
  .fa-circle-arrow-up{
    color: #03114E;
    display:none;
    padding:20px;
    font-size:20px;
    cursor:pointer;
    position: fixed;
    right:8px;
    font-size:500% !important;  
  }

  .logo-footer{
    width: 50%;
  }

}
/*RESPONSIVE*/