:root{--app-layout:mobile}html.configurator{overflow:hidden}body{background:var(--c-bg-page);margin:0;overflow:hidden;padding:0;-webkit-overflow-scrolling:touch}body::before{animation:fadeout .5s forwards .5s;background:inherit;bottom:0;content:"";left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:5}@keyframes fadeout{to{opacity:0}}.app-header{color:var(--candela-white);left:0;margin:1rem;pointer-events:none;position:absolute;right:0;top:0;z-index:3}article{padding:var(--m-page-frame-width);padding-top:var(--m-view-height)}body.swipe-active{overflow:hidden}.view{left:0;margin:0;height:var(--m-view-height);position:fixed;right:0;top:0;z-index:2}.start-animation .view{min-height:100%;min-width:100%}.start-animation:not(.loading,.dialog-active) .view{animation:view-start .5s var(--e-slide) 1s forwards}@keyframes view-start{to{min-height:var(--m-view-height)}}.ui{--phase-scrollbar-width:0em;background:var(--c-bg-page);height:var(--m-ui-height);overflow-x:hidden;margin-right:calc(-1 * var(--phase-scrollbar-width));position:relative}.full-screen .view{min-height:var(--m-full-screen-view-height);transition:min-height 1s ease-in-out}@media (min-width:60em){.view{min-width:50%;transition:min-width .5s var(--e-slide)}.full-screen .view{min-height:5em;min-width:50%;animation:wide-fullscreen-view .75s var(--e-slide) forwards}}@keyframes wide-fullscreen-view{to{min-width:100%}}@keyframes wide-view-start{to{min-width:15em}}.ui{overflow:hidden}.phase{box-sizing:border-box;left:0;margin:0;max-height:100%;padding:0 var(--m-form-padding);opacity:0;overflow-y:auto;pointer-events:none;position:absolute;right:0;top:0;transform:translateX(-100%);transition:transform .25s var(--e-slide),opacity .75s}.phase[aria-current]{opacity:1;pointer-events:auto;transform:translateX(0)}.phase[aria-current]+.phase{transform:translateX(100%)}.phase>header{overflow:hidden}.phase>header nav,.phase .boat-model{float:left;margin-left:0;width:40%}.phase h1{clear:none;margin-left:50%}footer nav{margin:1em calc(-1 * var(--m-form-padding))}@media (min-width:40em){footer nav{margin:1em auto}}@media(min-width:60em){:root{--app-layout:wide;--m-form-padding:.25em;--m-ui-height:calc( 100vh - 2 * var(--m-page-frame-width) )}body{overflow:hidden}.app-header{margin:var(--m-page-frame-width);padding:0;position:absolute}article{align-items:stretch;display:flex;flex-direction:row;height:100%;padding-top:var(--m-page-frame-width)}.view{flex:4 1 auto;height:calc(100vh - 2 * var(--m-page-frame-width));min-height:10em;position:relative;z-index:3}.start-animation:not(.loading,.dialog-active) .view{animation-name:wide-view-start;min-height:var(--m-view-height);min-width:100%}.ui{--phase-scrollbar-width:.75em;flex:1 1 auto;overflow:hidden;max-width:28em;min-width:18em;transition:all .75s;width:25%;z-index:4}.phase{overflow:hidden;overflow-y:auto;padding-right:var(--phase-scrollbar-width)}.phase>header,.phase>footer{--shadow-y:-2em;background:var(--c-bg-page);box-shadow:0 var(--shadow-y) 2em 4em var(--c-bg-page);z-index:3}.phase>header{left:0;margin-bottom:2em;position:sticky;right:0;top:0}.phase>header h1{margin-bottom:.5em;margin-top:.25em}.phase>footer{--shadow-y:2em;bottom:0;left:0;padding-top:1em;position:sticky;right:0}[data-phase-current="checkout"] .view{flex:1 1 auto;min-width:14em;width:50%}[data-phase-current="checkout"] .ui{flex:4 1 auto;max-width:45em;min-width:28em;width:50%}}@media (min-width:35em) and (max-width:59.999em) and (max-height:30em){:root{--app-layout:mobile-landscape;--m-view-height:100vh;--m-ui-height:100vh;--br-view:0;font-size:.825em}article{display:flex;flex-direction:row;overflow:hidden;padding:0;padding-left:50%}.view{width:50%}.ui{width:100%}.phase{overflow-y:auto;padding-bottom:3em}.ui footer nav{margin:0 calc(-1 * var(--m-form-padding));position:static}}[data-phase-current="confirmation"]{--m-view-height:0em}[data-phase-current="confirmation"] .view{display:none}[data-phase-current="confirmation"] h1{margin-left:0}