* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
* {
    -webkit-tap-highlight-color: transparent;
}
nav{margin-top: 0em;display:flex}
h1{margin: 0;padding: 0;}
a{
  text-decoration: none;
}
.container {

  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;

}
.slides {
  display: flex;
  height: 100%;
  
}
.slide {
  
  min-width: 100%;
  position: relative;
}
.slide img {object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.slide.min img{
    object-position: bottom;
}
.slide-controls {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#next-btn,
#prev-btn {
  cursor: pointer;
  background: transparent;
  font-size: 30px;
  border: none;
  padding: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.658);
}
#next-btn:focus,
#prev-btn:focus {
  outline: none;
}
.slide-content {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(100%);
  font-size: 50px;
  color: white;
  opacity:.7;
}
.libres span:nth-child(1){
/*! color: rgb(0, 0, 94); */
  color: white;
font-size: 150%;
font-weight: 900;

}
.libres span:nth-child(3){
  color: rgba(255,255,255,0.5);
  font-size: 120%;
  font-weight: 600;
  line-height: 20px;
  
  }
body{
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}
.libres{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  
}
.books{
  margin:2em;
  text-align: center;
  background: rgba(255,255,255,0.3);
  padding: 0 1em;
  border-radius: 1em;
  border-left: 1px solid white;
  border-right: 1px solid white;
  box-shadow: 2px 2px 3px black;
  width:7em
  
}

