/* tal y tanto arriba */

@font-face {
font-family: tex;
/* src: url(fonts/texgyreheroscn-regular.otf); */
src: url(fonts/texgyreheros-regular.otf);

}
@font-face {
font-family: tex-bold;
src: url(fonts/texgyreheroscn-bold.otf);
}
@font-face {
font-family: mono;
src: url(fonts/JetBrainsMono-Regular.woff2);
}

@font-face{
  font-family: italo;
  src: url(fonts/Junicode-ItalicCondensed.ttf);
  /* src: url(fonts/texgyreheros-regular.otf); */
}
::-webkit-scrollbar {
  display: none;
}


*{
  border-color:#e2e2e2;

  scrollbar-width:none;
  -ms-overflow-style:none;
    /* text-shadow: 0 0 12px #e2e2e2; */

        }


/* ::selection {
  color:#60fcae;
} */

body{
  /* background-image: url('images/main_bg-b.png'); */
  /* background-color: #e2e2e2; */
  /* overflow-y:scroll; */
  /* margin:10px; */
}

mark {
  background-color: #e2e2e2;
  /* border-radius: 2px; */
}

.ditherbg{
    background-image: url('images/main_bg-b.png');
    position: fixed;
    width: 100%;
    height: 100%;
    z-index:2;
    isolation: isolate;
    /* background-color: red; */

}


a:link:hover{
  cursor: pointer;
  /* color:#60fcae; */
}

a:link:visited{
  color:#60fcae;
}

.contact:hover{
  /* color:#60fcae; */

  transition: 0.1s;
}
#ido{
  color:#777;
}



@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.loader{
  position: fixed;
  display:flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  width:100%;
  height:100%;
  /* bottom:0; */
  /* border: 16px solid #e2e2e2;
  border-top: 16px solid #60fcae; */
  border-radius: 50%;
  /* width: 120px;
  height: 120px; */
  animation: spin 12s linear infinite;
  background-color:#333;

}

.loader p {
  margin:2px;
  text-align: right;
}

body {
  /* overflow: hidden; */
  /* overflow-y: hidden; */
  margin:0;
  padding: 0;
  /* background: rgb(96,252,174);
  background: linear-gradient(0deg, rgba(96,252,174,1) 0%, rgba(242,242,242,1) 25%, rgba(242,242,242,1) 80%, rgba(96,252,174,1) 100%); */
  
}



.twocolumn{
  /* margin-top: 111px; */
  display: grid;
  /* grid-template-columns: 50% 50%; */
  /* border-left:solid; */
  border-width: thin;
  /* margin: 0 0 0 25%; */
  z-index: 99999;
  align-items: baseline;

  /* background-color: #999; */

}

.bio, .reachout, .ido{
  /* font-size: 26px; */
  position: absolute;
  /* max-width: 25%; */
  width: 100%;
  z-index: 6;
  /* margin: -4px 0 0 0; */
  justify-content: center;
  /* text-align: center; */
  align-items: center;
  /* text-shadow: px 0 0 #60fcae; */
  /* font-family: tex; */
  color: #e2e2e2;
  touch-action: none;
  /* line-height: 1.5em; */

  /* background-color: red; */

}

.bio a:hover {
  cursor: pointer;
  color:#60fcae;
}


#about{
  
  font-family: tex;
  font-size: 16px;
  /* max-width: 320px; */
  /* opacity: 80%; */
  /* line-height: 1.0em; */
  display: grid;
  color: #e2e2e2;
  width: 100%;
  /* overflow-wrap: break-word;
  word-break: break-all; */
  border-radius: 0 0 50px 50px;
  text-align: left;
  /* background-color: #60fcae; */
  /* margin-top:-8px; */
  position: fixed;
  bottom:0;
  padding: 0;
  line-height: 1em;
  bottom: 2px;
  /* word-break: break-all; */

  /* white-space:  pre-wrap; */
}

