body {

  background-color: #161616;
position: fixed;
  margin:0;
  padding:0;
  font-family:"HelveticaNeueLTPro-Roman";
  -webkit-font-smoothing: antialiased;
  color:    #161616;



}

@font-face {
    font-family: "HelveticaNeueLTPro-Roman";
    src:
   url("../font/HelveticaNeueLTPro-Roman.otf")format('embedded-opentype'),
    url("../font/HelveticaNeueLTPro-Roman.woff") format('woff'),
    url("../font/HelveticaNeueLTPro-Roman.ttf")  format('truetype'),
    url("../font/HelveticaNeueLTPro-Roman.svg") format('svg');
}

.Loader {
  cursor: wait;
  background-color: #161616;
  width: 100vw;
  height: 100vh;
  animation: load;
  animation-duration: 8s;
  animation-fill-mode: forwards;
  opacity: 1;
      font-size: 3vw;
color: white;
z-index: 10000;

  position: fixed;

}
.Loader:hover .progress-tooltip2{

opacity: 1;

}
.Loader:hover .progress-tooltip{

opacity: 1;

}
.Loader:hover .progress-tooltip4{

opacity: 1;

}
.Loader:hover .progress-tooltip5{

opacity: 1;

}
.Loader .progress-tooltip2{
 text-shadow: none;
color: white;


}
.Loader .progress-tooltip{
 text-shadow: none;
color: white;



}
.Loader .progress-tooltip4{
 text-shadow: none;
color: white;



}
.Loader .progress-tooltip5{
 text-shadow: none;
color: white;



}
.Loader .text{

transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;

}


@keyframes load {
  0% {visibility: visible; }
99% {  visibility: visible;}
100% {visibility: hidden;




}
}




.saco {
  transition: 1s;
opacity: 0;
  position: absolute;
}


/* width */
::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar:hover {

}

@-webkit-keyframes blink  {

  0%{opacity:   1;}



  50%{opacity:   0.2;}

  100%{opacity:   1;}

}

@-webkit-keyframes barra  {

  0%{width:   0%;}



  50%{width:  98.75%}

  100%{width:0%}

}


.foto:hover .bar{

  opacity: 0.2;
  animation-play-state: running;
}

.bar {
z-index: 100;
opacity: 0.2;
position: absolute;
bottom:0;
left: 0vw;
width: 0.25vw;
height:  0.25vw;
background-color: black;
animation-name: barra;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;



}
* {
  box-sizing: border-box;

}

::selection{
background-color: transparent;
color:grey;

}



@keyframes enter {
  0% { opacity: 0;  }

100% {opacity: 1;}



}

.instruccionts{

  font-size: 0.9vw;
}
.fix{

  animation: enter;
  animation-duration: 2s;


width: 100vw;
height: 100vh;
  position: absolute;
  color: white;

z-index: 1000;
}

.bigger{
  color: white;
  text-align: center;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
position: absolute;
font-size: 0.9;


}
.titler{
  animation: blink;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
  animation-iteration-count: infinite;
  cursor: pointer;
  font-size: 6vw;
width: 100%;
color:white;
text-align: center;
transform: translate3d(0,0,0);
}
  .mousemove_rotate {
    animation: blink;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-iteration-count: infinite;
    cursor: pointer;
    font-size: 3.8vw;

  width: 100%;
  color:white;
  text-align: center;
  transform: translate3d(0,0,0);
  }
.fix a:hover {
animation: none;
opacity: 1;
cursor: pointer;
}
.back {
position: absolute;
width: 100vw;
height: 100vh;
border: 2vw solid white;
}
.log{
display: none;
padding: 1vw;
color: #3FFF00;
font-size: 2.5vw;
line-height: 2vw;
width: 61.5vw;
text-align: left;
}
.info{

top:50%;
transform: translateY(-50%);
height: 80vh;
position: fixed;
width:45vw;
z-index: 0;
cursor: text;
padding-left:1vw;
padding-right:1vw;
color: white;
transition:1s all;
font-size: 1.5vw;
line-height: 1.8vw;
}
.backg{
z-index: -1;
top:0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
transition: 1s;
}
.foot{
font-size: 0.9vw;
line-height: 1.2vw;
position:absolute;
bottom: 0.5vw;
}

.foot a{
  color: black;
}
.fixed{
font-size: 0.9vw;
line-height: 1vw;
position: fixed;
bottom:0.35vw;
left: 2vw;
}
.title{

text-indent:10px;
display: inline-block;
line-height: 1vw;
cursor: default;
padding-bottom: 0.2vw;



}


.scroll{
  display: none;
  -webkit-box-shadow:0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
     -moz-box-shadow:0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
          box-shadow:0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
transform: translateY(-50%);
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid black;
top:50%;
padding-top: 0.5vw;
padding-left: 0.5vw;

width: 16vw;
background-color: white;
height:calc(80vh + 2px);
position: absolute;
opacity: 1;
margin-left: 45vw;
font-size: 0.9vw;

overflow: hidden;
}

