@font-face { font-family: 'IM Fell French Canon Pro'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/im-fell-french-canon-pro.woff2') format('woff2'); } * { margin: 0; padding: 0; } :root { --padding: 1.5rem; --color-black: #000; --color-white: #fff; --color-gold: #caab8a; --color-grey: #777; --color-light: #efefef; --color-text: var(--color-black); --color-text-grey: var(--color-grey); --color-background: var(--color-white); --color-code-light-grey: #cacbd1; --color-code-comment: #a9aaad; --color-code-white: #c5c9c6; --color-code-red: #d16464; --color-code-orange: #de935f; --color-code-yellow: #f0c674; --color-code-green: #a7bd68; --color-code-aqua: #8abeb7; --color-code-blue: #7e9abf; --color-code-purple: #b294bb; --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; } html { font-family: var(--font-family-sans); color: var(--color-text); background: var(--color-background); overflow-x: hidden; } img { width: 100%; } main { margin-bottom: 30px; } body { padding: 0px 0px 0px 0px; margin: 0 auto; position: relative; min-height: 100vh; } li { list-style: none; } a { color: currentColor; text-decoration: none; } button { font: inherit; background: none; border: 0; color: currentColor; cursor: pointer; } strong, b { font-weight: 600; } small { font-size: inherit; color: var(--color-text-grey); } .bg-light { background-color: var(--color-light); } .color-grey { color: var(--color-text-grey); } .ftrbg { z-index: 1 !important; } /* //////////////////////////////////////// Absolute Centering //////////////////////////////////////// */ .Absolute-Center { height: 50%; /* Set your own height: percents, ems, whatever! */ width: 50%; /* Set your own width: percents, ems, whatever! */ overflow: auto; /* Recommended in case content is larger than the container */ margin: auto; /* Center the item vertically & horizontally */ position: absolute; /* Break it out of the regular flow */ top: 0; left: 0; bottom: 0; right: 0; /* Set the bounds in which to center it, relative to its parent/container */ } /* Make sure our center blocks stay in their container! */ .Center-Container { position: relative; } /* Fixed floating element within viewport */ .Absolute-Center.is-Fixed { position: fixed; z-index: 999; } /* Min/Max Width */ .Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 200px; max-width: 400px; padding: 40px; } /* Align Right, still vertically centered */ .Absolute-Center.is-Right { left: auto; right: 20px; text-align: right; } /* Align Left, still vertically centered */ .Absolute-Center.is-Left { right: auto; left: 20px; text-align: left; } /* Responsive image, still absolutely centered! Apply the classes to the image itself. */ .Absolute-Center.is-Image { width: 50%; height: auto; padding: 0; } .Absolute-Center.is-Image img { width: 100%; height: auto; } /* Set content overflow if your content may go too long */ .Absolute-Center.is-Overflow { height: 250px; max-height: 100%; overflow: auto; } /* //////////////////////////////////////// */ /* Variable content height with display: table; Breaks cross browser compatibility, but now has a Modernizr test available! Modernizr test adds ".absolutecentercontent" to if the browser will center correctly with a variable height, and ".no-absolutecentercontent" if it will not be centered with a variable height so that you can add fallback styles in your CSS or use Javascript to manually center it. */ .absolutecentercontent .Absolute-Center.is-Variable { display: table; height: auto; /* Only necessary because height was already declared */ } /* Allow the user to resize */ .Absolute-Center.is-Resizable { min-width: 20%; max-width: 90%; min-height: 20%; max-height: 80%; resize: both; } .absolutecentercontent .Absolute-Center.is-Resizable { /* necessary to override settings from .is-Variable, if used */ display: block !important; } /* //////////////////////////////////////// Other Techniques ////////////////////////////////////////*/ /* Negative Margin Technique */ .Center-Block.is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ } /* Display: Table Technique */ .Center-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; } /* Inline-Block Technique */ .Center-Container.is-Inline { text-align: center; overflow: auto; } .Center-Container.is-Inline:after, .is-Inline .Center-Block { display: inline-block; vertical-align: middle; } .Center-Container.is-Inline:after { content: ' '; height: 100%; margin-left: -0.25em; /* to offset spacing. may vary with fonts */ } .is-Inline .Center-Block { text-align: left; max-width: 80%; /* Prevents issues with long content causes the content block to be pushed to the top; max-width: calc(100% - 0.25em) /* Only for IE9+ */ } .lt-ie8 .is-Inline .Center-Block { /* IE7 Support */ display: block; margin-top: ~'expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0")'; } /* Transform Technique */ .is-Translated { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } /* Flexbox Technique */ .Center-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } /* //////////////////////////////////////// Falling Leafs ////////////////////////////////////////*/ .leaf-scene { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; transform-style: preserve-3d; overflow: hidden; } .leaf-scene div { position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: url(https://mithril.blackzet.com/assets/images/leaf.svg) no-repeat; background-size: 100%; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; } /* Home Elements */ .zvibrate { -webkit-animation: vibrate 1.45s; } @-webkit-keyframes vibrate { 0% { -webkit-transform: translate(35px, 0); } 5% { -webkit-transform: translate(-35px, 0); } 10% { -webkit-transform: translate(20px, 0); } 15% { -webkit-transform: translate(-20px, 0); } 20% { -webkit-transform: translate(10px, 0); } 25% { -webkit-transform: translate(0px, 0); } } .leaf-scene svg { fill: #2f840b; } .header { padding: 0 10px !important; } header.h1 { margin-top: 15vh; } .logo-txt, .lionsvg { float: left; } .logo-txt { font-weight: bold; margin-left: 15px; margin-top: 17px; } .lionsvg { margin-top: 7px; } .home-inner-wrpr { display: inline-block; width: 100%; height: 100%; } .main { display: inline-block; width: 100%; min-height: 550px; } .intro-wrpr { display: inline-block; float: left; margin-left: 40px; max-width: 50%; font-family: 'IM Fell French Canon Pro'; } .intro-wrpr p { margin-bottom: 20px; font-size: 20px; } .withdropcap:first-child:first-letter { float: left; font-size: 2.5em; margin-right: 7px; line-height: 1; } .header { margin-bottom: 30px; width: 100%; z-index: 9; position: relative; } .footer { line-height: 1.5em; position: relative; width: 100%; background-color: #dbdbdb; padding: 20px; } .footer:before { content: ""; display: block; width: 1.5rem; height: 2px; background: var(--color-gold); margin-bottom: 1.5rem; } .footer h2 { font-weight: 600; margin-bottom: .75rem; } .footer ul { padding-left: 0; } .footer p { color: var(--color-text-grey); } .footer p { font-size: 13px; } .footer a:hover { color: var(--color-text); } .footer .grid { grid-gap: 0; } .footer .grid > .column { margin-bottom: 0px; } /* Star Sky */ .magicbg { background-image: linear-gradient(to right bottom, #a9347e, #4b32a7); } .magicbg.dark { background: #222; } .magicbg .star { line-height: 15px; position: absolute; transition: 1s; overflow: hidden; opacity: 1; height: 15px; width: 15px; border-radius: 50%; z-index: -90; } .magicbg .star svg { height: 100%; width: auto; } .magicbg .star_inner { height: 15px; } /* ///////// */ /* Mogli Cat */ /* ///////// */ .mogliwrapper { position: absolute; width: 100%; bottom: 20px; z-index: 99999999; } .cat { position: absolute; bottom: 65px; left: 100px; height: 30px; width: 60px; transition: 1.5s; transform-origin: center; background-color: transparent; } /* body */ .body { position: absolute; height: 30px; width: 60px; } .face_left .body { animation: turn_body_left forwards 0.5s; } @keyframes turn_body_left { 0%,100% { transform: scale(1); } 50% { transform: scale(0.5, 1); } } .face_right .body { animation: turn_body_right forwards 0.5s; } @keyframes turn_body_right { 0%,100% { transform: scale(1); } 50% { transform: scale(0.5, 1); } } /* head */ .cat_head { position: absolute; height: 40px; width: 48px; right: -10px; top: -30px; transition: 0.5s; z-index: 50; } .first_pose .cat_head, .face_left .cat_head { right: 22px; } /* tail */ .tail { position: absolute; top: -25px; height: 36px; width: 15px; animation: tail_motion forwards 2s; transform-origin: bottom right; } @keyframes tail_motion { 0%,100% { left: -5px; transform: rotate(0deg) scale(1); } 50% { left: -10px; transform: rotate(-50deg) scale(-1,1); } } .first_pose .tail, .face_left .tail { left: 45px; animation: tail_motion_alt forwards 2s; } @keyframes tail_motion_alt { 0%,100% { left: 45px; transform: rotate(0deg) scale(1); } 50% { left: 40px; transform: rotate(50deg) scale(-1,1); } } /* legs */ .leg { position: absolute; height: 20px; width: 10px; transform-origin: top center; } .front_legs, .back_legs { position: absolute; height: 30px; transition: 0.7s; } .front_legs { width: 30px; right: 0; } .back_legs { width: 25px; left: 0; } .face_left .leg svg { transform: scale(-1,1); } .face_right .front_legs{ right: 0; } .first_pose .front_legs, .face_left .front_legs{ right: 30px; } .face_right .back_legs{ left: 0; } .first_pose .back_legs, .face_left .back_legs{ left: 35px; } .one, .three { bottom: -15px; right: 0; } .two, .four { bottom: -15px; left: 0px; } .one.walk, .three.walk { animation: infinite 0.3s walk; } .two.walk, .four.walk { animation: infinite 0.3s walk_alt; } @keyframes walk { 0%,100% {transform: rotate(-10deg);} 50% {transform: rotate(10deg);} } @keyframes walk_alt { 0%,100% {transform: rotate(10deg);} 50% {transform: rotate(-10deg);} } /* jump */ .cat_wrapper { position: absolute; bottom: 0; } .cat_wrapper.jump .one { animation: infinite 0.3s walk; } .cat_wrapper.jump .two { animation: infinite 0.3s walk_alt; } .cat_wrapper.jump .three, .cat_wrapper.jump .four { animation: none; } .cat_wrapper.jump .cat.face_right .back_legs { transform-origin: center; transform: rotate(50deg); } .cat_wrapper.jump .cat.face_left .back_legs { transform-origin: center; transform: rotate(-50deg); } .cat_wrapper.jump .cat.face_right .front_legs { transform-origin: center; transform: rotate(-60deg); } .cat_wrapper.jump .cat.face_left .front_legs { transform-origin: center; transform: rotate(60deg); } .cat_wrapper.jump { animation: jump forwards 1s; } .jump .face_left { animation: forwards 0.5s body_stand_left; transform-origin: right bottom; } .jump .face_right { animation: forwards 0.5s body_stand_right; transform-origin: left bottom; } @keyframes jump { 0%, 100% {bottom: 0px;} 50% {bottom: 200px;} } @keyframes body_stand_right { 0% {transform: rotate(0deg);} 100% {transform: rotate(-45deg);} } @keyframes body_stand_left { 0% {transform: rotate(0deg);} 100% {transform: rotate(45deg);} } .mogliwrapper svg { height: 100%; width: 100%; } .mogliwrapper polygon.eyes { fill: rgb(255 255 255); } /* Newsletter Modal */ .mogliwrapper polygon, .mogliwrapper path { fill: #222; } .mogliwrapper .sign { position: absolute; color: white; bottom: 10px; right: 10px; font-size: 10px; } /* Newsletter Modal */ .newslettermodal { display: inline-block; opacity: 0; width: 100vw; height: 100vh; overflow: hidden; position: fixed; top: 0px; z-index: -1; left: 0; right: 0px; bottom: 0px; } .newslettermodal.open { z-index: 999999999999; opacity: 1; } #newslettermodal-wrpr.open { transform: scale(1); } #newslettermodal-wrpr.open .registersteps { animation: moveUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #newslettermodal-wrpr.open + .main { z-index: 1; animation: slideUpLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #newslettermodal-wrpr .registersteps { animation: moveDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #newslettermodal-wrpr + .main { animation: slideDownLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } @keyframes slideUpLarge { 0% { transform: translateY(0%); } 100% { transform: translateY(-100%); } } @keyframes slideDownLarge { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } @keyframes moveUp { 0% { transform: translateY(150px); } 100% { transform: translateY(0); } } @keyframes moveDown { 0% { transform: translateY(0px); } 100% { transform: translateY(150px); } } .locked { overflow: hidden; } .closeit { display: inline-block; position: absolute; width: 35px; color: #fff; right: 20px; top: 20px; cursor: pointer; } .closeit:hover { color: #222; } .registersteps { position: relative; width: 400px; min-height: 200px; background: #fff; box-shadow: 0px 5px 80px 0px #e4e8f0; border-radius: 5px; overflow: hidden; } .registersteps.small { height: 230px; } .registersteps-inner { padding: 20px; } .registersteps-inner input { width: 100%; margin: 20px 0px; padding: 8px 10px; } /* Magic Text */ .magic-text { color: #e9ebee; } .magic-text span { opacity: 0; transform: translateY(3.5px); transition: all 0.25s ease-out; } .magic-text span.is-visible { color: var(--theme-color); opacity: 1; transform: translateY(0); } /* Grid */ .home-grid { display: grid; list-style: none; grid-gap: 1.5rem; line-height: 0; grid-template-columns: repeat(1, 1fr); grid-auto-flow: dense; } .home-grid li { position: relative; --cols: 1; --rows: 1; overflow: hidden; background: #000; line-height: 0; } .home-grid li:first-child { --cols: 2; --rows: 2; } .home-grid li:nth-child(5) { --cols: 2; } .home-grid li:nth-child(6) { --rows: 2; } .home-grid li:nth-child(7) { --cols: 2; } .home-grid a { display: block; height: 10rem; } .home-grid img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all .3s; } .home-grid figcaption { display: flex; align-items: center; justify-content: center; position: absolute; color: #fff; top: 0; right: 0; bottom: 0; left: 0; line-height: 1; text-align: center; background: rgba(0,0,0, .5); } @media screen and (min-width: 45em) { .home-grid { grid-template-columns: repeat(3, 1fr); } .home-grid li { grid-column-start: span var(--cols); grid-row-start: span var(--rows); } .home-grid a { padding-bottom: 52.65%; } } /* Zauber Scene */ .homedaynightcontainer { position: relative; margin-right: 30px; width: 363px; max-height: 525px; height: 100vh; overflow: hidden; border-radius: 3px; box-shadow: 0 30px 50px rgba(0,0,0,.3); z-index: 1; float: right; display: inline-block; } .layer1, .layer2 { position: absolute; right: 0; top: 0; width: 100%; height: 100%; transform: scale(1.01); } .layer2 { opacity: 0; transition: 4s; } .layer1 { opacity: 1; transition: 4s; } .moon { transform: translate(-50px, 230px); transition: 4s; } .rising-star { transform: translate(225px, -320px); transition: 4s; } .sun { transition: 5s; transform: translateX(100px); } .rightadj { transform: translateX(100px); } .cloud1, .cloud2, .cloud3, .cloud4 { transition: 4s; } .homedaynightcontainer.night-mode { .layer2 { opacity: 1; } .moon, .rising-star { transform: translate(25px, -60px); transition-delay: 1s; } .sun { transform: translate(164px, -290px); } .cloud1 { transform: translateX(-140px); } .cloud2 { transform: translateX(-100px); } .cloud3 { transform: translateX(-200px); } .cloud4 { transform: translateX(-180px); } } .homedaynightcontainer .dntoggle { width: 45px; height: 24px; position: absolute; right: 62px; top: 270px; z-index: 999999999999999; cursor: help; } [class*="mountain"] { transform: translateY(0); animation: goUp 2s both; } .mountain2 { animation-delay: .2s; } .mountain3 { animation-delay: .4s; } .mountain4 { animation-delay: .6s; } .mountain5 { animation-delay: .8s; } .mountain6 { animation-delay: 1s; } .mountain7 { animation-delay: 1.2s; } .monte1 { transform: translateX(80px); } .monte2 { transform: translateX(20px); } .monte3 { transform: translateX(29px) scaleX(1.04) translateY(0); } .monte4 { transform: translateX(0px); } .monte5 { transform: translateX(60px) translateY(25px); } .monte6 { transform: translateY(-120px) translateX(40px) scale(1.3); } .monte7 { transform: translateX(30px); } .treeadj { transform: scaleX(1.5); } .right { animation: goLeft 2s .2s both; } .layer2 .right { transform: translateX(200px); } .tree { animation: goUp 2s both; transform: scaleX(1.5); } .sun { animation: fadeIn 2s 2s both; } .sky { animation: sky 2s 2s both; } .m3 { transform: translateX(-75px) scaleX(1.5); } @keyframes goUp { from { transform: translateY(200px); } } @keyframes sky { from { transform: scale(2); } } @keyframes fadeIn { from { opacity: 0; } } @keyframes goLeft { from { transform: translateX(300px); } } @keyframes bg-anim { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }