/* estilos para el índice de la página de fausto sexto*/
     @font-face {
       font-family: 'Px437_LE_Model_D_Mono';
       src: url(fonts/Px437_LE_Model_D_Mono.ttf);
     }
     @font-face {
       font-family: 'Px437_IBM_XGA-AI_12x23';
       src: url(../fonts/Px437_IBM_XGA-AI_12x23.ttf);
     }

     @font-face {
       font-family: 'Px437_Sigma_RM_8x16';
       src: url(fonts/Px437_Sigma_RM_8x16.ttf);
     }
     @font-face {
       font-family: 'Px437_Apricot_200L-2y';
       src: url(fonts/Px437_Apricot_200L-2y.ttf);
     }
     @font-face {
       font-family: 'Px437_EverexME_5x8';
       src: url(fonts/Px437_EverexME_5x8.ttf);
     }
     @font-face {
       font-family: 'Px437_DOS-V_TWN19';
       src: url(fonts/Px437_DOS-V_TWN19.ttf);
     }
     @font-face {
       font-family: 'Constantine';
       src: url(../fonts/Constantine.ttf);
     }
     html { /* body won't work ¯\_(ツ)_/¯ */
       scroll-snap-type: y mandatory;
     }
   body {

       height: 100%;
       width: 100%;


scroll-behavior: smooth;
color:grey;
overflow-y: auto;
overflow-x: none;
    background-color: black;
}