.blocker {
opacity: 1;

  line-height:auto;
  margin-left: 7vw;

  font-size: 2vw;
left: 50%;
top:50%;
z-index: 200;
width: 35vw;
height: 80vh;
  transform: translate(-50%, -50%);
  position: absolute;
}
.archive {
opacity: 0;

  line-height:auto;
  margin-left: 8vw;

  font-size: 1.5vw;
left: 50%;
top:50%;

  transform: translate(-50%, -50%);
  position: absolute;
}


 .hover_img {
   display: none;


margin-left: calc(16vw);
height: 80vh;
width: 35vw;

position: fixed;

left: 0;
top:0;
}
.im{
  width: 35vw;

  padding: 0.5vw;
  height: 80vh;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
z-index: 10;
}
.ne{cursor: default;
  display: inline-block;

}
.hover_img:hover  {

}
.ne:hover .archive {
display: none;


}
.ne:hover .archive2 {
opacity: 1;


}

.archive2 {

width: 35vw;
text-align: center;
opacity: 0;
  line-height: auto;
  margin-left: 16vw;

font-size: 1.5vw;
z-index: 100;
top:50%;
background-color: white;
  transform: translateY(-50%);
  position: absolute;
}



.name:hover img{
align-items: center;
justify-content: center;
cursor: pointer;
display: flex;
}

.hover_img  img {
display: none;
width: 10%;

}

.row{

width: 15vw;
position: relative;
line-height: 1vw;
}

.year{
display: none;
position: absolute;
right: 0.5vw;
}

.name{

}

.center {
display: none;
padding: 0px;
overflow-x: hidden;
overflow-x: scroll;
width: 100%;
}

.center img {
opacity: 0.2;
float: left;
padding:0.25vw;
width: 10%;

}
.bog{
transition: 1s;

overflow-y: scroll;
opacity: 0.2;
}


.bog:hover{
  opacity: 1;

}
.loupe {
    display: none;
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(0, 0, 0, 0.25);
z-index: 100000;
overflow: hidden;
}
.single{

  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;


  height: 100%;
  width: 100%;


}

.single_4{
display: flex;
align-items: center;
align-content: center;
justify-content: center;
position: relative;


height: 100%;
width: 100%;



}
.single_6{

  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;


  height: 100%;
  width: 100%;




}
.single_7{

  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;


  height: 100%;
  width: 100%;


}
.single_8{

  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;


  height: 100%;
  width: 100%;



}

.foto:hover .bog{
  opacity: 1;
}

.foto:hover .single_4 img {
width: 80%;
transition-delay: 1s;
}
.foto:hover  .single_6 img {
width: 80%;
transition-delay: 1s;
}
.foto:hover .single_7 img {
width: 80%;
transition-delay: 1s;
}
.foto:hover .single_8 img {
width: 80%;
transition-delay: 1s;
}

.single img {

  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.5s;
  position: relative;

   width:  20%;


}

.single_4 img {


display: flex;
align-items: center;
justify-content: center;

transition: 0.5s;
position: relative;

 width:  40%;



}
.single_6 img {


  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.5s;
  position: relative;

   width:  60%;


}
.single_8 img {

  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.5s;
  position: relative;

   width:  80%;


}

.single_7 img {


  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.5s;
  position: relative;

   width:  70%;


}
.foto {
  transition: 1s;
    border-bottom:  1px solid black;
      border-right:1px solid black;
  display: flex;
  background-color: white;
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
z-index: 12;
justify-content: center;
 text-shadow: 1px 1px 5px rgba(255,255,255,0.5);

}
.credits{





}
.flex{
position: absolute;
bottom: 0.5vw;


  display: flex;
  font-size: 0.9vw;
  line-height: 1.2vw;
}
.contacto{
margin-left: 0.5vw;

position: absolute;
right: 10px;
}

.contacto a{
  color: white;
  text-decoration: none;
}
.bio{

    width: 65%;


padding-right: 10px;
  z-index: 0;






}


.scroll a {
  color: black;
  text-decoration: none;
}


.my-img {

  -webkit-box-shadow:0 1px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
     -moz-box-shadow:0 1px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
          box-shadow:0 1px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;



z-index: 12;
  border-left: 1px solid black;

  transition: 0.7s;
  width: 140vw;
  height: 400vh;
  background-color: transparent;
  position: absolute;

  transform: translateX(0%);
  top: 0;
  bottom: 0;
  margin: auto;
  cursor: -webkit-grab;
}
.my-img:active {
cursor:grabbing;

}

.about{
font-size: 0.9vw;
line-height: 1.2vw;
margin-bottom: 0.5vw;

}

.column{
    border-top:1px solid black;
  height: 400vh;
  position: relative;


width: 35vw;
display: flex;
justify-content: space-between;
flex-direction: column;

}
.all{

  display: flex;
}

