/* Autor: PUM! estudio Index: 1 -- Structure 1.1 -- Header 1.2 -- Footer 1.3 -- Popup 2 -- Text 3 -- Interaction 3.1 -- CTAs 3.2 -- Form 3.3 -- Cursor 4 -- Icons 5 -- Animation */ @charset "UTF-8"; /* 1 -- Structure */ html { background-color: var(--bg-html); scroll-behavior: smooth;} body { background-color: var(--bg-body);} .col-main { width: 100%; max-width: var(--max-w-main); padding: 0 var(--padd-main);} @container style(--size-m: true) { .no-m { display: none;} } /* 1.1 -- Header */ .header { position: sticky; top: 0; left: 0; z-index: 1000; width: 100%; padding: 1rem 0; pointer-events: none;} .header .col-main { max-width: none;} .header-logo a, .header-logo button { text-decoration: none; color: var(--c-black); pointer-events: all;} .header-logo a, .header-logo img, .header-logo svg, .header-logo video { display: block;} .header-logo img, .header-logo svg, .header-logo video { height: var(--unit-10); width: auto;} .scroll-up .header { transform: translateY(0);} .scroll-up .header::before { opacity: 1;} .scroll-down .header { transform: translateY(-100%);} .header .cta-menu { position: relative; z-index: 3; width: var(--unit-10); height: var(--unit-10); overflow: hidden; text-indent: -9999px; color: transparent; background-color: var(--c-yellow); pointer-events: all;} .header .cta-menu .icon { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all .9s var(--bezier-2);} .header .cta-menu .icon-b-cross { transform: scale(0)} .menu-active .header .cta-menu .icon-b-cross { transform: scale(1)} .menu-active .header .cta-menu .icon-b-menu { transform: translateX(100%)} .header .cta-lang { position: relative; z-index: 3; width: var(--unit-10); height: var(--unit-10); background-color: var(--c-red); pointer-events: all;} .header .cta-lang .icon { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all .9s var(--bezier-2);} .header .cta-lang .icon-b-cross { transform: scale(0)} .menu-lang-active .header .cta-lang .icon-b-lang { transform: scale(0)} .menu-lang-active .header .cta-lang .icon-b-cross { transform: scale(1)} .bg-yellow .header .cta-menu { background-color: var(--c-white);} .bg-yellow .menu li > a { background-color: var(--c-white);} .menu { position: fixed; top: var(--header-height); right: 0; z-index: 1000; margin-right: calc(var(--padd-main) + var(--padd)); overflow: hidden; pointer-events: none; transition: all .8s var(--bezier);} .menu li { transform: translateX(calc(100% + var(--padd) + var(--padd-main))); transition: transform .9s var(--bezier);} .menu li > a { display: block; padding: 1rem var(--unit-5); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; text-decoration-color: transparent;} .menu li > a.hover { text-decoration-color: var(--c-black);} .menu li > a { background-color: var(--c-yellow);} .menu .menu-main li:nth-child(1) { transition-delay: 0;} .menu .menu-main li:nth-child(2) { transition-delay: .1s;} .menu .menu-main li:nth-child(3) { transition-delay: .2s;} .menu .menu-second li:nth-child(1) { transition-delay: .3s;} .menu .menu-second li:nth-child(2) { transition-delay: .4s;} .menu-active { overflow: hidden;} .menu-active .menu { pointer-events: all;} .menu-active .menu li { transform: translateX(0);} .menu-lang { position: fixed; top: var(--header-height); right: 0; z-index: 1000; margin-right: calc(var(--padd-main) + var(--padd)); overflow: hidden; pointer-events: none; transition: all .8s var(--bezier);} .menu-lang li { transform: translateX(calc(100% + var(--padd) + var(--padd-main))); transition: transform .9s var(--bezier);} .menu-lang li > a { display: block; padding: 1rem var(--unit-5); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; text-decoration-color: transparent;} .menu-lang li > a.hover { text-decoration-color: var(--c-black);} .menu-lang li > a { background-color: var(--c-red);} .menu-lang li:nth-child(1) { transition-delay: 0;} .menu-lang li:nth-child(2) { transition-delay: .1s;} .menu-lang li:nth-child(3) { transition-delay: .2s;} .menu-lang li:nth-child(4) { transition-delay: .3s;} .menu-lang li:nth-child(5) { transition-delay: .4s;} .menu-lang-active { overflow: hidden;} .menu-lang-active .menu-lang { pointer-events: all;} .menu-lang-active .menu-lang li { transform: translateX(0);} @container style(--size-m: true) { .header .header-logo, .header .menu-main { position: relative; z-index: 2;} } @container style(--size-s: true) { .header .cta-menu, .header .cta-lang { width: var(--unit-8); height: var(--unit-8);} .header-logo img { height: var(--unit-8);} } /* 1.2 -- Footer */ .footer { background-color: var(--c-black); padding: var(--unit-8) 0; color: var(--c-white); --c-txt: var(--c-black-200);} .footer-logo-box { position: relative; padding-left: 1rem; padding-right: var(--unit-5);} .footer-logo-box .footer-img { position: absolute; opacity: 0; transition: opacity 0.4s var(--bezier);} .footer-logo-box .footer-img.hover { opacity: 1;} .footer-logo-box .footer-img img { height: 20rem; width: auto;} .footer-logo-box .footer-img:nth-child(1) { top: 15%; left: 0;} .footer-logo-box .footer-img:nth-child(2) { top: 5%; left: 35%;} .footer-logo-box .footer-img:nth-child(3) { top: 10%; left: 65%;} .footer-logo-box .footer-img:nth-child(4) { top: 60%; left: 5%;} .footer-logo-box .footer-img:nth-child(5) { top: 45%; left: 30%;} .footer-logo-box .footer-img:nth-child(6) { top: 50%; left: 60%;} .footer-logo a, .footer-logo img, .footer-logo svg, .footer-logo video { display: block;} .footer-logo img, .footer-logo svg, .footer-logo video { height: auto; width: 100%;} .footer-text { min-height: 100%; padding-right: 1rem; padding-left: var(--unit-5);} .footer-text .footer-link { font-size: 1.4rem; line-height: 1.5em; letter-spacing: -.02em; color: var(--c-black-200);} @container style(--size-s: true) { .footer { padding: var(--unit-5) 0 var(--unit-12);} .footer-logo-box { position: relative; padding: 0;} .footer-logo.hover .footer-img { opacity: 0;} .footer-text { padding: 0;} .footer-text .footer-link { font-size: 1.2rem; line-height: 1.3em; letter-spacing: 0;} .footer-logo-box .footer-img { animation: footer-s 18s linear infinite; opacity: 0; transition: opacity 0.4s var(--bezier);} .footer-logo-box .footer-img img { height: 18rem;} .footer-logo-box .footer-img:nth-child(1) { top: 15%; left: 5%; animation-delay: 0s;} .footer-logo-box .footer-img:nth-child(2) { top: 5%; left: 45%; animation-delay: 3s;} .footer-logo-box .footer-img:nth-child(3) { top: 35%; left: 10%; animation-delay: 6s;} .footer-logo-box .footer-img:nth-child(4) { top: 10%; left: 35%; animation-delay: 9s;} .footer-logo-box .footer-img:nth-child(5) { top: 0; left: 0; animation-delay: 12s;} .footer-logo-box .footer-img:nth-child(6) { top: 50%; left: 50%; animation-delay: 15s;} } /* SOLO HOME */ .home .header { animation: movedown 2s var(--bezier);} .home .box-marquee { animation: moveup 2s var(--bezier);} /* 2 -- Text */ html, body, input, button, select, textarea { font-family: var(--font); font-style: normal; color: var(--c-txt);} html { font-size: var(--txt-html);} body { font-size: var(--txt-body); line-height: var(--txt-body-lh); font-weight: var(--txt-body-fw); letter-spacing: var(--txt-body-ls);} a, button { color: var(--c-txt);} .unit-txt h1, .txt-h1 { font-size: var(--txt-h1); line-height: var(--txt-h1-lh); font-weight: var(--txt-h1-fw); letter-spacing: var(--txt-h1-ls);} .unit-txt h2, .txt-h2 { font-size: var(--txt-h2); line-height: var(--txt-h2-lh); font-weight: var(--txt-h2-fw); letter-spacing: var(--txt-h2-ls);} .unit-txt h3, .txt-h3 { font-size: var(--txt-h3); line-height: var(--txt-h3-lh); font-weight: var(--txt-h3-fw); letter-spacing: var(--txt-h3-ls);} .unit-txt h4, .txt-h4 { font-size: var(--txt-h4); line-height: var(--txt-h4-lh); font-weight: var(--txt-h4-fw); letter-spacing: var(--txt-h4-ls);} .unit-txt h5, .txt-h5 { font-size: var(--txt-h5); line-height: var(--txt-h5-lh); font-weight: var(--txt-h5-fw); letter-spacing: var(--txt-h5-ls);} .unit-txt h6, .txt-h6 { font-size: var(--txt-h6); line-height: var(--txt-h6-lh); font-weight: var(--txt-h6-fw); letter-spacing: var(--txt-h6-ls);} .unit-txt p, .unit-txt ul, .unit-txt ol, .txt-body { font-size: var(--txt-body); line-height: var(--txt-body-lh); font-weight: var(--txt-body-fw); letter-spacing: var(--txt-body-ls);} .cta { font-size: var(--txt-cta); line-height: var(--txt-cta-lh); font-weight: var(--txt-cta-fw); letter-spacing: var(--txt-cta-ls); text-decoration: none;} input[type=submit] { font-size: var(--txt-submit); line-height: var(--txt-submit-lh); font-weight: var(--txt-submit-fw); letter-spacing: var(--txt-submit-ls);} .unit-txt h1, .unit-txt h2, .unit-txt h3 { margin-bottom: var(--unit-4); margin-top: var(--unit-8);} .unit-txt h4 { margin-bottom: 0; margin-top: 0;} .unit-txt h5 { margin-bottom: var(--txt-h5-lh);} .unit-txt h6 { margin-bottom: var(--txt-h6-lh);} .unit-txt p, .unit-txt ul, .unit-txt ol { margin-bottom: var(--txt-body-lh);} .unit-txt ul, .unit-txt ol { padding-left: var(--unit-18);} .unit-txt li { margin-bottom: var(--unit-2);} .unit-txt h1:first-child, .unit-txt h2:first-child, .unit-txt h3:first-child { margin-top: 0;} .unit-txt h3 + h4 { margin-top: calc(0px - var(--unit-2));} .unit-txt p + ul { margin-top: calc(0px - var(--txt-body-lh));} .unit-txt :last-child { margin-bottom: 0;} /* -- Table */ .unit-txt table { width: 100%; border-radius: var(--unit);} .unit-txt tr th, .unit-txt tr td { padding: var(--unit-2); vertical-align: top; border: var(--border-1-b); max-width: 33%;} .unit-txt tr th { background-color: var(--c-black-200); text-align: left; font-size: var(--txt-h4); font-weight: var(--txt-h4-fw); line-height: var(--txt-h4-lh); letter-spacing: var(--txt-h4-ls);} .unit-txt tr td { font-size: var(--txt-body); font-weight: var(--txt-body-fw); line-height: var(--txt-body-lh); letter-spacing: var(--txt-body-ls);} .unit-txt a { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.15em;} .unit-txt a.hover { color: var(--c-txt);} .txt-strong, strong, b { font-weight: var(--fw-strong);} .txt-italic, em, i { font-style: italic;} .txt-a-l { text-align: left;} .txt-a-c { text-align: center;} .txt-a-r { text-align: right;} .txt-upper { text-transform: uppercase;} .txt-grey { color: var(--c-black-200);} .txt-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .txt-line-2 { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .txt-line-3 { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} .header a, .footer a { text-decoration: none;} mark { background: linear-gradient(var(--c-red), var(--c-red)); background-blend-mode: darken; padding-inline: .1em; box-decoration-break: clone;} /* 3 -- Interaction */ ::selection { background: var(--c-red); color: var(--c-black);} ::-moz-selection { background: var(--c-red); color: var(--c-black);} ::-webkit-selection { background: var(--c-red); color: var(--c-black);} /* 3.1 -- CTAs */ .cta { display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; gap: var(--unit-5);} .cta-box { -webkit-appearance: none; appearance: none; border-radius: var(--cta-border-r); padding: var(--cta-padd);} .cta-box.cta-box-m { padding: var(--cta-padd-m);} .cta-box.cta-box-s { padding: var(--cta-padd-s);} .cta-box.cta-primary { background-color: var(--cta-p-color-bg); color: var(--cta-p-color); border: var(--cta-p-border);} .cta-box.cta-primary.hover, .hover .cta-box.cta-primary { background-color: var(--cta-p-hov-color-bg); color: var(--cta-p-hov-color); border-color: var(--cta-p-hov-border-color);} .cta-box.cta-secondary { background-color: var(--cta-s-color-bg); color: var(--cta-s-color); border: var(--cta-s-border);} .cta-box.cta-secondary.hover, .hover .cta-box.cta-secondary { background-color: var(--cta-s-hov-color-bg); color: var(--cta-s-hov-color); border-color: var(--cta-s-hov-border-color);} .cta-box:disabled { background-color: var(--c-black-100); color: var(--c-white); border-color: var(--c-black-100);} .cta-box:disabled.hover, .hover .cta-box:disabled { background-color: var(--c-black-100); color: var(--c-white); border-color: var(--c-black-100);} @container style(--size-m: true) { .cta { gap: var(--unit-3);} .cta-box:has(.icon-b-arrow-l), .cta-box:has(.icon-b-arrow-r) { padding: 1rem .4rem;} } /* 3.2 -- Form */ input, select, textarea { width: 100%;} input[type=submit] { width: auto;} /* 3.2.1 -- Input, select, textarea */ input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea { font-size: var(--txt-input); line-height: var(--txt-input-lh); font-weight: var(--txt-input-fw); letter-spacing: var(--txt-input-ls); padding: var(--input-padd); border-radius: var(--input-border-r); background-color: var(--input-color-bg); color: var(--input-color); border: var(--input-border);} textarea { min-height: var(--unit-30);} select { padding-right: var(--select-padd-r); background-image: var(--icon-b-arrow-drop); background-repeat: no-repeat; background-position: calc(100% - var(--unit-3)); background-size: var(--unit-6) var(--unit-6);} /* 3.2.2 -- Button */ input[type=submit] { -webkit-appearance: none; appearance: none; font-size: var(--txt-submit); line-height: var(--txt-submit-lh); font-weight: var(--txt-submit-fw); letter-spacing: var(--txt-submit-ls); border-radius: var(--submit-border-r); padding: var(--submit-padd); background: var(--submit-color-bg); color: var(--submit-color); border: var(--submit-border);} input[type=submit].hover { background-color: var(--submit-hov-color-bg); color: var(--submit-hov-color); border-color: var(--submit-hov-border-color);} /* 3.2.3 -- Checkbox */ input[type=checkbox], input[type=radio] { width: var(--checkbox-width); height: var(--checkbox-height); border: var(--border-2-b); background-color: transparent; background-size: 0 0; background-position: center; background-repeat: no-repeat; border-radius: 50%;} input[type=checkbox]:checked, input[type=radio]:checked { border-color: var(--c-black); background-color: transparent; background-size: var(--checkbox-bg-size);} input[type=checkbox]:checked { background-image: var(--icon-b-check); background-repeat: no-repeat; background-position: center;} input[type=radio]:checked { background-image: var(--icon-b-radio); background-repeat: no-repeat; background-position: center;} input[type=checkbox]:checked + *, input[type=radio]:checked + * { color: var(--c-black);} /* 3.2.4 -- Labels */ label, legend { cursor: pointer; font-size: var(--txt-h5); line-height: var(--txt-h5-lh); font-weight: var(--txt-h5-fw); letter-spacing: var(--txt-h5-ls);} ::placeholder { color: var(--c-black-200);} /* 3.2.5 -- :focus */ input:focus, textarea:focus, select:focus { border-color: var(--c-black);} :focus::placeholder { color: var(--c-black); border-color: var(--c-black);} /* 3.2.6 -- Input range */ input[type="range"] { -webkit-appearance: none; display: block; appearance: none; width: 100%; height: .3rem; outline: none; background-color: var(--range-color-bg); transition: background 0.2s var(--bezier);} /* WebKit */ input[type="range"]::-webkit-slider-runnable-track { height: .3rem; margin-top: 0; background: linear-gradient(to right, var(--range-color) 0%, var(--range-color) var(--val), #A1A1A100 var(--val), #A1A1A100 100%);} input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: .3rem; height: .3rem; border-radius: 50%; opacity: 0; cursor: pointer; transition: transform 0.2s var(--bezier); background-color: var(--range-color); margin-top: .015em;} input[type="range"]::-webkit-slider-thumb:hover { transform: scale(3); opacity: 1;} /* Firefox */ input[type="range"]::-moz-range-track { background: var(--c-white);} input[type="range"]::-moz-range-progress { background: var(--range-color);} input[type="range"]::-moz-range-thumb { width: .3rem; height: .3rem; border-radius: 50%; cursor: pointer; transition: transform 0.2s; background-color: var(--range-color);} @container style(--size-s: true) { input[type="range"]::-webkit-slider-thumb { width: .3rem; height: .3rem; margin-top: -0.75rem;} input[type="range"]::-moz-range-thumb { width: .3rem; height: .3rem;} } /* 4 -- Icons */ .icon::after { content: ''; display: block; width: var(--unit-6); height: var(--unit-6); background-position: center; background-repeat: no-repeat; background-size: contain; flex-shrink: 0;} .icon-xs::after { width: var(--unit-4); height: var(--unit-4);} .icon-s::after { width: var(--unit-6); height: var(--unit-6);} .icon-m::after { width: var(--unit-8); height: var(--unit-8);} .icon-l::after { width: var(--unit-10); height: var(--unit-10);} .icon-xl::after { width: var(--unit-12); height: var(--unit-12);} @container style(--size-s: true) { .icon-xs-s::after { width: var(--unit-4); height: var(--unit-4);} .icon-s-s::after { width: var(--unit-6); height: var(--unit-6);} .icon-m-s::after { width: var(--unit-8); height: var(--unit-8);} .icon-l-s::after { width: var(--unit-10); height: var(--unit-10);} .icon-xl-s::after { width: var(--unit-12); height: var(--unit-12);} } .icon-b-arrow-b::after { background-image: var(--icon-b-arrow-b);} .icon-b-arrow-drop::after { background-image: var(--icon-b-arrow-drop);} .icon-b-arrow-l::after { background-image: var(--icon-b-arrow-l);} .icon-b-arrow-r::after { background-image: var(--icon-b-arrow-r);} .icon-b-arrow-t::after { background-image: var(--icon-b-arrow-t);} .icon-b-check::after { background-image: var(--icon-b-check);} .icon-b-cross::after { background-image: var(--icon-b-cross);} .icon-b-download::after { background-image: var(--icon-b-download);} .icon-b-less::after { background-image: var(--icon-b-less);} .icon-b-plus::after { background-image: var(--icon-b-plus);} .icon-b-radio::after { background-image: var(--icon-b-radio);} .icon-b-search::after { background-image: var(--icon-b-search);} .icon-b-play::after { background-image: var(--icon-b-play);} .icon-b-pause::after { background-image: var(--icon-b-pause);} .icon-b-rewind::after { background-image: var(--icon-b-rewind);} .icon-b-forward::after { background-image: var(--icon-b-forward);} .icon-b-volume::after { background-image: var(--icon-b-volume);} .icon-b-volume-muted::after { background-image: var(--icon-b-volume-muted);} .icon-b-fullscreen::after { background-image: var(--icon-b-fullscreen);} .icon-b-menu::after { background-image: var(--icon-b-menu);} .icon-b-lang::after { background-image: var(--icon-b-lang);} .icon-w-arrow-b::after { background-image: var(--icon-w-arrow-b);} .icon-w-arrow-drop::after { background-image: var(--icon-w-arrow-drop);} .icon-w-arrow-l::after { background-image: var(--icon-w-arrow-l);} .icon-w-arrow-r::after { background-image: var(--icon-w-arrow-r);} .icon-w-arrow-t::after { background-image: var(--icon-w-arrow-t);} .icon-w-check::after { background-image: var(--icon-w-check);} .icon-w-cross::after { background-image: var(--icon-w-cross);} .icon-w-download::after { background-image: var(--icon-w-download);} .icon-w-less::after { background-image: var(--icon-w-less);} .icon-w-plus::after { background-image: var(--icon-w-plus);} .icon-w-radio::after { background-image: var(--icon-w-radio);} .icon-w-search::after { background-image: var(--icon-w-search);} .icon-w-play::after { background-image: var(--icon-w-play);} .icon-w-pause::after { background-image: var(--icon-w-pause);} .icon-w-rewind::after { background-image: var(--icon-w-rewind);} .icon-w-forward::after { background-image: var(--icon-w-forward);} .icon-w-volume::after { background-image: var(--icon-w-volume);} .icon-w-volume-muted::after { background-image: var(--icon-w-volume-muted);} .icon-w-fullscreen::after { background-image: var(--icon-w-fullscreen);} .icon-w-menu::after { background-image: var(--icon-w-menu);} .icon-w-lang::after { background-image: var(--icon-w-lang);} .icon-w-instagram::after { background-image: var(--icon-w-instagram);} /* Icons CTAs (Animaciones) */ .icon::before, .icon::after { transition: all 0.9s var(--bezier-2);} .cta .icon { width: var(--unit-8); height: var(--unit-8); overflow: hidden; position: relative;} .cta .icon-b-arrow-l::before, .cta .icon-b-arrow-r::before, .cta .icon-b-download::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain;} .cta .icon-b-arrow-l::after, .cta .icon-b-arrow-r::after, .cta .icon-b-plus::after, .cta .icon-b-download::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .hover .icon-b-plus::after { transform: rotate(90deg);} .cta .icon-b-arrow-l::before { background-image: var(--icon-b-arrow-l)} .cta .icon-b-arrow-l::after { transform: translateX(100%);} .hover .icon-b-arrow-l::before { transform: translateX(-100%);} .hover .icon-b-arrow-l::after { transform: translateX(0);} .cta .icon-b-arrow-r::before { background-image: var(--icon-b-arrow-r)} .cta .icon-b-arrow-r::after { transform: translateX(-100%);} .hover .icon-b-arrow-r::before { transform: translateX(100%);} .hover .icon-b-arrow-r::after { transform: translateX(0);} .cta .icon-b-download { border-bottom: var(--border-3-b);} .cta .icon-b-download::before { background-image: var(--icon-b-download)} .cta .icon-b-download::after { transform: translateY(-120%);} .hover .icon-b-download::before { transform: translateY(120%);} .hover .icon-b-download::after { transform: translateX(0);} @container style(--size-s: true) { .cta .icon-b-download { border-bottom: var(--border-2-b);} .cta .icon { width: var(--unit-5); height: var(--unit-5);} } /* 5 -- Animation */ a, button, .cta, .icon::after, .header, .header::before, .header .cta-menu::before, .header .cta-menu::after, .menu, input, select, textarea, ::placeholder { transition: all .8s var(--bezier);} input[type="checkbox"], input[type="radio"] { transition: all .2s var(--bezier);} [data-view] { opacity: 0; transition: all 1.2s var(--bezier);} [data-view].view { opacity: 1; transform: translate(0);} [data-view=scale] { transform: scale(.9);} [data-view=scale].view { transform: scale(1);} [data-view=top] { transform: translateY(8rem);} [data-view=top].view { transform: translateY(0);} [data-view=bottom] { transform: translateY(-8rem);} [data-view=bottom].view { transform: translateY(0);} [data-view=left] { transform: translateX(8rem);} [data-view=left].view { transform: translateX(0);} [data-view=right] { transform: translateX(-8rem);} [data-view=right].view { transform: translateX(0);} @keyframes fadein { 0% { opacity: 0;} 100% { opacity: 1;} } @keyframes fadeout { 0% { opacity: 1;} 100% { opacity: 0;} } @keyframes footer-s { 0% { opacity: 0; } 1% { opacity: 1; } 10.111% { opacity: 1; } 11.111% { opacity: 0; } 100% { opacity: 0; } } @keyframes movedown { 0% { transform: translateY(-100%);} 50% { transform: translateY(-100%);} 100% { transform: translateY(0);} } @keyframes moveup { 0% { transform: translateY(100%);} 50% { transform: translateY(100%);} 100% { transform: translateY(0);} } /* The end -- :P */