:root{--norton-yellow:#fcfe54;--norton-blue:#0402ac;--norton-teal:#04aaac;--norton-cyan:#54fefc;--norton-grey:#afa8af;--norton-black:#040204;--site-title:3.6rem;--section-title:3.2rem;--article-title:1.4rem;--article-text:1.2rem;--code-text:1.4rem;--menu-text:1.2rem;--footer-text:1.1rem;--column-width:96px;--column-gap:16px;--header-height:96px;--footer-height:48px;--sider-content-width:340px;--min-container-width:360px;--max-container-width:1328px}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{font-size:62.5%}body{margin:0;box-sizing:border-box;background:var(--norton-black);font-family:"Press Start 2P","Courier New"}header{height:var(--header-height)}main{background:var(--norton-blue);min-height:calc(100vh - calc(var(--header-height) + var(--footer-height)))}footer{position:fixed;z-index:4;min-width:var(--min-container-width);max-width:var(--max-container-width);bottom:0;height:var(--footer-height);background-color:var(--norton-teal);padding:0 var(--column-gap)}article{position:relative}ul{padding-left:0}.btn{font-size:var(--menu-text);display:block;background-color:var(--norton-teal);padding:var(--menu-text) 5px;text-align:center;color:var(--norton-black)}main .btn:hover{background:var(--norton-cyan);transition:all .3s ease-in-out}.btn:active,.btn:visited{color:var(--norton-black)}fieldset{border:2px solid var(--norton-cyan);display:flex;padding:24px;margin:32px}fieldset>*{margin-bottom:16px}input,textarea{padding:16px;border:2px solid var(--norton-cyan);color:var(--norton-cyan);background:0 0;font-family:"Courier New";outline-color:var(--norton-yellow);font-weight:700;width:100%;min-width:360px;flex:1}input::placeholder,textarea::placeholder{color:var(--norton-teal)}label,legend{color:var(--norton-yellow)}h2{grid-area:title}section#proyectos{display:grid;grid:250px repeat(3,300px)/repeat(3,33%);grid-template-areas:". title . " "article-1 . ." ". article-2 . " ". . article-3";padding:32px 105px}footer{display:grid;grid:auto-flow/repeat(12,var(--column-width));grid-column-gap:var(--column-gap)}#copyright{grid-column:span 2}h1,h2,h3,p{margin:0}h1,h2,h3{text-transform:uppercase}h1,h1 a,h1 a:active,h1 a:link,h1 a:visited{font-size:var(--site-title);color:var(--norton-yellow)}h2,h2 a{font-size:var(--section-title);line-height:calc(var(--section-title) * 2);color:var(--norton-yellow);font-weight:300;text-align:center;margin-bottom:20px}main h2::before{display:block;content:" ";margin-top:- var(--header-height);height:calc(20px + var(--header-height));visibility:hidden;pointer-events:none}h3,h3 a{color:var(--norton-black);font-size:var(--article-title);line-height:32px;margin-bottom:20px}li,p,td,th{font-size:var(--article-text);line-height:calc(var(--article-text) * 2);letter-spacing:.7px}footer p{font-size:var(--footer-text)}a{font-size:var(--article-text);text-decoration:none}a:hover{color:var(--norton-yellow);transition:all .3s ease-in-out}h2{grid-area:title}strong{color:var(--norton-yellow)}table{margin:auto;color:var(--norton-cyan);border:2px solid var(--norton-cyan);border-collapse:collapse;margin:32px}tbody tr:last-of-type td{padding-bottom:32px}td,th{text-align:left}td{padding:8px 16px}th{padding:16px;color:var(--norton-yellow)}td:first-of-type{border-right:2px solid var(--norton-cyan)}th{border-bottom:2px solid var(--norton-cyan)}td a{color:var(--norton-cyan)}tfoot td{border-top:2px solid var(--norton-cyan);padding:16px}.container{position:relative;overflow:hidden;flex:1 var(--min-container-width);max-width:var(--max-container-width);margin:0 auto}.row{display:flex;width:90%;margin:0 auto}.col{display:flex;flex-direction:column}.centered{display:flex;justify-content:center;align-items:center}.wrap{flex-wrap:wrap}.col.space-between,.row.space-between{justify-content:space-around}header{min-width:vaR(--min-container-width);max-width:var(--max-container-width);background:var(--norton-black);position:sticky;z-index:4;top:0;margin:0 auto}header nav{flex:1}header #mobile-menu{display:none}header .navbar-toggle{outline:0}header ul.menu{counter-reset:menu-item;flex:1}header ul.menu li{position:relative;flex:1 0 130px;display:block;margin-left:30px}header ul.menu li:before{position:absolute;left:-20px;top:var(--menu-text);counter-increment:menu-item;content:counter(menu-item);color:var(--norton-grey);font-size:var(--menu-text)}header ul.menu li:hover a{color:var(--norton-yellow);transition:all .1s ease-in-out}header ul.menu li:hover:before{color:#fff}footer #copyright a{margin-left:10px;display:inline-block}aside{position:absolute;width:100%;right:-100%;top:0;height:100%}aside .sider-content{box-sizing:content-box;position:fixed;background:var(--norton-grey);width:var(--sider-content-width);padding:20px;height:100%;right:0;top:var(--header-height);transform:translateX(100%)}aside .sider-content article{display:none;width:var(--sider-content-width)}aside .sider-content article img{display:none}aside.open{right:0;z-index:7;transition:all .5s ease-in-out}aside.open .sider-content{transition:all .5s ease-in-out;right:0;transform:translateX(0)}aside.open .sider-images{transition:all .5s ease-in-out;transform:translateX(0)}aside .sider-images img{display:none}aside .sider-content article.show,aside .sider-images img.show{display:block}aside #sider-close{background:0 0;border:none;font-family:inherit;outline:0;margin-bottom:10px}aside #sider-close:hover{color:var(--norton-yellow);transition:color .3s ease-in-out}aside .btn{margin:20px auto}aside .sider-images{left:0;transform:translateX(-100%);position:fixed;width:calc(100% - var(--sider-content-width));height:100%}aside .sider-images div{display:none}aside .sider-images div.show{display:block}aside .sider-images img{object-fit:cover;width:100%;height:100%}section{min-height:100vh}section#quien-soy article{flex:1 1 360px}section#quien-soy article>p,section#quien-soy blockquote{padding:24px;flex:1 1 250px;background:var(--norton-grey);position:relative;box-shadow:0 0 0 10px var(--norton-grey);border:8px double}section#quien-soy blockquote p{align-self:center;font-size:var(--section-title);line-height:calc(var(--section-title) * 2);margin-bottom:16px}section#quien-soy blockquote cite{align-self:flex-end;padding:16px;font-size:2.4rem;font-style:normal}section#quien-soy article>p{margin:32px;font-size:1.6rem;line-height:4.2rem}section#quien-soy img{flex:0 1 260px;width:40%;object-fit:cover;border-radius:50%;border:10px double var(--norton-yellow)}section#proyectos{position:relative}section#proyectos article{background:#000;display:flex;align-items:flex-end;transform-style:preserve-3d;transition:all 75ms ease-in-out;transform:perspective(700px) rotateX(0) rotateY(0) scale3d(1,1,1);-webkit-box-shadow:0 0 35px 0 rgba(0,0,0,1);-moz-box-shadow:0 0 35px 0 rgba(0,0,0,1);box-shadow:0 0 35px 0 rgba(0,0,0,1)}section#proyectos article:hover{z-index:5}section#proyectos article>*{border:3px solid var(--norton-black)}section#proyectos article:nth-child(1n+1){grid-area:article-1}section#proyectos article:nth-child(2n+1){grid-area:article-2}section#proyectos article:nth-child(3n+1){grid-area:article-3}section#proyectos article h3{margin:0;height:96px;padding:0 20px;width:60%;text-align:center;transform:translateZ(35px);background:var(--norton-grey)}section#proyectos article h3:before{content:" ";position:absolute;z-index:-1;top:5px;left:5px;right:5px;bottom:5px;border:5px double var(--norton-black)}section#proyectos article h3:hover,section#proyectos article h3:hover a{color:var(--norton-yellow);transition:all .3s ease-in-out}section#muestras .col{background:var(--norton-grey);flex:1 1 400px;padding:32px;margin:16px}section#muestras article{border:5px double var(--norton-black);margin:8px;padding:16px;position:relative}section#muestras h3{position:absolute;top:calc(-1 * var(--article-title));left:5%;z-index:2;padding:0 10px;background:var(--norton-grey)}section#muestras ul{list-style:none}section#muestras li{padding:var(--article-text)}section#muestras li a{text-decoration:none;color:var(--norton-black)}section#muestras article:hover h3,section#muestras li a:hover{color:var(--norton-yellow);transition:all .3s ease-in-out}section#curriculum article{color:var(--norton-cyan);width:80%;margin:0 auto;padding:32px;border:8px double var(--norton-cyan)}section#curriculum article h3{color:var(--norton-cyan);text-transform:none;color:var(--norton-yellow)}section#curriculum article p{padding-left:5%}section#curriculum h4{color:var(--norton-yellow)}section#curriculum article dfn{font-style:normal;color:var(--norton-teal)}section#curriculum article .method{padding-left:5%}section#curriculum article .method span{padding-left:5%}section#curriculum article p{padding-left:10%}section#curriculum ul{list-style:none;padding-left:5%}section#curriculum li{padding:8px}section#contacto .col{flex:0 1 360px}section#contacto #formulario-contacto{display:none}section#contacto #formulario-contacto.open{display:flex}.icon{position:absolute;width:96px;height:96px;top:-32px;right:-32px;transform:translateZ(35px) scale(.8);-webkit-box-shadow:0 0 35px 0 rgba(0,0,0,1);-moz-box-shadow:0 0 35px 0 rgba(0,0,0,1);box-shadow:-15px 15px 55px 0 rgba(0,0,0,1)}.cover{position:absolute;height:100%;width:100%;object-fit:cover}.navbar-toggle{display:none;background-image:url(../img/menu.png);background-size:cover;border:none}.navbar-toggle.open{background-image:url(../img/close.svg);background-size:24px;background-repeat:no-repeat;background-position:center}.logo,.navbar-toggle{width:var(--site-title);height:var(--site-title)}.logo{margin-right:20px}section#quien-soy blockquote cite:before{content:'[';padding-right:16px}section#quien-soy blockquote cite:after{content:']';padding-left:16px}section#muestras li:before{content:'[';padding-right:16px}section#muestras li:after{content:']';padding-left:16px}section#curriculum article::after{content:'}';font-weight:700;font-size:var(--article-title);color:var(--norton-yellow)}section#curriculum article h3 span::after{content:'_'}section#curriculum article h3::before{content:'class';padding-right:8px}section#curriculum .method:first-of-type dfn::before{content:'this.';color:var(--norton-cyan)}section#curriculum article h3::after,section#curriculum article span::after{content:' {';color:var(--norton-yellow)}section#curriculum article .method:last-of-type span::after{content:' [';color:var(--norton-yellow)}section#curriculum article h4::after{content:' () {';color:var(--norton-yellow)}section#curriculum article p::after{content:','}section#curriculum article p:last-of-type::after{content:'}';margin-left:-5%;display:block;color:var(--norton-yellow)}section#curriculum article .method:last-of-type::after{content:'}';font-weight:700}section#curriculum article .method:first-of-type::before{content:'constructor () {';font-weight:700;color:var(--norton-yellow)}section#curriculum article .method::after{content:'}';font-weight:700;color:var(--norton-yellow)}section#curriculum article dfn::after{content:': '}section#curriculum ul::after{content:']';display:block;position:relative;top:8px;color:var(--norton-yellow)}section#curriculum li::before{content:'\''}section#curriculum li:last-of-type::after{content:"\'"}section#curriculum li:not(:last-of-type)::after{content:'\','}@media (max-width:768px){:root{--site-title:3rem;--section-title:1.8rem;--mobile-menu-item:1.8rem;--article-title:1.2rem;--article-text:1rem;--menu-text:1rem;--code-text:0.8rem;--footer-text:0.8rem;--header-height:64px;--footer-height:24px}.container,header{width:715px}header{justify-content:space-around;flex-wrap:nowrap}.logo,.navbar-toggle{width:48px;height:48px}.brand{flex:100%}.logo{margin-right:10px}h1{flex:1;text-align:center}header #mobile-menu{left:0;display:block;position:fixed;top:var(--header-height);width:100%;background:var(--norton-grey)}header #mobile-menu ul.menu li{flex:1 0;padding:16px 0}header #primary-menu{display:none}header ul.menu li:before{left:-16px;top:16px}section#quien-soy .row{flex-wrap:wrap}section#quien-soy img{order:1;margin:32px}section#quien-soy article{order:2}section#quien-soy blockquote{flex:1 1 150px}section#muestras .col{padding:16px;margin:8px}section#muestras article{margin:8px;padding:8px}section#muestras li:before{padding-right:4px}section#muestras li:after{padding-right:4px}section#proyectos{grid:150px repeat(3,200px)/repeat(3,33%);grid-template-areas:". title . " "article-1 . ." ". article-2 . " ". . article-3";padding:0}section#proyectos article h3{width:100%}section#proyectos article:hover{z-index:2}section#proyectos{display:flex;flex-flow:row;flex-wrap:wrap;justify-content:center}section#proyectos h2{flex:1 100%}section#proyectos article{flex:0 1 430px;height:430px;margin:32px}.icon{width:128px;height:128px;top:-24px;right:-24px}aside .sider-images{width:100%;height:calc(50% - var(--header-height))}aside .sider-content{display:flex;justify-content:center;width:100vw;height:50%;top:unset;bottom:0;overflow:scroll}aside .sider-content article{width:80vw}aside .sider-content .btn{width:40vw}aside #sider-close{position:absolute;right:16px;top:16px}}@media (max-width:640px){:root{--section-title:1.4rem}.container,footer,header{width:90vw}header{justify-content:space-around}header.wrap{flex-wrap:nowrap}.navbar-toggle{display:block}section{min-height:auto;padding-bottom:48px}section#quien-soy article>p{margin:32px;font-size:1rem;line-height:2.4rem}section#quien-soy article>p,section#quien-soy blockquote{flex:1 1 200px}section#quien-soy blockquote cite{font-size:1rem;padding:16px 0}section#quien-soy blockquote cite::before{padding-right:4px}section#quien-soy blockquote cite::after{padding-left:4px}nav#primary-menu{display:none}nav#mobile-menu{position:fixed;bottom:0;width:100%;background:var(--norton-grey);transform:translateY(100%)}nav#mobile-menu.open{transform:translateY(39%);transition:all .3s ease-out}nav#mobile-menu ul.menu{flex-direction:column;border:double 5px #000;margin:10px}nav#mobile-menu ul.menu li{margin-left:0;padding:0}nav#mobile-menu li:before{content:none}nav#mobile-menu li a{font-size:var(--mobile-menu-item);line-height:64px;color:var(--norton-black)}nav#mobile-menu li:focus a{color:var(--norton-yellow);transition:color .3s ease-in-out}section#proyectos{display:flex;flex-direction:column;padding:48px}section#proyectos .proyecto{flex:300px;margin:0}section#proyectos .proyecto:first-of-type{margin-top:48px}section#proyectos .proyecto:not(:first-of-type){margin-top:96px}section#curriculum article{width:80%;padding:0;border:none}aside .sider-images{display:none}aside .sider-content{top:var(--header-height);bottom:unset;height:100%}aside .sider-content article img{display:block;margin-top:16px;object-fit:cover;width:100%}aside .sider-content .btn{width:initial}}