.nun{

overflow: scroll;
}
.foto:hover
{

  background-color: #F2F2F2;
}


.foto:hover .progress-tooltip{

opacity: 1;

}






.tl{
position: absolute;
top:0;
left: 0;
width: 4px;
height: 4px;
background-color: black;
}
.tr{
  position: absolute;
top:0;
right: 0;
width:4px;
height: 4px;
background-color: black;
}
.bl{
    position: absolute;
bottom:0;
right: 0;
width: 4px;
height: 4px;
background-color: black;
}
.br{
position: absolute;
bottom:0;
left: 0;
width: 4px;
height:4px;
background-color: black;
}

.square_bottom{

  position: absolute;
  bottom:0px;
  left: 0px;
  width: 8px;
  height:4px;
  background-color: black;


}
.square_top{

  position: absolute;
top:0px;
  left: 0px;
  width: 8px;
  height:4px;
  background-color:black;


}
.square_tr{
  position: absolute;
top:0px;
  right: 0px;
  width: 8px;
  height:8px;
  background-color:black;


}
.square_tl{
  position: absolute;
top:0px;
  left: 0px;
  width: 8px;
  height:8px;
  background-color:black;


}

.square_br{
  position: absolute;
bottom:0px;
  right: 0px;
  width: 8px;
  height:8px;
  background-color:black;


}
.square_bl{
  position: absolute;
bottom:0px;
  left: 0px;
  width: 8px;
  height:8px;
  background-color:black;


}




.name:hover .progress-tooltip{
opacity: 0;

}
.name:hover .progress-tooltip2{
opacity: 1;

}
.foto:hover .progress-tooltip2{
opacity: 1;

}
.foto:hover .progress-tooltip{
opacity: 1;

}
.progress-tooltip3 {
  opacity: 0;
  width: 200px;
  text-align: left;
      position: absolute;
      bottom:0.5vw;
      margin-left: 0.5vw;
      z-index: 930;
      font-size: 0.9vw;

 text-shadow: 1px 1px 5px rgba(255,255,255,0.5);


      color: black;
}
.progress-tooltip5 {
  opacity: 0;

  text-align: left;
      position: absolute;

      margin-left: 0.5vw;
      z-index: 930;
      font-size: 0.9vw;
      line-height: 1.2vw;
right:0.5vw;
bottom: 0;


      color: black;
}
.progress-tooltip4 {
  opacity: 0;

  text-align: left;
      position: absolute;
top:0.5vw;
      margin-left: 0.5vw;
      z-index: 930;
      font-size: 0.9vw;
      line-height: 1.2vw;
left:0.5;




      color: black;
}


.progress-tooltip2 {
  opacity: 0;
 text-shadow: 1px 1px 5px rgba(255,255,255,0.5);
  text-align: left;
      position: absolute;
      bottom:0.5vw;
      margin-left: 0.5vw;
      z-index: 930;
      font-size: 0.9vw;
      line-height: 1.2vw;
left:0;



      color: black;
}
.progress-tooltip {
opacity: 0;
 text-shadow: 1px 1px 5px rgba(255,255,255,0.5);
width: 200px;
text-align: left;
    position: absolute;
    bottom:0.5vw;
    margin-left: 0.5vw;
    z-index: 930;
    font-size: 0.9vw;
      line-height: 1.2vw;



    color: black;
}
.box{

align-items: center;

  position: absolute;
  display: flex;
width: 100%;
height: 100%;
justify-content: space-between;



}

[big]{ height: 90%; opacity: 0; }
[mid]{  height: 50%;opacity: 0;}
[lit]{  height: 20%;opacity: 0;
transition:1s;}
[lit]:hover{  height:    90%;}




.mute{
 text-shadow: 1px 1px 5px rgba(255,255,255,0.5);
  display: none;
  cursor: pointer;
top: 0.65vw;
position: fixed;
opacity: 1;
font-size: 0.9vw;
line-height: 1vw;
z-index: 100000;
color: black;

}
.ri{
display: flex;
  position: absolute;
  left: 2vw;
}
#unmute{
  display: none;


}
#mute{


}
.mute a:focus-within {

color: blue;
}

.arch{

  margin-right: 10px;
}
.in{

  margin-right: 10px;
}
.img-cntnr {
transition: 1s;
margin-left: 50vw;
margin-top: 50vh;
  top:0px;
  position: relative;



}



.hello{

  position: absolute;
  cursor: pointer;
}

.movile{
display: none;

}

@media screen and (max-width: 1000px) {
.fix{
  display: none;
}
  .movile{
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
display: block;
position: fixed;
font-size: 3.5vw;
line-height:5vw;
color: white;

  }
  .movile a{
text-decoration: none;

  }
.Loader {

  display: none;


}
 .titler {

    font-size: 12vw;
    line-height: 14vw;

  }


.mute{

  display: none;

}

.saco{

  display: none;
}

}

  }