#about2{
  text-align: left;

  position: fixed;
  height: 100px;
  /* background-color: red; */
  display: block;
  color: #e2e2e2;
  /* margin-top:12px; */
  /* position: fixed; */
  font-size: 18px;
  line-height: 1.2em;
  top:0;
  padding: 0;
  max-width: 320px;
  max-height: 100px;
  height: 100%;
  /* overflow-wrap: break-word;
  word-break: break-all; */
  font-family: tex;
  /* opacity: 80%; */

  text-shadow:0 0 14px #e2e2e2;
}

#about3{
  font-family: tex;
  font-size: 16px;
  /* max-width: 320px; */
  /* opacity: 80%; */
  /* line-height: 1.0em; */
  display: grid;
  color: #e2e2e2;
  width: 100%;
  /* overflow-wrap: break-word;
  word-break: break-all; */
  border-radius: 0 0 50px 50px;
  text-align: right;
  /* background-color: #60fcae; */
  /* margin-top:-8px; */
  position: fixed;
  bottom:0;
  padding: 0;
  right: 32px;

  /* word-break: break-all; */

  /* white-space:  pre-wrap; */
}

.ido{
  bottom:24px;
}

.bio p, .bio img {
  /* max-width: 85%;
  margin:0 0 22px 22px; */
  margin:-6px 0 6px -4px;


  /* max-width: 230px; */
}
.bio img{
  position: relative;

  width: 100%;
  object-fit: cover;
  display: block;

}


.bio a {
  margin-left: 4px;
}



.displayCaption{

  /* filter: blur(1px); */
  /* max-width: 100px; */
  /* opacity: 80%; */
  position: fixed;
  display: grid;
  /* display: inline; */
  
  justify-content: right;
  /* grid-template-columns: 50% 50%; */
  /* display: none; */
  z-index: 5;
  width: 100%;
  /* letter-spacing:0.03em; */
  /* line-height: 0.5em; */
  /* background-color: #333; */
  /* border-color: #60fcae; */
  border-color: #e2e2e2;
  border-width: thin;
  border-style: none none none none;

  width:50%;
  /* transform: rotate(-90deg) translate(-50%, 90%) ; */
  transform: translate(100%) ;


  height: 50%;
  /* margin: auto auto auto auto; */
  text-shadow: 0 0 6px #000;
  /* top:0;
  left: 0;
  bottom: 0;
  right: 0; */
  color: #e2e2e2;
  /* mix-blend-mode: difference; */
  /* transform: rotate(25deg); */
  /* margin-top: -2px; */
  font-size: 14px;
  text-align: right;
  align-items:end;
  /* bottom: 0; */
  /* background-color: red; */
    /* justify-content: stretch; */
  z-index: 3;
  pointer-events: none;
  text-shadow:0 0 14px #e2e2e2;
  font-family: tex;
  line-height: 0.1em;


}
iframe{
  margin: 0 0;

  /* width: 320px; */
  /* margin: 6%; */
  /* padding:0 0 12px 0; */
  border-style: none none dashed none;
  border-width: thin;
}

.linkwrap { position:relative; display:inline-block; }
.blocker { position:absolute; height:120px; width:320px; z-index:1; transform: translateY(120px); background:rgba(255,0,0,0.0);  }
.linkwrap iframe { z-index: 2; }

.year{
  /* filter: blur(1px); */
  /* max-width: 100px; */
  opacity: 80%;
  font-family: tex;
  position: absolute;
  display: grid;
  /* display: inline; */
  
  justify-content: right;
  /* grid-template-columns: 50% 50%; */
  /* display: none; */
  z-index: 6;
  width: 100%;
  letter-spacing:0.03em;
  /* line-height: 0.5em; */

  height: 100%;
  /* margin: auto auto auto auto; */
  text-shadow: 0 0 6px #000;
  /* top:0;
  left: 0;
  bottom: 0;
  right: 0; */
  color: #e2e2e2;
  /* mix-blend-mode: difference; */
  /* transform: rotate(25deg); */
  /* margin-top: -2px; */
  font-size: 16px;
  text-align: right;
  align-items:end;
  /* bottom: 0; */
  /* background-color: red; */
    /* justify-content: stretch; */
  z-index: 99;
  pointer-events: none;

}

