/* A complete website example: composition, responsive screen and direct contact. */
.motion-study[data-study=web-simple]{background:radial-gradient(ellipse at 86% 74%,#e3f3cd 0,transparent 48%),linear-gradient(150deg,#fcfaff,#ece5f7)}
.motion-study[data-study=web-simple] .solution-demo{width:100%;margin:28px 0 22px;height:auto;font-family:DM,Arial,sans-serif;overflow:visible}
.service-sheet-hero .motion-study[data-study=web-simple]{min-height:0}
.service-sheet-hero .motion-study[data-study=web-simple] .solution-demo{margin:26px 0 30px}
.demo-web-orbit{transform-origin:297px 315px;animation:web-orbit 35s linear infinite}
.demo-web-content{animation:web-content 9.6s ease-in-out infinite}
.demo-web-selection{animation:web-select 9.6s ease-in-out infinite}
.demo-web-swatches{animation:web-swatches 9.6s ease-in-out infinite}
.demo-web-phone{animation:web-phone 9.6s cubic-bezier(.22,1,.36,1) infinite}
.demo-web-cursor{animation:web-cursor 9.6s cubic-bezier(.4,0,.2,1) infinite}
.demo-web-button{animation:web-button 9.6s ease-in-out infinite}
.demo-web-click{transform-origin:207px 394px;animation:web-click 9.6s ease-out infinite}
.demo-web-enquiry{animation:web-enquiry 9.6s cubic-bezier(.22,1,.36,1) infinite}
.demo-web-sheen{animation:web-sheen 9.6s ease-in-out infinite}
@keyframes web-orbit{to{transform:rotate(360deg)}}
@keyframes web-content{0%,100%{opacity:.85;transform:translateY(3px)}15%,90%{opacity:1;transform:translateY(0)}}
@keyframes web-select{0%,20%{opacity:1}32%,100%{opacity:0}}
@keyframes web-swatches{0%,100%{transform:translateY(0)}45%,75%{transform:translateY(-6px)}}
@keyframes web-phone{0%,20%,100%{transform:translate(9px,8px)}40%,80%{transform:translate(0,0)}}
@keyframes web-cursor{0%,20%,100%{transform:translate(60px,-135px)}48%,68%{transform:translate(0,0)}54%{transform:translate(1px,2px)}82%{transform:translate(20px,18px)}}
@keyframes web-button{0%,48%,62%,100%{opacity:1}54%{opacity:.72}}
@keyframes web-click{0%,49%,63%,100%{opacity:0;transform:scale(.4)}52%{opacity:.9;transform:scale(.4)}62%{opacity:0;transform:scale(1.6)}}
@keyframes web-enquiry{0%,48%,100%{opacity:0;transform:translateY(14px)}63%,90%{opacity:1;transform:translateY(0)}}
@keyframes web-sheen{0%,25%,100%{translate:0 0;opacity:0}35%{opacity:1}65%,90%{translate:260px 0;opacity:0}}
@media(max-width:1100px){#catalogo .motion-study[data-study=web-simple]{height:340px}#catalogo .motion-study[data-study=web-simple] .solution-demo{height:290px;width:100%;margin:24px 0 26px}}
@media(max-width:760px){#catalogo .motion-study[data-study=web-simple]{height:365px}#catalogo .motion-study[data-study=web-simple] .solution-demo{height:315px}.service-sheet-hero .motion-study[data-study=web-simple] .solution-demo{height:auto}}
@media(prefers-reduced-motion:reduce){.demo-web-enquiry{opacity:1}.demo-web-selection,.demo-web-click{opacity:0}}

/* Corporate identity: architecture, service areas and a project portfolio. */
.motion-study[data-study=web]{background:radial-gradient(ellipse at 20% 72%,#eaf5d9 0,transparent 48%),linear-gradient(155deg,#fcfaff,#ede5f8)}
.motion-study[data-study=web] .solution-demo{width:100%;margin:28px 0 22px;height:auto;font-family:DM,Arial,sans-serif}
.service-sheet-hero .motion-study[data-study=web]{min-height:0}
.service-sheet-hero .motion-study[data-study=web] .solution-demo{margin:26px 0 30px}
.demo-corp-orbit{transform-origin:300px 310px;animation:corp-orbit 38s linear infinite}
.demo-corp-backdrop{animation:corp-backdrop 9.6s ease-in-out infinite}
.demo-corp-copy{animation:corp-copy 9.6s ease-in-out infinite}
.demo-corp-nav{animation:corp-nav 9.6s cubic-bezier(.22,1,.36,1) infinite}
.demo-corp-tile{animation:corp-tile 9.6s ease-in-out infinite;animation-delay:var(--corp-delay,0s)}
.demo-corp-project{animation:corp-project 9.6s cubic-bezier(.22,1,.36,1) infinite}
.demo-corp-mobile{animation:corp-mobile 9.6s ease-in-out infinite}
.demo-corp-cursor{animation:corp-cursor 9.6s cubic-bezier(.4,0,.2,1) infinite}
.demo-corp-connect{animation:corp-connect 3.2s linear infinite}
.demo-corp-shine{animation:corp-shine 9.6s ease-in-out infinite}
@keyframes corp-orbit{to{transform:rotate(360deg)}}
@keyframes corp-backdrop{0%,100%{transform:translateY(2px)}50%{transform:translateY(-5px)}}
@keyframes corp-copy{0%,100%{opacity:.82;transform:translateY(3px)}25%,85%{opacity:1;transform:translateY(0)}}
@keyframes corp-nav{0%,20%,100%{transform:translateX(0)}36%,52%{transform:translateX(75px)}68%,88%{transform:translateX(150px)}}
@keyframes corp-tile{0%,100%{transform:translateY(3px);opacity:.75}35%,85%{transform:translateY(0);opacity:1}}
@keyframes corp-project{0%,15%,100%{transform:translateY(9px)}55%,85%{transform:translateY(0)}}
@keyframes corp-mobile{0%,100%{transform:translateY(0)}45%,75%{transform:translateY(-5px)}}
@keyframes corp-cursor{0%,16%,100%{transform:translate(-75px,3px)}35%,51%{transform:translate(0,0)}67%,85%{transform:translate(75px,3px)}}
@keyframes corp-connect{to{stroke-dashoffset:-52}}
@keyframes corp-shine{0%,20%,100%{transform:translateX(0);opacity:0}30%{opacity:1}68%,90%{transform:translateX(260px);opacity:0}}
@media(max-width:1100px){#catalogo .motion-study[data-study=web]{height:340px}#catalogo .motion-study[data-study=web] .solution-demo{height:290px;width:100%;margin:24px 0 26px}}
@media(max-width:760px){#catalogo .motion-study[data-study=web]{height:365px}#catalogo .motion-study[data-study=web] .solution-demo{height:315px}.service-sheet-hero .motion-study[data-study=web] .solution-demo{height:auto}}