nav .limenu{display: flex;
  align-items: center;
  margin-top: 1.5em;
  margin-left: 2em;
  width: 100%;
  justify-content: space-around
 
}
.limenu .bta{
  color: black;
}
.limenu li a{
  text-decoration: none;
  color: white;
  font-size: 14px;
}
.limenu li{list-style: none;
position: relative;
  background: black;
  padding: .5em 1em;
  border-radius: 1em ;
  font-weight: 600;
  
}
li ul{
  position: absolute;top:2em;
  z-index: 999;
  left: 0;

  padding: 1em;
  display: none;

}
li:hover ul:not(.nlist):not(.animenu){
  display: block;
 animation: anim .5s forwards 
}
@keyframes anim{
  0%{opacity: 0}
  100%{opacity: 1}
}
ul.nlist, .animenu{
  position: absolute;top:0em;
  z-index: 1000;
  width: max-content;left: 13.2em;
  display: none;
  
  
}
ul.lis,.animenu{
left: -15em
}
.animenu{
top:-1em;
  left: -17em

  
}
li ul li:hover .nlist,li ul .mybt:hover .animenu{
  display: block;
 animation: anim .5s forwards 
}
.limenu li ul li{
  border-radius: 0px;
 padding: .6em 1em;
  border-bottom:1px solid yellow;
  text-align: center;
}
.er li a{display: block;
width:14em;
}
.limenu li ul li:hover {
   border-bottom:5px solid yellow;
  transition: .3s ease-in-out
}
ul li.mybt,.animenu li{
  font-size: 14px
}
.logos div img{width: 150px;
margin-bottom: 1em;
  background-color: rgba(255,255,255,0.9);
  border-radius:.5em;
}
.logos{
  position: absolute;
  z-index: 999;
  top: 30%;
  right: 4em
  
}
h2{
  width: 100%;
  text-align: center;
  margin-top: 1em;
  font-weight: 900;
  letter-spacing: 2px
}
.links .sublk{margin-top: 1em;
  
  padding: 1em;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.sublk a{
  background:rgba(0,0,0,0.5);
  padding:0em 2em;
  margin-bottom: 1em;
  border-radius: 15px;
  color: white;
  font-weight: 600;
  font-family:Stencil Std;
  letter-spacing: 2px;
  width: max-content;
  height: max-content
  
}
.sublk img{
  display: block;
  width: 70px;
  height: max-content;
  margin-top: auto;
  margin-bottom:auto;
}
.sublk a{
  display: flex;
  width: max-content;
  height: 6em;
  justify-content: space-between;
  box-shadow: 2px 2px 3px black

}
.sublk a:nth-child(6),.sublk a:nth-child(8){
  padding: 1.8em 
}
.sublk .title{
   margin-top: auto;
  margin-bottom:auto;
}
.limenu .bt:hover .bta{
  transition: .3s ease-in-out;
  color: darkred;
}
.limenu .bt:hover{transition: .3s ease-in-out;
  background: transparent;
}
.logos a img:hover{
  transform: scale(1.1)
}
.sublk a:nth-child(5),.sublk a:nth-child(7){
  padding: 1.5em;
  text-align: center;
}
.libres{
  background: rgb(57,57,57);
  color: white;
}
.sublk a:hover{
  transition: .3s ease-in-out;
  background: rgba(0,0,0,0.7)
}

.abt h1{
  font-weight: 900;
  padding: .5em;letter-spacing:2px
}
.abt span{width: 1%;
 border-top: 3px solid darkred;display: block;
  animation: line 1s ease-in forwards;
  animation-delay: .5s;
}
.abt h2 span{width: 1%;
 border-top: 1px solid darkred;display: block;
  animation: line 1s ease-in forwards;
  animation-delay: .5s;
}
@keyframes line{
  0%{width: 1%;
    
  }
  100%{
    width: 100%
  }
}
.abt h2{
  text-align: left;
  padding:0.8em 3em;
  margin-bottom:1em;
  margin-top: 2em;
  font-size:25px;
  letter-spacing:1px;
 
}
.abt p{padding: 0 4em;
word-spacing:2px;line-height: 21px;margin-bottom: 2em;
}
@keyframes hit{
  0%{opacity: 0;
    
  }
  100%{
    opacity: 1
  }
}
.abt{opacity: 0;overflow: hidden;
  animation: hit .5s ease-in forwards;transition: 2s ease-in;

}
.abt h3{font-size: 17px;
  padding: 0em 7em;
  margin-bottom:1.5em;
}
.abt li{
  display: flex;
  padding: 0 5em;
  margin-bottom: 1em;
  line-height: 1.3em
  
}
.abt li span{margin-bottom: auto;
  margin-top: auto;

   width: 1em;animation: none;
  border:3px solid darkred;
  margin-right: 15px
}
.abt a{
  color: darkred;
  font-size: 17px;
  font-weight: 600;
  text-decoration: underline;
  padding: 0 5em;
}
th,td{
  border: 1px solid black;
  padding: .5em 2em;
  text-align: center;
}
table{
  border-collapse: collapse;
  margin-left: 5em
}
.limenu .bt{
  background: none;
}
.abtli li{
  width: 13em;
}
.navlist{
  display: flex;
 padding: .5em;
  margin-bottom: .5em;
  width: 100%;
  justify-content: space-evenly;
  list-style:none;
  text-decoration: none;
  background: rgba(0,0,0,.1);
  position: absolute;
 
  font-size: 14px;
  top:0
}
.navlist a{
   color: black;
  font-size: 15px;
  font-weight: 600
}
.fa-angle-down{
  font-weight: 900;

}
nav{
  border-bottom: 3px solid rgba(0,0,0,0.1);
  box-shadow: 0 0 2px 0px black;
}
input,textarea{
  display: block;padding: 6px 10px ;
  width:100%;background: rgba(255,255,255,0.8);
  border: 1px solid black
}
form{position: relative;
  padding: 2em;margin: 0 auto; 
width:400px;
  background: rgba(25,25,25,0.6);
  box-shadow: 4px 4px 7px black

}
label{color: white;text-align: center;
  padding: 1em 0em;display: block;
  
}
form img{
  position: absolute;
  z-index: -1;
  top: 25%
}
form button{
  padding: 1em;

  border: 1px solid black;
  padding: 0.5em;
  font-size: 15px;
  font-weight: 600;
  margin-top: 1em;
width:100%;
  
  cursor: pointer;
}
.ab{
  left: -5em;
}

.abt .fss{
  font-size: 15px;
  font-family: arial;
  font-weight: 600;
  text-align: center;
  background: lightgreen;
  animation: opac 1s ease-out forwards;
  transition: 1s ease-out;
  animation-delay:5s
}
@keyframes opac {
  0%{
    opacity: 1
  }
  100%{
    opacity:0;
    position: absolute;
  }
}
.fa-bars,.fa-close{display: none;
  position: absolute;
  font-size: 25px;
  padding: 16px;
  right: 0;
  cursor: pointer;
}
.loginbtn{
  display: none;
}
@media (max-width:900px){
  .login{
    display: none;
  }
  .loginbtn{
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  border: 1px solid black;
  border-radius: 5px;
  width: max-content;
  padding: 5px;
  font-size: 12px;
  
}
 .loginbtn a{
   text-decoration: none;
  color: black;
  font-weight: 600;
 }
  .logos{
    display: flex;top: 10px;
    justify-content: space-evenly;
    width: 100%;left: 0
  }
  
  .fa-bars{display: block;
}
.navlist{display: none;}
body.act .navlist{
  display: block;
}
  .ab{
  left: 56%;text-align: center;
}

  .fa-close{
    width: 100%;
    text-align: center;
    color: black;
    background: white;
  }
  .navlist{
    position: relative;
    background: transparent;
    display: block;
  }
  
 nav .limenu{
    display: none;
   width: 100%;position: absolute;
   top: 1em;
   text-align: center;
   z-index: 1000;
   background: white;
   left: -2em;
background: rgba(57,57,57);
  }
  .limenu .bt:hover .bta{
    color: white;
    border-bottom: 2px solid white;
    padding-bottom: 5px
  }
  li ul{width: 100%;
    position: relative;
    left: 50%;margin-left: -100px;
    background: transparent;
    padding: 0;
    top: 0
    
  }
    ul.nlist{
    position: relative;
    left: 70px;
    background: transparent;
    padding: 0;
    top: 0
    
  }
  .limenu li{border: none;
     background: transparent;
    width: 100%
  }
  .limenu li ul li,  .limenu li ul li:hover{
    border: none;
   
  }
  .limenu li a{
    color: lightgray
   
  }
  ul.nlist{
 
    position: relative;
    margin-left: -86px;
  }
    ul.lis{
 
    position: relative;
    margin-left: -84px;
  }
  .mybt .animenu{
  position: relative;
   left: 50%;margin-left: -112px;
  top:.5em;
    text-align: center;
  
}

  body.act .container, body.act .libres, body.act .links, body.act h1,body.act .abt, body.act .authors, body.act .prof, body.act .containers,body.act .slib{
    display: none;
  }
  body.act{
    background-color: rgb(51, 51, 51);
  }

  .limenu li.bt{position: relative;
    border-bottom: 1px solid black;
    border-radius: 0;
    background: rgba(57,57,57,.1);
   
  }

  .limenu li .bta{
     width: 100%;
    display: block
  }
  .limenu li.bt ul{padding: .5em 0;
    background: rgba(277,277,277,0.1);
    width:max-content;
   
   
  }
  .limenu .bta{
  color: lightgray;
}
  .limenu li ul li a:hover{
    color: white
  }

}
@media (max-width:500px){
    .acces{
        overflow-x: scroll;
    }
  .abt h2{
    padding: 0 1em
  }
  .abt p{
    padding: 0 1em
  }
  .abt{
    margin-bottom:0em
}
  .abt li{
    padding: 0 1em
  }
}

.prof{
  display: flex;
  flex-direction: row;background: rgba(0,0,0,0.04);
  
}
.librarian{padding: 5em;
  text-align: center;
}
.librarian img{
  width: 120px;
  border-radius: 40%;
  background: linear-gradient(to top, white 0%, purple 100%);
    position: relative;
    text-align: center;
    padding:4px;
    box-sizing: border-box;
  box-shadow: 2px 3px 5px;
}
.teams{
  text-align: center;
  padding: 5em 1em;
  display: flex;
  flex-wrap: wrap;
  
  justify-content: space-around;
  
}
.teams img{
  width: 130px;
 background: linear-gradient(to top, darkred 0%, purple 100%);
    border-radius: 50%;
    position: relative;
    text-align: center;
    padding:4px;
    box-sizing: border-box;
}
.teams .imgss{
 max-width: 250px;
  padding: 1rem;
  color: black;
  border-width: 3px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to bottom, 
      darkred, 
      rgba(0, 0, 0, 0)
    ) 1 100%;
  margin: 1em;
}
.teams h4{
  padding: 15px 0
}
.teams p{
  padding: 5px 0;
  color: rgba(0,0,0,0.7);
}
.prof h3{
  margin-top: .5em;
  position: absolute;
  right: 1em;
  padding: 1em;
   background: -webkit-linear-gradient(darkred, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border: 4px solid;
  border-image: 
    linear-gradient(
      to bottom, 
      darkred, 
      rgba(0, 0, 0, 0)
    ) 1 0 1 1;
}
.librarian{
  background-image: radial-gradient(
      circle at top left,
      darkred,
      purple 80%)
}
.librarian h4{
  padding: 1em 0;
  font-size: 22px;
  color: white;
}
.librarian p{
  padding: 3px 0;
  color: rgba(255,255,255,0.8);
}
.read img{
  border-radius: 30%;
  width: 120px;
  height: 140px;  object-fit: cover
}
.read .teams{
 padding: 6em 0em;
  align-items: center;
  justify-content:center
}
.read .imgss{
  max-width: max-content;
  
  
}
@media (max-width:816px){
  .prof{
    flex-direction: column;
  }
  .librarian .imgs{
    display: flex;
   
    
  }
  .librarian img{
    width:150px;
    height: 170px
  }
  .librarian{
    padding: 1em;
    margin-top: 5em
  }
  .librarian .data{
    margin-left: 2em
  }
}
@media (max-width:600px){
  .logos div img{
    width: 100px;
    height: 35px;
  }
}
@media(max-width:428px){
  .librarian .imgs{
    display: block;
   
  }
  .librarian .data{
    margin: 0
  }
  .librarian .imgs{padding: 0}
  .teams{
    padding:1em;
  }
  .logos div img{
    width: 100px;
    height: 35px;
  }
}

.containers .details{
  position: relative;
}
.details .bibdata{
  margin-left: 7em;
  width: 50%;  flex-wrap: wrap;
  position: relative;top: 0em;
}
.details .noimga,.details .noimgc,.details .noimgb{
  position: absolute;
  left: 0;
}
.details .noimga{
  z-index: 9;top: 0em
}
.details .noimgb{
  z-index: 0;top: 0em
}
.details .noimgc{
  z-index: 0;top: 0em
}
.details .noimgd{
  position: absolute;top: 0em
}

.details .noimgss  {
 
}
.details img{
  width: 80px
}

.bibimg{
 position: relative
}
.details{
  margin-bottom: 2.5em;
  display: flex;justify-content: center;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.6);
  padding: 3em 2em
}
.containers{
  padding: 1em 5em;
  background: rgba(57,57,57,0.1)
}
.bibdata{
  line-height: 30px
}
.details{
    
  border-top: 2px solid transparent;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(0.25turn, rgba(255,249,34), rgba(255,0,128), rgba(56,2,155,0));
    border-image-slice: 1;
    width:100%;
  box-shadow: 2px 2px 5px ;
}
.details a{
  font-size: 20px;
  text-decoration: none;
  color: darkred;
 
  padding: .5em;
  font-weight: 600
}
.details a:active{
    color:darkblue;
}
@media (max-width:680px){
  .containers{
    padding: 0;
  }
 .details .bibdata{
   width: 70%
  }
  
}
@media (max-width:450px){
  .details .bibdata{
    margin-top: 7.5em;
    margin-left: 0em;
    width: 100%;
    
  }
  .details a{
    font-size: 15px
  }
   .details p{
    font-size: 12px
  }
}
.containers h1{
 padding-top:1em;
 margin-left:10px;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(0.25turn, purple, darkred, white);
    border-image-slice: 1;
}
.authors h1{
font-family: Comic Sans MS;
   padding-top:1em;
 margin-left:25px;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(0.25turn, purple, darkred, white);
    border-image-slice: 1;
  font-size: 25px;
  padding-bottom: .5em
}

