html,body {scroll-behavior: smooth;}
header { display: none; position: fixed; bottom: 0; left: 35%; z-index: 5; margin: 10vh; text-align: center; width: 30%;}
header.view {display: block;}
#intro {float: right;position:relative;z-index:10;}
#intro:after {content: ''; display: block; clear: both;}
#intro h1 {width: 270px; height: 140px;text-indent: -9999px;background: url(http://hemisferio.space/recursos/css/img/hemisferio.svg) no-repeat 50% 50%;background-size: auto;background-size: contain;display: inline-block; transition: height 4.33s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#intro p {max-width: 400px;padding: 0 1em 8em; height: 1px;-webkit-transition: .11s linear all;-o-transition: .11s linear all;transition: .11s linear all; text-align: right}
h1.title {
    position: sticky;
    top: 1.1em;
    left: 0;
}
::selection{background-color:#000;color:#666;text-shadow:none}
a {color: #ff3737; text-decoration: none; font-size: 3em; display: inline-block; position: relative;}
a:hover {color: rgb(255 96 171 / 23%);}
a::before,
body.es7 a::after {content: ''; display: block; width: 100%; height: 30px; background: #ff3737; position: absolute; top: 0%; left: 0; opacity: 0;-webkit-transition: .22s linear all;-o-transition: .22s linear all;transition: .22s linear all}
a:hover:before, a:visited:before {opacity: 1; top: 50%; height: 5px;}
a:visited {color: #d4d4d4;}
a:visited:before {background: #d4d4d4;}
a:visited:hover:before {top: 100%;}
button:hover {border-color: #000; background: #ccc; cursor: pointer;}
button span { display: block; font-size: .7em; color: black; border-bottom: dotted 12px #fff;}
button { padding: 1rem; border-radius: 6px; border-color: red; background: #dedeff; color: red; letter-spacing: .23em;}
button.es0 span {border-bottom-width: 23px;}
button.es0:hover {background: #dedeff;}
button.es1 {border-color: #73adff; color: #180606;}
button.es1 span {border-bottom-width: 13px;}
button.es2 {letter-spacing: .5em; font-weight: bold;}
button.es3 span {height: 0; color: #dedeff; transition: 2s all linear;}
button.es4 {letter-spacing: .55em; background: #fa1c1c; border-color: red;}
button.es5 {letter-spacing: .75em; cursor: pointer;}
button.es5 span {border: 0px;}
button.es6 {letter-spacing: .65em; background: #fff;}
button.es7 {letter-spacing: .85em; border-color: #000; background: #fff; cursor: pointer;}
button.es8 {letter-spacing: .65em;}
button.es9 {letter-spacing: .5em;}
button.es10 {cursor: pointer;}
button.es10 span {height: auto; color: #ccc;}

ul[data-elm="list"] {padding-top: 6vh;}
li {display: inline-block; margin: .5em 1em; position: relative;}
li::before {content: attr(data-skill); display: block; position: absolute; top: 0; left: 0; width: 222px; font-size: .77em; color: #e98c0e; opacity: .3; letter-spacing: .1em; transition: top .33s cubic-bezier(0.07, 0.89, 1, 1);}
li span {display: block; opacity: .3;}
li span a {font-size: 1rem;}
li:hover span {opacity: 1;}
li:hover::before {color: black; opacity: 1;}
#cursor, #cursor2 {display: none;}
#cursor2 {transition: .32s all cubic-bezier(0.96, 0.03, 0.58, 1); transition: .23s all linear;}
#cursor2.go {background: url(load.gif); background-size: contain; mix-blend-mode: multiply;}
#cursor2.go path {fill: #939393;}
.es6 #cursor,
.es6 #cursor2,
.es9 #cursor,
.es9 #cursor2 {display: block; position: fixed;}
article {padding: 6vh;}
.sc {overflow: hidden;padding: 0 !important;}
pre {margin-top: -13vh;}
.diss:hover a{transform: scale(-1, -1); }
.diss s {font-size: .44em;}
.diss:hover .dd {opacity: 1;  background: green; color: #d4d4d4;}
.dd {opacity: 0.3; display: inline-block; color: green;}
.ic-cv {display: none;}
#intro.view h1 { height: 0;}
#intro.view .ic-cv {display: block; padding: 1em; text-align: right; color: #ff3737; border-top: dotted 1px;}
#intro.view p.cv {height: 0; padding: 0; opacity: 0; overflow: hidden;}

#cont-col.buss {width: 100%; display: flex; flex-flow: column-reverse;}
body.es9 #cont-col.buss h1.title {margin: 0;}
@media screen and (min-width: 60em){
    footer {padding: 48vh 13vw 0;font-size: 6.6vh;text-align: right;position: absolute;} 
    .es9 footer {padding: 48vh 1em 0 0em;border-top: 1px solid;border-right: 3px solid;max-width: 600px; right: 10vw;}
}
footer a {font-size: 1.66rem;}
@media screen and (max-width: 60em){
    article {padding: 6vh .5em;}
    a {font-size: 2.2em;word-break: break-all;}
    pre {display: none;}
    footer {padding: 13vh 6vh 22vh;} 
    h1.title {top: initial; bottom: 0;}
    li:hover > a {opacity: .3;}
    .media.full img { height: max-content !important;max-width: 100%;block-size: initial;}
}
.media:hover img { transform: scale(1.23);}
.media img {height: 66px; margin-top: 1em; cursor: zoom-in; transition: transform .33s cubic-bezier(0.075, 0.82, 0.165, 1), height 1.33s cubic-bezier(0.93, 0.22, 0.17, 1);}
.media.full img {height: 593px; margin: 0; cursor: zoom-out;}
.media.full:hover img { transform: scale(1);}



/*------------------------------------*/
h1.title.es0 { position: initial; padding: 10vh; text-align: right;}

ul[class*="es"] > li {width: 100%;}
ul[class*="es"] > li ul {display: flex; flex-direction: row;}
ul[class*="es"] > li ul > li {width: 50%;width: 39%;
    vertical-align: top;
    border: 1px solid #ccc;
    border-radius: 5px;}
ul[class*="es"] li::before {position: initial;}

/*
body.es0 {background: #454545; color: #fe0;}
body.es0 li::before {color: #f3f3f3;}
body.es0 a {color: #a6ff00;}
body.es0 a:before {background: #a6ff00;}*/

body.es0 , 
body.es1 {background: #fdf6ef;}
body.es0 #intro, 
body.es1 #intro{float: none; max-width: 400px; margin: 0 auto; padding: 1em; border: 2px solid #454545; font-family: sans-serif; line-height: 1.2; border-radius: 4px;}
body.es0 #intro p {font-family: 'Times New Roman', Times, serif;}
body.es0 select {font-family: serif; font-size: 1.2em;}
body.es0 ul[data-elm="list"], 
body.es1 ul[data-elm="list"] {display: flex; flex-flow: wrap;}
body.es0 ul[data-elm="list"] > li, 
body.es1 ul[data-elm="list"] > li {width: 25%; margin: 2.1em; overflow: hidden; padding: 1em; border: 2px solid; box-shadow: 5px 5px 10px rgba(255, 0, 0, .3); transition: 1.2s all linear; background: #fffff5;}
body.es0 a, 
body.es1 a {display: block; overflow: hidden; color: #000; font-weight: 500;}
body.es0 a:hover, 
body.es1 a:hover {color: deeppink;}
body.es0 span a, 
body.es1 span a {display: inline-block;}
body.es0 li::before, 
body.es1 li::before {color: #000000; opacity: 1;  letter-spacing: .3em; white-space: nowrap; animation: pulse 10s cubic-bezier(0.6, 0.23, 0.92, 0.75) infinite alternate;}
body.es0 li:nth-child(even):before {animation-delay: -1.5s;}
body.es0 li span, 
body.es1 li span {opacity: 1;}
body.es0 li > a::after , body.es1 li > a::after {content: 'https:// URL PROJECT //:sptth'; display: block; font-size: .8rem; text-align: center; margin-bottom: 1rem; border-top: 1px solid #ccc; padding: .3rem; letter-spacing: .1em;}
@keyframes pulse { to {transform: translateX(-94%);}}
@media screen and (max-width: 60em){
    body.es0 ul[data-elm="list"] > li, 
body.es1 ul[data-elm="list"] > li {width: 100%; }
}
body.es1 #intro {border-color: #fff;}
body.es1 #intro p {padding: 0 1em 9em; text-align: center;font-size: 1.2em;}
body.es1 #intro.view .ic-cv {width: 90px; border: 1px solid; border-radius: 2em;}
body.es1 li::before {    animation: pulse 10s cubic-bezier(0.6, 0.23, 0.92, 0.75) infinite alternate;
    content: '\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0' attr(data-skill);
    width: 40%;
    color: red;
    
    /*padding-left: 11em;*/}
body.es1 li:nth-child(even):before {animation-delay: -5.5s;}
body.es1 ul[data-elm="list"] > li {padding: 3em 1.5em; box-shadow: none; margin: 1.5em; border-radius: 4em;}
body.es1 h1.title {margin: 2em 0;}
body.es1 a {/*white-space: nowrap;*/}
body.es1 li > a::after {transform: scale(-1); border-top: none;}
body.es1 li span {/*background: #694f4f; */ color: #f00; line-height: 1.2; /* padding: .5em; */ font-weight: 800;}
body.es1 li span:after { content: '* * * * * . * * .. * * . * * * * * * *'; display: block; text-align: center; background: red; height: 2px; color: red; margin-top: 1rem;}
body.es2 select {
    font-family: serif;
    font-size: 1.2em;
    background: none;
    padding: .3em .6em;
}
body.es3 {background: #fa1c1c;}
body.es3 h1.title {color: #630d0c;}
body.es3 li {border-left: 15px dotted #cf1313;padding-left: 1em; width: 25%; margin: 3em; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; vertical-align: middle; }
body.es3 li::before {transform: rotate(91deg); transform-origin: 0 0;opacity: 1; color: wheat; width: 166px; transition: .55s all cubic-bezier(0.42, 0, 0.39, 1.2);}
body.es3 li:hover::before {transform: rotate(0) translateY(-2em);}
body.es3 a { color: #000; display: block; width: 100%; overflow: hidden;}
body.es3 a:before {background: #cdff8d;}
body.es3 span a {display: inline-block; width: auto; color: #ffa932;}
body.es3 li span {opacity: .7;}
body.es3 li > a::after {content: '/\/\/\/https:////:sptth/\/\/\/'; display: block; font-size: .8rem; text-align: center; margin-bottom: 1rem; border-top: 1px solid rgb(255 191 0 / 29%); padding: .3rem; letter-spacing: .3em; color: #ffbf00;}
body.es3 #intro p {color: #a6ff00;}
body.es3 #intro.view .ic-cv { color: #bdf94c; width: 88px; text-align: center; border: 1px solid; margin-top: 1em; margin-right: auto;  margin-left: 69%;}
body.es3 select {background: none;}
@keyframes pulsele { to {left: 77%;}}
body.es4 {background: #ed1c24;}
body.es4 a {color: #000;}
body.es4 a::before {background: #ffffffbf;}
body.es4 ul {
    overflow: hidden;
    padding: 1em 0;
}
body.es4 li {margin: 1em .5em 5.5em; border: 1px solid #d1131a;}
body.es4 li span {opacity: 1; font-weight: 400;border-top: 1px solid; padding: 1.3em 1em;}
body.es4 li::before {opacity: 1;
    color: #5d0b0f;
    top: initial;
    bottom: 100%;
    border: 1px dotted;
    padding: .2em .5em;
    background: #ed222a;
    animation: pulsele 10s cubic-bezier(0.6, 0.23, 0.92, 0.75) infinite alternate;}
body.es4 li:nth-child(odd):before {animation-delay: -5.5s;}
body.es4 li > a::after {content: '[[POJECT URL URL PROJECT]]';
    display: block;
    font-size: .8rem;
    text-align: center;
    margin-bottom: 1rem;
    border-top: 1px solid rgb(0 0 0 / 29%);
    padding: .3rem;
    letter-spacing: .3em;
    color: #000000;}
.es4 span.dd {
    position: absolute;
    bottom: 100%;
    right: 0;
    padding: 7px;
    border: 1px solid;
}
body.es4 #intro p {font-weight: 400; font-size: 1.23em;}
body.es4 select {background: none; border-color: #000; padding: .3em; margin: .6em;}

body.es5 li {display: inline-block;
    margin: 3em 1em;
    position: relative;
    width: 29%;
    box-sizing: border-box;
    padding: 2em;
    background: #d76f6f24;
    border: 1px solid red;
    border-radius: 5px;
    overflow: hidden;
    vertical-align: middle;}
body.es5 li::before{
    color: #f14343;
    opacity: 1;
}
body.es5 li span {opacity: 1; color: #ff0000;}
body.es5 li:hover span {color: #ff3737;}
body.es5 li > a::after {content: '/\/\/\/https:////:sptth/\/\/\/'; display: block; font-size: .8rem; text-align: center; margin-bottom: 1rem; border-top: 1px solid rgb(255 191 0 / 29%); padding: .3rem; letter-spacing: .22em; color: #959592; transform: scaleY(3);}
body.es5 select {background: none;margin: .3em;border: 1px solid red;color: red;font-size: 1.1em;border-radius: 3px;padding: .05em;}

body.es6 {background: #fe9d8921;}
body.es6 #intro {color: #ed0c29; font-weight: 500;}
body.es6 h1.title {
    padding: 1em;
    z-index: 6;
    top: 0;
    left: 0;
    margin: 7em 0;
    background: white;
    color: #f00;
    border-bottom: 1px solid;
}
body.es6 li {margin-bottom: 4.4em;}
body.es6 li::before {top: -2em; color: #e90e0e; opacity: 1; letter-spacing: .2em;}
body.es6 li span {opacity: 1; color: #31194f;}

body.es7 a {color: #000;}
body.es7 a::after {    top: 100%;
    height: 1px;
    opacity: .5;
    left: -3%;
    width: 106%;}
body.es7 li span {opacity: 1; color: red;}
body.es7 li::before {opacity: 1; top: -2em; color: red;}
body.es7 h1.title {left: 0;
    top: -.3em;
    padding: 1em .3em;
    margin: 9em 0 4em;
    background: #f7f7f7;
    z-index: 6;border: 2px solid;}
body.es7 #intro p {max-width: 69%;font-size: 1.3em;}
body.es7 select {    border-color: #000;border-radius: 3px;padding: .15em;letter-spacing: .3em;}
body.es8 h1.title {margin: 7em 0;} 
body.es7 li,
body.es8 li {margin: .5em 1em 4em;}
body.es8 li span {opacity: 1;}
body.es8 li::before {top: -22%; opacity: 1; color: green;}

body.es9 {background: #fafafa;}
body.es9 #intro p {max-width: 500px; font-size: 1.2em;}
body.es9 h1.title {top: 0; padding: 1em 0 0; background: #fff; z-index: 5;margin: 7.7em 0;}
body.es9 li:hover::before {top: -1.6em;}
body.es9 #intro {position: relative; z-index: 6;}
@media screen and (max-width: 60em){
    body.es3 li,
    body.es5 li {
        width: 77%;
        margin: 3em 2em;
    }
}