@-webkit-keyframes lineasdefondo {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes lineasdefondo {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes lineasdefondo {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


     section {
       transform-style: preserve-3d;
       position:sticky;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;

     }
     * {
       box-sizing: border-box;
     }
     canvas {
         position: relative;
         width: 522px;
         height: 522px;
         transform: translate(-50%, -50%);
         border: 1px solid black;
         background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

     }
#particles-js{
  top:1%;
  left:1%;
  right:1%;
  position:sticky;
  width: 100%;
  background-color: rgba(0,0,0,.0);

    transform-style: preserve-3d;
  height: 300vh;
  display: flex;
  align-items: center;
  justify-content: center;

} /* ---- stats.js ---- */
.aparece {
  width: 100%;
  height: 100%;
}
h1 {

text-shadow: 20px 20px 13px rgba(198, 162, 85,.5);
  position: absolute;
  top:6%;
    margin-left: 8vmax;
z-index:1;
align-items: center;
text-align: center;

font-size: 7vw;
margin-bottom: 10vmax;
background: linear-gradient(129deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);

     background-size: 400% 400%;   -webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
  font-family: 'Constantine';
  -webkit-animation: AnimationName 14s ease infinite;
  -moz-animation: AnimationName 14s ease infinite;
  animation: AnimationName 14s ease infinite;
}
.contenedorgeneral{
  position: absolute;
  width: 100%;
  align-items: center;
  text-align: center;
  top:0%;
  left:0%;
height: 240%;
overflow-x: none;
}
     .contenedor {

position: absolute;
top:6%;
left:10%;
right:10%;

overflow-x: none;
scroll-behavior: smooth;

overflow-y: scroll;

}
.contenedordeimagen {
  object-fit: cover;
left:30%;
  height: auto;
   width: 42vw;
   scroll-snap-align: middle;
  scroll-behavior: smooth;
opacity: 1;
padding:.5vmax;
padding-left: -5vw;
position: relative;
}
.contenedordeobjeto {
  object-fit: cover;
  height: auto;
   width: 100vw;
   scroll-snap-align: middle;
  scroll-behavior: smooth;

padding:.5vmax;
padding-left: -5vw;
position: relative;

margin-bottom: 23%;

}


     img {

transform: translateX(55%);
padding-left: 44%;
height:27vh;
width: auto;
       margin-bottom: 1vmax;
opacity: 1;
     }

     .hide {
       display: none;
       color: gold;
     opacity: 0;

           font-family: 'Px437_DOS-V_TWN19';
   }
     .contenedordeobjeto:hover + .hide {
       display: block;
   position: absolute;
   top:0%;
   left:19%;
     transition: 1.4s ease;
   opacity: 1;
   font-size: 1.6vmax;
padding-right: 2px;

       color: gold;
       width: fit-content;
       background-color: black;


         font-family: 'Px437_DOS-V_TWN19';
     }
     [data-aos='flip-right'] {
       transform: perspective(2500px) rotateY(100deg);
       &.aos-animate {transform: perspective(2500px) rotateY(0);}
     }
    .contenedordeimagen:hover + [data-aos='flip-right'] {


opacity: 1;

}
h1:hover + .contenedordeimagen   {


opacity: 1;

}
.aparece:hover + .textodeobjeto {
opacity: 1;
}
h1:hover {

background-color: rgba(26,26,26,.3);

}

@-webkit-keyframes imgfil {
    0%{filter:  invert(66%);}
    50%{filter: hue-rotate(235deg)saturate(5);}
    100%{filter: hue-rotate(0deg);}
}
@-moz-keyframes imgfil {
  0%{filter:  invert(66%);}
  50%{filter: hue-rotate(235deg)saturate(5);}
  100%{filter: hue-rotate(0deg);}
}
@keyframes imgfil {
  0%{filter:  invert(66%);}
  50%{filter: hue-rotate(235deg) saturate(5);}
  100%{filter: hue-rotate(0deg);}
}
     #vertical{
       width: auto;
       max-height: 800px;
       max-width: 800px;
       height: 70vmax;

     }

     #horizontal{
       height:auto;
       width: 70vmax;
     max-height: 800px;
     max-width: 800px;

     }
     .titulodeobra {
       background: linear-gradient(129deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
font-size: 2.4vmax;
            background-size: 400% 400%;   -webkit-background-clip: text;
       -moz-background-clip: text;
       -webkit-text-fill-color: transparent;
       -moz-text-fill-color: transparent;
         font-family: 'Constantine';
         -webkit-animation: AnimationName 14s ease infinite;
         -moz-animation: AnimationName 14s ease infinite;
         animation: AnimationName 14s ease infinite;
     }
     @-webkit-keyframes AnimationName {
         0%{background-position:0% 52%}
         50%{background-position:100% 49%}
         100%{background-position:0% 52%}
     }
     @-moz-keyframes AnimationName {
         0%{background-position:0% 52%}
         50%{background-position:100% 49%}
         100%{background-position:0% 52%}
     }
     @keyframes AnimationName {
         0%{background-position:0% 52%}
         50%{background-position:100% 49%}
         100%{background-position:0% 52%}
     }
.textodeobjeto{

margin: 2vmax;
  position: relative;
  bottom:6%;
  top:44%;
box-sizing: content-box;
padding-left:6vw;
max-width: 27%;
  font-size: 2vmax;
height: fit-content;
  padding-bottom: 4vmax;

font-family: 'Px437_IBM_XGA-AI_12x23';
        background: linear-gradient(279deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
        background-size: 400% 400%;

        -webkit-animation: AnimationName 17s ease infinite;
        -moz-animation: AnimationName 17s ease infinite;
        animation: AnimationName 17s ease infinite;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color: transparent;
}

#peque {


}
.fausto {
  position: -webkit-sticky;
  position: sticky;
  margin-top:1%;
  left:96%;
  top:0%;
  max-width: 8%;
  width:fit-content;
  height: fit-content;
  background-color: black;

  box-sizing: border-box;
  writing-mode:  vertical-rl;
  text-orientation: upright;
        font-family: 'Px437_DOS-V_TWN19';
}
.sobre {

position: -webkit-sticky;
position: sticky;
margin-top:3%;
left:0%;
top:75%;
max-width: 8%;
width:fit-content;
height: fit-content;
background-color: black;
text-orientation: upright;
box-sizing: border-box;
writing-mode:  vertical-rl;
text-orientation: upright;
z-index: 1;

}
.descripcion {
  font-size: 1.8vmax;

  margin-left: 5vmax;
    margin-right: 1vmax;

transform: translateY(-120px);
  font-family: 'Px437_DOS-V_TWN19';
max-width: 17%;

}

h3 {
   letter-spacing: 0px;
    line-height: -0.8;
  font-size: 1.5vmax;
  writing-mode: vertical-lr;
          text-orientation: upright;
            letter-spacing: 0px;

            font-family: 'Px437_IBM_XGA-AI_12x23';
}

p {
  padding-top: 1vmax;
  font-size: 1.8vmax;
  position: static;
  margin-left: 5vmax;
    margin-right: 4vmax;
    margin-bottom: 2vmax;


  font-family: 'Px437_DOS-V_TWN19';
}
a {

 text-decoration: none;
 background: linear-gradient(129deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);

      background-size: 400% 400%;   -webkit-background-clip: text;
 -moz-background-clip: text;
 -webkit-text-fill-color: transparent;
 -moz-text-fill-color: transparent;

   -webkit-animation: AnimationName 14s ease infinite;
   -moz-animation: AnimationName 14s ease infinite;
   animation: AnimationName 14s ease infinite;

}

a:hover {
background: linear-gradient(90deg, #BF953F, #FCF6BA,#AA771C, #6812c0, #FBF5B7 );
background-size: 700% 700%;   -webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;

-webkit-animation: AnimationName 22s ease infinite;
-moz-animation: AnimationName 22s ease infinite;
animation: AnimationName 22s ease infinite;
}
@media screen and (max-width: 800px) {
  .contenedordeobjeto{
    height: 55%;

  }
  b{
    font-size: 2.6vmax;
  }
  .textodeobjeto{
    font-size: 1.3vmax;
top:38%;
    padding-left:6vw;
    max-width: 29%;
  }
  h1{
        margin-left: 4vmax;
        font-size: 10vw;
        max-width: 80%;
  }
.contenedor{

  width: 95%;
  box-sizing: border-box;
  top:25%;
  left:2%;
  right:2%;
}

  img {
    margin-left: .4vmax;
padding-right: 2%;
padding-left: 2%;
transform: translateX(-29%);
    height:auto;
    width:30vh;
     /* The width is 100%, when the viewport is 800px or smaller */
  }

.contenedordeimagen{
  height: auto;
width:30vh;
}
.contenedorgeneral{
  height: 100%;
}
  .exposiciones, .eventos, .sobre{
    top:23%;
    max-width: 37%;
  }
}