/*
    hemisferio.space
*/
/*@import url("neutral.css");*/
/*@import url(https://db.onlinewebfonts.com/c/2bf3e5ac189bddb42ce75cccf46ec2ac?family=Menoe+Grotesque+Pro+Regular);*/
@font-face {
    font-family: 'Menoe Grotesque Pro';
    src: url('f/MenoeGrotesquePro.eot');
    src: url('f/MenoeGrotesquePro.eot?#iefix') format('embedded-opentype'),
        url('f/MenoeGrotesquePro.woff2') format('woff2'),
        url('f/MenoeGrotesquePro.woff') format('woff'),
        url('f/MenoeGrotesquePro.ttf') format('truetype'),
        url('f/MenoeGrotesquePro.svg#MenoeGrotesquePro') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/*
-------------
  reset.css v2.0 http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 
  && 
  normalize.css v2.1.3 | MIT License | git.io/normalize
 */
 *,:after,:before{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{line-height:1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}:focus,a:active,a:hover{outline:0}::selection{background-color:#000;color:#666;text-shadow:none}a{color:#007FFF;text-decoration:none;-webkit-transition:.22s linear all;-moz-transition:.22s linear all;-o-transition:.22s linear all;-ms-transition:.22s linear all;transition:.22s linear all}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:600}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}hr,input[type=search]{-moz-box-sizing:content-box}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{overflow-x:auto;border:1px solid #e6e6e6;border-left-width:5px;font-size:.875em;background:#fcfcfc;white-space:pre;word-wrap:normal;margin:1.6em 0;padding:1.25em}q{quotes:\201C \201D \2018 \2019}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;max-width:100%}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{padding:0}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;vertical-align:top;resize:vertical}table{border-collapse:collapse;border-spacing:0}ul,ol{list-style:none}
html, body {
    height: 100%;
    height: 100lvh;
    min-height: -webkit-fill-available;
}
body {
	color: #1a1a1a;
	font: normal 300 16px/1 'Menoe Grotesque Pro', sans-serif;
}
header {
    display: none;
}
.mmen {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    /*overflow-y: hidden;*/
}
.menu {
    /*background: #FFF;
    border-radius: 2em;*/
    position: relative;
}
.menu ul {
    /*display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2.2rem;*/
    padding: 1rem 2.2rem;
    width: 100%;
    position: relative;
}
.menu li {
    display: inline-block;
    font-size: 1.7em;
    padding: 0 1rem;
}
.menu a {
    color: #000;
    position: relative;
    display: block;
}
.menu a span {
    display: inline-block;
}
.menu a:hover {
    /*border-bottom: 1px solid #000;*/
}
.menu a::after {
    content: '';
    border-bottom: 2px solid #000;
    display: block;
    width: calc(100% - 2rem);
    height: 1px;
    position: absolute;
    bottom: -2px;
    /*transition: all .33s linear;*/
    opacity: 0;
}
.menu a:hover::after {
    opacity: 1;
    width: calc(100%);
}

.time {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 3em);
    height: calc(100dvh - 3em);
    margin: 1.5625em;
}
.time li {
    position: absolute;
    width: 14vw;
    max-width: 264px;
    
    display: block;
}
li#ta {right: 0;}
li#di {bottom: 0;left: 0;}
li#ma {bottom: 0;right: 0;}
.time svg {
    display: block;
    max-height: 100%;
}
section, ul.rico {width: 100%;height: 100%;height: 100dvh;min-height: -webkit-fill-available;}

ul.rico img {
    user-select: none;
    pointer-events: none;
}
ul.rico img {
    max-height: 88vh;
}
.rico > li {
    
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: center;
    padding: 1.526em;
    width: 100%;
    height: 100vh;
    user-select: none;
}
.rico li.active {
    display: flex;
}
.rico > li {
    display: none;
}

.content {
    margin: 0 auto;
    padding: 0 2%;
    max-width: 1200px;
}
canvas {
    width: 100%;
    /*height: 100lvh;*/
    /*position: absolute;*/
    position: fixed;
    /*top: 0;*/
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
@media screen and (orientation: portrait) {
}
/*modern media querie*/
@media (980 ≤ width <= 1900px) {   
}
/*1440*/
@media screen and (min-width: 90em){
    .mmen {bottom: 2em;}
    .menu li {padding: 0 1.3em;}
}
/*1240*/
@media screen and (min-width: 76em){
    .mmen {bottom: 1.526em;}
}
/*960*/
@media screen and (min-width: 60em){
    .mmen {padding: 0 16% 0 8%;}
    .menu ul {display: table; white-space: nowrap; border-radius: 2em; width: auto;}
    .time li {/*height: 190px;*/height: auto !important;}
}
/*1440*/
@media screen and (width <= 88em) {
    .menu li {font-size: 1.5em;}
}
/*1440*/
@media screen and (width <= 78em) {
    .menu li {font-size: 1.35em;}
}
/*1024*/
@media screen and (width <= 64em) {
    .time {height: calc(100dvh - 7.125em);}
    .time li {width: 150px;}

    .menu a {
        padding: 0 1rem;
        position: relative;
        display: block;
    }
    .menu a:hover {border: none;}
    .menu a:hover::after {
        content: '';
        border-bottom: 1px solid #000;
        display: block;
        width: calc(100% - 2rem);
        height: 1px;
        position: absolute;
        bottom: -2px;
    }
    .menu ul {padding: 0.88rem 0.2rem; text-align: center;}
    .menu li {font-size: 1.188em; padding: 0;}
    .menu li:last-of-type {display: none;}

    .menu li:nth-child(1), .menu li:nth-child(2) {
        padding-bottom: 1rem;
    }
}
/*390*/
@media screen and (width <= 25em) {
    .time {height: calc(100dvh - 6.75em);}
    .time li {width: 123px;}
    .menu li {font-size: 1em; padding: 0 0.1em;}
}
/*360*/
@media screen and (width <= 22.5em) {
    .menu li {padding: 0;}
}
/*280*/
@media screen and (width <= 17.5em) {
    .menu ul {padding: 0.88rem 0;}
    .menu li {    font-size: .85rem;}
    .menu a {padding: 0 .5rem}
    .time li {width: 100px;}
}
/*480*/
@media screen and (min-width: 30em){
	body {text-rendering: optimizeSpeed;}	
}