/* 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;
     }
       @font-face {
       font-family: 'unscii-16-full';
       src: url(../fonts/unscii-16-full.woff);
     }
 
   body {

       height: 100%;
       width: 100%;
       background-color: black;

scroll-behavior: smooth;
color:grey;
overflow-y: none;
overflow-x: none;
perspective: 2px; /* <-- This line */

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

     }
     * {
       box-sizing: border-box;
     }

/* fondo de particulas */
canvas{ display: flex ; vertical-align: bottom; background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover; }
/* ---- particles.js container ---- */
#particles-js{ position:relative; width: 100%;background-color: #000000;

    transform-style: preserve-3d;
  height: 100%;
  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: 4vmax;
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','unscii-16-full';
  -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: 110%;
overflow-x: none;
}
     .contenedor {

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

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

overflow-y: none;

}
.contenedordeimagen {
  object-fit: cover;
left:40%;
  height: auto;
   width: 36vw;
   scroll-snap-align: middle;
  scroll-behavior: smooth;
opacity: 0;
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;



}


     img {

transform: translateX(64%);
padding-left: 43%;
height:22vh;
width: auto;
       margin-bottom: 1vmax;
opacity: 1;
     }

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

           font-family: 'Px437_DOS-V_TWN19';
   }

   .icon {
     display: inline;
     height: 43px;
     filter: invert(66%) hue-rotate(164deg);
text-align: left;
transform: translateX(-63%);
   }
   .icon:hover {
     filter: invert(66%) hue-rotate(311deg) saturate(2);


   }

   .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';
   }
     .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{
text-align: justify;
margin: 2vmax;
  position: fixed;
  bottom:6%;
  top:44%;
box-sizing: content-box;
padding-left:3vw;
max-width: 40%;
  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 {


}

.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: 80%;

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

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

  img {
    margin-left: .4vmax;
padding-right: 2%;
padding-left: 2%;
transform: translateX(-29%);
    height:auto;
    width:20vh;
     /* The width is 100%, when the viewport is 800px or smaller */
  }
.icon{
   height: 33px;
   width: 33px;
}
.contenedordeimagen{
  height: auto;
width:20vh;
}
.contenedorgeneral{
  height: 100%;
}
  .exposiciones, .eventos, .sobre{
    top:23%;
    max-width: 37%;
  }
}