.back, #canv_net{
  position: fixed;
  z-index:2;
  isolation: isolate;
  /* mix-blend-mode: multiply; */
  /* opacity: 75%; */
  mix-blend-mode: darken;

}

.back img{
  /* transform: scale(1.5); */

}

.back2{
  /* position: fixed; */
  position:absolute;
  display: grid;
  z-index:2;
  /* display: none; */
  isolation: isolate;
  /* pointer-events: none; */
  mix-blend-mode:exclusion;
  
  touch-action:none;
  pointer-events: none;

}


.screen img, .back img, .back2 img{
  /* pointer-events: none; */
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 100%;
  height: 100%;

}
.back2 img{
  /* border-radius: 66px; */

  /* width:55%; */
  /* height: 70%; */
  /* height:35%; */
  /* opacity: 80%; */
  height: 50%;
  width: auto;
  margin: auto;
  /* max-height: 70%; */
  max-width: 60%;
  display: block;
  /* filter:blur(4px) */
  /* filter: drop-shadow(0px 0px 22px #333333); */
  /* border-radius: 6px; */
}


.imgcontainer{
  z-index: 3;
  display: inline;
  width: 100%;
  text-align: center;
  display: fixed;
  /* margin-top: 100px;
  margin-bottom: 100px; */
  /* mix-blend-mode: hard-light; */


}

.projects{
  width: 100%;
  height: 100%;
  /* background-color: #60fcae; */
  position: absolute;
  /* overflow-y: hidden; */
  /* margin-bottom:100px; */
  display:flex;
}
.projects, .description{
  font-family: tex;
  font-size: 16px;

  /* max-width: 500px; */
  text-decoration: none;
  color: #e2e2e2;
  /* justify-content: center; */
  text-align: left;

  max-height:100%;
  height:100%;

}

.description {
  opacity: 90%;
  font-family: tex;
  font-size: 14px;

  /* word-break: break-word; */
  /* overflow-wrap: break-word;
  word-break: break-all; */
  max-width: 320px;


}

.description a{
  color:#333;

}

.description:hover{
  cursor: pointer;
  /* color:#60fcae; */
}

#description:hover {
  filter:blur(2px);
}
.projects a {
  line-height: 1.2em;
}

#vertical {
  max-width: 30%;
}

a{
  text-decoration: none;
}

#list{
  /* position:a; */
  position: absolute;
  /* display: grid; */
  /* grid-template-columns: 50% 50%; */
  /* margin:0; */
  width: 100%;
  height: 100%;

  overflow: scroll;
  justify-content: left;
  align-content: center;
  align-items: center;
  display: flex;
  margin-top:-2px;
  /* mix-blend-mode: normal; */

  /* -webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); */
  /* margin: 100px 0px 0px 0px; */
  /* padding-bottom: 50%; */
  /* background-color: red; */
  
}

button{
  font-family: tex;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  /* border-width: 0 0 1px 0;
  border-style: dashed; */
}



.active, button:hover {
  cursor: pointer;
}

.contentWorks, .contentPress, .contentWeb, .contentIndividual{
  /* display: none; */
  /* display: grid; */
  max-height: 0;
  overflow: scroll;
  transition: max-height 0.1s ease-in-out;
  /* overflow: scroll; */
  display: block;
  text-align: left;
  max-width: 300px;


}


#divWorks, #divPress, #divWeb{
  font-size: 16px;
  color: #60fcae;
  text-align: left;
  text-shadow:0 0 14px #60fcae;
  border-width: 0;


  

  
}

