html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}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}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}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}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}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}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
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-size:100%;font:inherit;vertical-align:baseline}:focus{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none;-webkit-box-sizing:content-box;box-sizing:content-box}textarea{overflow:auto;vertical-align:top;resize:vertical}audio,canvas,video{display:inline-block;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}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]{-webkit-box-sizing:border-box;box-sizing:border-box;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}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button,html,input,select,textarea{color:#090909}::-moz-selection{color:#fff;background:rgba(250,250,250,.4);text-shadow:none}::selection{color:#fff;background:rgba(250,250,250,.4);text-shadow:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent!important;
}
@font-face {
font-family: 'Grotto';
src: url(//grotto.es/wp-content/themes/grotto/font/Grotto-M.woff2) format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
ascent-override: 90%; 
}
a, div, img{
outline: 0!important;
}
body, html{
height: 100%;
scroll-behavior: smooth;
font-family: 'Grotto', sans-serif;
}
body{
background-color: #0A0A0A;
color: white;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
::-moz-selection { color: white;  background: #333333; }
::selection      { color: white;  background: #333333; }
.italic {
font-style: italic;
}
strong{
font-weight: 100;
}
.regular{
font-family: 'Grotto', sans-serif;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.bottom {
bottom: 0;
}
.left {
left: 0;
}
.right{
right: 0;
}
.top{
top: 0;
}
.pad-b-0{
padding-bottom: 0.5rem;
}
.pad-t-0{
padding-top: 0.5rem;
}
.pad-r-0{
padding-right: 0.5rem;
}
.pad-l-0{
padding-left: 0.5rem;
}
.pad-0{
padding: 0.5rem;
}
.pad-t {
padding-top: 1rem;
}
.pad-b {
padding-bottom: 1rem;
}
.pad-l {
padding-left: 1rem;
}
.pad-r {
padding-right: 1rem;
}
.pad, .pad-01 {
padding: 1rem;
}
.pad-t-1 {
padding-top: 2rem;
}
.pad-b-1{
padding-bottom: 2rem;
}
.pad-l-1 {
padding-left: 2rem;
}
.pad-r-1 {
padding-right: 2rem;
}
.pad-1{
padding: 2rem;
}
.pad-b-2{
padding-bottom: 4rem;
}
.mag-auto{
margin: 0 auto;
}
.block{
display: block;
}
.white {
color: white;
}
.white-bk{
background-color: white;
}
.black-bk{
background-color: #0A0A0A;
}
.black{
color:  black;
}
.w-100 {
width: 100%;
}
.h-100, .h-100-m {
height: 100%;
}
.h-85{
height: 85%;
}
.h-100-vh{
height: 100vh;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
color: inherit;
}
.flex, .menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.wrap{
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.end-justify{
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.evenly{
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.align-center{
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.column{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.column-r{
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.between{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.around{
-ms-flex-pack: distribute;
justify-content: space-around;
}
.jus-center{
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.z-1{
z-index: -1;
}
.z-9{
z-index: 9;
}
.z-8{
z-index: 8;
}
.z-99{
z-index:  99;
}
.z-999{
z-index: 999;
}
.w-50{
width: 50%;
}
.w-40{
width: 40%;
}
.w-60{
width: 60%;
}
.w-75,.w-75-m{
width: 75%;
}
.w-25,.w-25-m{
width: 25%;
}
.w-33, .w-33-m{
width: 33.33%;
}
.w-66, .w-66-m{
width: 66.66%;
}
.hide-scroll{
-ms-overflow-style: none;
scrollbar-width: none;
}
.hide-scroll::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.mobile, .mobile-flex{
display: none;
}
.wrap{
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.center{
text-align: center;
}
.ab-center{
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.ab-x{
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.none{
pointer-events: none;
}
.none-s{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.inline-block{
display: inline-block;
}
.block{
display: block;
}
.hide{
display: none !important;
}
.hide-op{
opacity: 0;
}
.op{
opacity: 1;
}
.show{
display: block;
}
.hidden{
overflow: hidden;
}
em{
font-style: italic;
}
.cover{
-o-object-fit: cover;
object-fit: cover;
}
.underline{
text-decoration: underline;
}
.sticky{
position: sticky;
}
.flex-end{
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.nw{
white-space: nowrap;
}
.b-r{
border-right: solid black 1px;
}
.b-l{
border-left: solid black 1px;
}
.b-b{
border-bottom: solid black 1px;
}
.b-t{
border-top: solid black 1px;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.fadein {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
} .t-right{
text-align: right;
}
.btn-burguer{
width: 1.25rem;
height: 3px;
background: white;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-burguer::after{
content: '';
position: absolute;
width: 1.25rem;
height: 3px;
background: white;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.btn-burguer::after{
-webkit-transform: translateY(0.5rem);
-ms-transform: translateY(0.5rem);
transform: translateY(0.5rem);
}
.menu-btn.open .btn-burguer{
-webkit-transform: translateY(0.25rem) rotate(45deg);
-ms-transform: translateY(0.25rem) rotate(45deg);
transform: translateY(0.25rem) rotate(45deg);
}
.menu-btn.open .btn-burguer::after{
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu-btn{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; 
padding-top: 0.35rem;
}
.mix{
mix-blend-mode: difference;
} .home-item{
padding-bottom: 1.5rem;
}
.home-item .tags{
padding-top: 0.3rem;
}
.home-item .tags p{
margin-left: 0 !important;
margin-right: 4px !important;
}
.added-div-d div, .added-div-m div{
background: white;
color: black;
}
.added-div-d, .added-div-m{
padding-bottom: calc( 2rem + 4px);
}
.contact-btn{
background: black;
color: white !important;
padding: 8px;
line-height: 1 !important;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.mob{
display: none;
}
@-webkit-keyframes slideInRight {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes slideInRight {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.animate__slideInRight {
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideInRight;
animation-name: slideInRight
} .pad-menu{
margin-top: 4rem;
}
.tech-w{
padding-top: 2rem; 
}
.tech-w p, .tags p{
display: inline-block;
background: white;
color: black;
height: calc(1.5rem + 4px);
padding: 4px;
margin-bottom: 4px;
margin-right: 4px;
white-space: nowrap;
line-height: 1 !important;
}
.contact-btn{
height: calc(1.5rem + 4px);
}
.tags p{
margin-left: 4px;
margin-right: 0 !important;
}
.home-item p{
height: calc(1.25rem + 4px);
}
.about-wrapper{
min-height: 100vh;
}
.about-wrapper p{
padding-bottom: 1rem;
}
.me{
visibility: hidden;
white-space: nowrap;
} .works-wrapper{
min-height: 100%;
}
.w-16{
width: 16.666%;
}
.w-item .pad-r-0{
padding-right: 0;
}
.h-auto{
height: auto;
} #x-btn{
cursor: pointer;
}
.thumb-single img{
height: 100%;
width: auto;
}
#credits-btn{
cursor: pointer;
}
#info-w {
max-height: 0;
-webkit-transition: max-height .5s ease-in-out;
-o-transition: max-height .5s ease-in-out;
transition: max-height .5s ease-in-out;
overflow: hidden;
}
.active#info-w {
-webkit-transition: max-height .5s ease-in-out;
-o-transition: max-height .5s ease-in-out;
transition: max-height .5s ease-in-out;
height: auto;
max-height: 2000px;
}
#info-w p:first-child {
padding-top: 0.5rem;
}
.single-header .pad-l-0, .single-header .pad-r-0{
padding: 0;
}
#wave div:first-child{
height: 2.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.x-btn-w{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 3rem;
margin-top: 0.25rem;
}
.x-btn{
width: 1.25rem !important;
height: 3px;
background: white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.x-btn::after{
content: '';
position: absolute;
width: 1.25rem;
height: 3px;
background: white;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.btn-bk{
cursor: pointer;
} footer{
background: #333333;
color: black;
} .font-XXS{
font-size: 1rem;
}
.font-S, .font-SM, .font-SL, .font-SXS{
font-size: 1.25rem;
line-height: 1.5rem;
}
.font-M, .font-MS{
font-size: 2.1vw;
line-height: 2.35vw;
}
.font-MS{
line-height: 1.25 !important;
} @media screen and (min-width: 1920px) {
.tech-w p, .tags p{
height: calc(1.75rem + 8px);
padding: 7px 8px 8px 8px !important;
margin-bottom: 8px;
margin-right: 8px;
}
.contact-btn{
height: calc(1.75rem + 8px);
}
.home-item p{
height: calc(1.55rem + 8px);
}
.tags p{
margin-left: 8px;
}
.font-S, .font-SM, .font-SL, .font-SXS{
font-size: 1.5rem;
line-height: 1.75rem;
}
.pad-menu{
margin-top: 6rem;
}
.tech-w{
padding-top: 4rem; 
}
.x-btn{
width: 1.5rem !important;
}
.x-btn::after{
width: 1.5rem;
}
.x-btn-w{
margin-top: 0.4rem;
}
.home-item{
padding-bottom: 2.5rem;
}
.home-item .tags {
padding-top: 0.5rem;
}
.font-XXS{
font-size: 1.25rem;
}
.added-div-d, .added-div-m {
padding-bottom: calc( 3.5rem + 8px);
}
}
@media screen and (max-width: 1280px) {
.home-item p{
height: calc(1.15rem + 4px);
}
.w-33-m{
width: 50%;
}
.mob{
display: block;
}
.desk{
display: none;
} .font-XXS{
font-size: 0.9rem;
}
.font-MS, .font-M{
font-size: 1.8rem;
line-height: 2.05rem;
}
}
@media screen and (min-width: 820px) {
.w-item, .works-wrapper {
-webkit-transition: color 0.3s linear;
-o-transition: color 0.3s linear;
transition: color 0.3s linear; 
}
.tags p{
-webkit-transition: background 0.3s linear;
-o-transition: background 0.3s linear;
transition: background 0.3s linear;
}
.w-item:hover{
color: white; 
}
.w-item:hover .tags p{
background: white !important; 
}
.works-wrapper .pad-menu:hover{
color: #333333; 
}
.works-wrapper .pad-menu:hover .tags p{
background: #333333; 
}
picture{
overflow: hidden;
} picture:hover img{
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.link-text{
position: relative;
}
.link-text::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #333333;
z-index: -1; 
-webkit-transition: width 0.3s ease; 
-o-transition: width 0.3s ease; 
transition: width 0.3s ease; 
}
.link-text:hover::after {
width: 100%; 
}
.contact-btn:hover{
background: #333333;
}
#x-btn:hover .x-btn, #x-btn:hover .x-btn:after{
background: #333333;
}
}
@media screen and (max-width: 820px) { .desktop{
display: none;
}
.mobile{
display: block;
}
.mobile-hide{
display: none;
}
.mobile-flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.pad-1{
padding: 2rem 1rem;
}
.pad-2{
padding: 2rem;
}
.mag-1{
margin: 2rem 1rem;
}
.pad-b-m{
padding-bottom: 1rem;
}
.mision-wrapper p{
padding-bottom: 1rem;
}
.pad-r-2, .pad-r-1{
padding-right: 1rem;
}
.pad-l-2, .pad-l-1{
padding-left: 1rem;
}
.pad-01{
padding: 0.5rem;
}
.pad-m{
padding: 2rem 1rem;
margin: 0;
}
.w-25, .new-bar, .w-66, .w-33{
width: 100%;
}
.w-33-m{
width: 50%;
}
.column-m{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.column-m-r{
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.w-50{
width: 100%;
} .home-item p{
height: calc(1rem + 4px) !important;
}
.home-item .tags{
padding-top: 0.25rem;
}
.added-div-m{
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.added-div-m .between{
padding: 0.5rem;
}
.contact-btn{
margin-top: 2rem;
} .tech-w{
padding-top: 2rem; 
} .w-item .w-33:first-child{
width: 45%;
}
.w-item .w-33:nth-child(2){
width: 55%;
} #credits-btn{
padding-top: 0.25rem; 
}
#credits-btn, #info-w{
text-align: left;
}
.x-btn-w{
margin-top: 0.15rem;
} header, .link-logo, .new-bar{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
header{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.state{
padding-left: 0;
}
.new-bar{
margin-top: 25vh;
}
.new-bar a{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 0;
}
.pad-menu{
margin-top: 3.5rem;
}
.link-logo a{
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
} footer .pad-r-0{
padding-right: 0;
}
footer .pad-l-0{
padding-left: 0;
}
.legal-w{
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.legal-w div{
width: auto;
}
.me{
display: none;
}
.w-auto-m{
width: auto;
} .font-SXS, .font-XXS{
font-size: 0.75rem;
line-height: 1rem;
}
.font-S, .font-SL{
font-size: 1.1rem;
line-height: 1.3rem;
}
.font-SM{
font-size: 1.8rem;
line-height: 2.05rem;
}
.font-SL{
font-size: 2.75rem;
line-height: 3.25rem;
}
}
@media screen and (max-width: 550px) {
.font-M{
font-size: 1.7rem;
line-height: 1.05;
}
.font-MS{
font-size: 1.1rem;
line-height: 1.3rem;
}
}