.authors img{
width: 120px;
  height: 140px;
  border-radius: 40%;
  background: linear-gradient(to top, darkred 0%, black 100%);
    position: relative;
    text-align: center;
    padding:4px;
    box-sizing: border-box;
  box-shadow: 2px 3px 5px;
  
}
.authors .facimgsdata{
  padding: 2em;
}
.authors .facimgsdata{
  position: relative;
}
.authors .fdata{
  position: absolute;overflow: hidden;
  top: 15%;
  font-size: 80%;
  background: linear-gradient(rgba(0,0,0,0.5) 60%,rgba(255,255,255,0.5));
  width: 120px;
   height: 140px;
    border-radius: 40%;
  display: none;
  
}
.authors .fdata p a{
  position: absolute;
  top: 4em;left: 1em;
  color: white;
  font-weight: 600;
  border-bottom: 3px solid darkred
  
}
.fimg{
  width: max-content;
  
}
.fimg:hover .fdata{
  display: block;
    animation: hit .3s ease-in-out forwards;
  transform: scale(1);
  top: 0
}
.fimg:hover{ 
  transform: scale(1.1);transition: .2s ease-in-out;
}
.facimgs{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center
}
.authors .ha{
font-family: arial;
   padding:1em;
 margin-left:0px;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(-0.25turn, purple, white, white);
    border-image-slice: 1;
  text-align: right;
  font-size: 25px;
  color: rgba(57,57,57,0.8)
}
 
 
.imgdat p{
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}
.magafd{
  width:150px;
  height: max-content;
  box-shadow: 2px 2px 7px #000000;
  padding: 1em;
  background: rgba(180,202,245,0.502);
  margin-bottom: 1.5em;
  border-radius: 5px;
  margin-right: 1em;
  border-top: 2px solid white;
  border-left: 2px solid white;
}
.magafd img{
  width: 100px;
  height: 150px;
  display: block;
  margin-left: auto;
  margin-right: auto;

}
.magflex{padding: 2em 1em;
  background-color: rgba(63,63,63,0.102);
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
@media (max-width:600px){
  .magafd{
    width: 80%;
  }
}
.magazines.abt p{padding: .5em 0; 
  word-spacing:0px; line-height: 18px; margin-bottom: 0em;
  }

  .evns h1{
    padding-top: 1em;font-family: 'Courier New', Courier, monospace;
     padding-left: 1em;
      text-align:left;
    padding-bottom: 0;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(0.25turn, rgba(255,249,34), rgba(255,0,128), rgba(56,2,155,0));
    border-image-slice: 1;
    width:80%;
  
   
}
.datae h2{
  padding: 1em;
  margin: auto;
  text-align: center;
  color: white;
  font-size: 150%
  
}
.imagese{display: flex;
  flex-wrap: wrap;
  margin:auto;
  width: 100%;
  justify-content: center
}
.imagese img{
  width: 400px;
    object-fit: contain;
  border: 10px solid white;
  margin: 10px;
  height: max-content;
  
}
.evnts{
  background: ;
  padding: 2em 0;
 background: url('meslogo.png') no-repeat,rgba(24,74,124,0.7);
background-blend-mode: multiply;
  background-size: 160px 150px;
  background-position-x: 98%;
  background-position-y: 10%
  
}

.gnr{
  width: 100%
}
.gn p,.evnts p{
  color: white;
  margin-top:1em;
  text-align: center
}
@media (max-width:560px){
  .gnr{
  width: 100%
}
  .evnts{

  background-size: 100px;
    background-position-y: 5%;
    
}
  .evns img{
    width: 60%
  }
  .evns h2{
    font-size: 100%
  }
   .evns p{
    font-size: 80%
  }
  .evns h1{
    font-size: 130%
  }
}

@media (max-width:500px){
  .books{
    padding: 1em
  }
}

.abt .slib a,.slib a{
margin:0;
padding:0px;
color:darkblue;
font-weight:600;
font-size:100%;
text-decoration:none;
font-style: italic;
}
.slib{
padding:15px;
color:grey;
}

@media (max-width:500px) and (min-height:1970px){
  .slib{position:absolute;
    bottom:0em}
}
@media (max-width:800px) and (min-height:1550px){
  .slib{position:absolute;
    bottom:0em}
}
@media (max-width:1200px) and (min-height:1320px){
  .slib{position:absolute;
    bottom:0em}
}
@media (max-width:1598px) and (min-height:1200px){
  .slib{position:absolute;
    bottom:0em}
}


.slide img{
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1)0%,rgba(0,0,0,0.4) 80%)
}
.slide-content h4{
  position: absolute;width: max-content;
  top:100%
}
.slide{
 background:black;   
}
}
.copyright span{
    border:none;
    display:inline!important;
    animation:none!important;
}
.copyright a{
    padding:0;
}