#divIndividual, .contentIndividual, #external{
  font-family: tex;
  /* max-width: 320px; */
  font-size: 14px;
  color: #e2e2e2;
  text-align: left;
  /* opacity: 100%; */
  overflow: hidden;
  text-shadow:0 0 14px #333;
  

}
#divIndividual:hover{
  opacity: 100%;
}

.contentIndividual{
  
  /* text-indent: 50px; */
  font-size: 18px;
  line-height: 1.3em;

  color:#e2e2e2;
  /* opacity: 90%; */
  /* background-color: #60fcae; */
  border-width: 1px 0 0 0;
  border-style: dashed;
  /* border-style: none; */

  background-color:#33333325;
  /* background-color:#60fcae25; */

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

}

.links{
  color: #60fcae;
  text-decoration:underline;
  /* font-weight: bold; */
  /* font-size: 24px; */
  cursor: pointer;

  /* background-color:#60fcae; */
}

#widecontent {
  width: 100%;
}

.close:hover,
.close:focus {
  color: #60fcae;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: block;
  display: none;
  /* text-align: left; */
  margin: 15% 0 0 0;
}


.description:hover{
  /* filter: blur(2px); */
  opacity: 100%;
  /* color:#333; */
  transition: 0.1s;
}
.long-text{
  /* width: 80%; */
  max-width: 50%;
  /* margin: auto; */
  /* word-break: break-all; */
  text-overflow: "-";
  margin: 5% 25%;

}

#date{
  font-family: italo;
  margin: 0 0 0 -6px;
  font-size: 8px;
  color:#333;
  padding: 0 2px;
  border-radius: 6px;
  border-color:#333;
  border-style: solid;
  border:none;
  border-width: thin;
}

.slidecontainer {
  /* background-color: red; */
  position: absolute;
  display: grid;
  justify-content: right;
  width: 32px; /* Width of the outside container */
  height: 32px;
  right: 0;
  align-items: end;
  bottom: 0;
  touch-action: none;
  z-index: 4;
  /* padding: 0 8px 8px 0; */
  

}


#counter{
  padding: 0 0 0 0;

  font-family: tex;
  color:#e2e2e2;
  font-size: 12px;
  text-align: right;
  opacity: 0.8;
}

.slidecontainerCounter {
  pointer-events: none;

  /* background-color: red; */
  position: absolute;
  display: grid;
  /* justify-content: right; */
  /* height: 32px; */
  right: 0;
  /* align-items: start; */
  top: -4px;
  touch-action: none;
  z-index: 4;
  /* text-align: right; */


}


.locationcontainer {
  background-color: red;
  position: absolute;
  display: grid;
  justify-content: right;
  width: 132px; /* Width of the outside container */
  height: 132px;
  right: 0;
  align-items: end;
  bottom: 0;
  touch-action: none;
  z-index: 4;
  
  /* padding: 0 8px 8px 0; */

}
#location{
  color: #e2e2e2;
  font-family: tex;
  /* width:500px; */
}

.strobo {
  padding: 0 0 6px 0;
  /* -webkit-appearance: none;
  appearance: none; */
  font-family: tex;
  /* color: #e2e2e2; */
  width: 28px; /* Full-width */
  height: 30px; /* Specified height */
  bottom: 0;
  /* background: #e2e2e200; */
  outline: none; /* Remove outline */
  /* opacity: 0.8; */
  line-height: 1em;
  border-style: dashed;
  border-width: 1px;
  border: none;
  /* border-radius: 22px; */
  border-radius: 0;
  font-size: 22px;
  /* margin-bottom: 16px; */
  /* padding-bottom: 26px; */

  /* background-color: #333; */
  /* transform: rotate(180deg); */

}

.strobo:hover{
  cursor: pointer;
}

.location {
  /* -webkit-appearance: none;
  appearance: none; */
  font-family: tex;
  /* color: #e2e2e2; */
  width: 100%; /* Full-width */
  height: 20px; /* Specified height */
  top: 0;
  /* background: #e2e2e200; */
  outline: none; /* Remove outline */
  /* opacity: 0.8; */
  line-height: 1em;
  border-style: none;
  border-width: 1px;
  /* border-radius: 22px; */
  /* background-color: #333; */
  /* transform: rotate(180deg); */

}

/* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: #e2e2e200;
  border: 1px dashed #e2e2e2;

}

/* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track {
  height: 2px;
  background: #e2e2e200;  
  border: 1px dashed #e2e2e2;
  /* border-radius: 16px; */
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  height: 13px;
  width: 13px;
  background-color: #e2e2e2;
  border-radius: 22px;
  border: 1px solid #333;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  height: 13px;
  width: 13px;
  background-color: #e2e2e2;
  border-radius: 22px;
  border: 1px solid #333;
}

input[type="range"]::-webkit-slider-thumb:hover{
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb:hover{
  cursor: pointer;
}

#credits:hover{
  color:#333;
}

/* Caption text */
.caption-container {
  font-size:66px;
  padding: 2px 16px 16px 2px;
  color:#333;
  /* z-index:4; */
  font-family: tex;
  width:100%;
}

.detail {
  display: block;
  color:#333;
  /* z-index:4; */
  font-family: tex;
  margin: 11px 0;
}

#mini{
  font-size:12px;
}


@media screen and (min-device-width: 100px) and (max-device-width: 900px) {

  body{
    /* background-image: none; */
    background-color: #60fcae;
    /* overflow-y: hidden;
    overflow-x: hidden; */
    /* overflow-y: hidden;
    overflow-x: scroll; */
    /* overflow-y: hidden; */



  }

  .ditherbg{
    background-image: url('images/main_bg-b.png');
    position: fixed;
    width: 100%;
    height: 100%;
    /* z-index:2; */
    isolation: isolate;
    transform: scale(2.0);
    /* background-color: red; */

}

.imgcontainer{
  /* z-index: 4; */

}

.slidecontainer{
  align-items: center;
  bottom: 120PX;
  width: 120px; /* Width of the outside container */
  height: 120px;
  /* background-color: red; */

}


.strobo {
  /* -webkit-appearance: none;
  appearance: none; */
  font-family: tex;
  /* color: #e2e2e2; */
  width: 120px; /* Full-width */
  
  height: 100px; /* Specified height */
  /* top: 0; */
  /* background: #e2e2e200; */
  outline: none; /* Remove outline */
  opacity: 0.8;
  /* filter: drop-shadow(0 0 12px #e2e2e2); */
  /* line-height: 0.8em; */
  border-style: dashed;
  border-width: 1px;
  border-color: #e2e2e2;
  font-size: 64px;
  padding-bottom: 22px;
  border-radius: 80px 0 0 80px;
  /* background-color: #333; */
  /* transform: rotate(180deg); */

}


  .back2{
    /* z-index: 2; */
    mix-blend-mode: normal;

  }

  .back2 img{
    
    /* overflow: hidden; */
    /* display: none; */
    /* filter: blur(4px); */
    height: 60%;
    width: auto;
    margin: auto;
    /* max-height: 70%; */
    max-width: 80%;
    display: block;
    /* border-radius: 22px; */
    /* filter:drop-shadow(0 0 22px #e2e2e250); */

  }

button{
  /* background-color: red; */
  max-width: 35%;
  /* border-width: 0 0 1px 0; */
  /* border-style: dashed; */
}


  #about{
    
    text-shadow:0 0 14px #e2e2e2;
    /* mix-blend-mode: difference; */
    font-size: 58px;
    line-height: 0.8em;
    padding-bottom:12px;
    opacity: 80%;

  }

  iframe{
    margin: 0 60px;
    width: 100%;
    height: 100%;
    /* transform: scale(2.0); */
  }
  #about2{
    max-width: none;
    max-height: none;
    font-size: 58px;
    text-shadow:0 0 14px #e2e2e2;
    /* overflow-wrap: break-word;
    word-break:break-all; */

    /* max-width: 100%; */
    mix-blend-mode: difference;
    opacity: 80%;
    line-height: 1.0em;

  }

  
  #container3D{
    display:none;
  }


  #credits{
    font-size: 60px;
    white-space: normal;
    word-break: normal;
  }

  .long-text{
    max-width: none;
    white-space: normal;
    /* width: 100%; */
  }
  

  .description{
    max-width: 100%;
    
  }



  .banner2 span {
    animation-delay: 10s;
  }
  audio { margin:0 0 0 5px; width:100%; height:100px;}
  audio source{
    height:100%;
    max-height: 100%;
    
  }
  
  #counter{
    padding: 0 0 0 0;
    /* margin-top: 12px; */
    font-family: tex;
    color:#e2e2e2;
    font-size: 32px;
    text-align: right;
    opacity: 0.6;
    margin-bottom: 162px;
    margin-right: 140px;
  }
  .slidecontainerCounter {
    align-items: end;
    top:0;
    /* bottom: 120px; */
    height: 100%;
    pointer-events: none;
  
  }
  .displayCaption{
    font-size: 32px;
    text-align: right;
    /* max-width: 500px; */
    line-height: 1em;
    display: grid;
    border-color: #e2e2e2;
    border-width:2px;
    border-style: none none dashed none;

    /* align-items:center;
    justify-content: center; */
    /* z-index: 100; */
    /* margin-top: 0 ; */
    opacity: 100%;
    /* z-index: 3;   */
    /* display: none;  */
    
    
    
  }

  
#list{
  display: grid;
  overflow: scroll;

  /* display: block; */
  /* backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px); */

}

  .contentWorks, .contentPress, .contentWeb, .contentIndividual{
    /* display: none; */
    display: grid;
    max-height: 0;
    /* overflow: hidden; */
    /* transition: max-height 0.1s ease-in-out; */
    /* max-width: 94%; */
    /* word-break: break-all; */
    width: 100%;
    /* overflow:hidden; */
    /* background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(51,51,51,1) 100%);  */
    display: block;
    text-align: left;
    max-width: none;


  }

  #divWorks, #divPress, #divWeb{
    font-size: 42px;
    color: #60fcae;
    text-align: left;
    line-height: 3.8em;
    /* height: 600px; */
    /* padding: 0 0; */
    overflow-wrap:break-all;
    overflow: scroll;
    
    /* z-index: 10000002; */
    /* background-color: #333; */
    /* border-width: 2px 0 0 2px; */
    /* border-style: dashed; */
    
  }

  #divIndividual, .contentIndividual, #external{
    font-family: tex;
    max-width: 88%;
    margin: 0 6%;

    background-color: #33333350;
    text-shadow:0 0 14px #333;


    width: 100%;

    font-size: 42px;
    /* padding: 4px 0; */
    line-height: 1.8em;
    color: #e2e2e2;
    text-align: left;
    opacity: 100%;
    border-width:0 0 2px 0;
    border-style: dashed;
    /* margin: 0 60px; */
    /* text-indent: 60px; */

    background-color:#33333350;
    line-height: 1.4em;



  
  }

  .contentIndividual{
    
    text-indent: 50px;
    font-size: 42px;
    color:#e2e2e2;
    /* opacity: 100%; */
    /* background-color: #333333; */
    /* border-width: 2px;
    border-style: dashed; */
    /* max-width: 50%; */
    background-color:#33333390;

    /* background-color:#60fcae90; */
    /* backdrop-filter: blur(34px);
    -webkit-backdrop-filter: blur(34px); */

    /* padding: 0 60px 0 0; */
    /* backdrop-filter: blur(22px); */
    line-height: 1.2em;

  
  }

}





/* tal y tanto abajo */