/* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: "Open Sans", sans-serif; color: #040404; background-color: #ffffff; } a { color: #2e416a; text-decoration: none; } /* -------------------------------- General Style -------------------------------- */ .cd-intro { position: relative; height: 100vh; width: 100%; /* vertically align its content */ display: table; background: #2e416a; overflow: hidden; } .cd-intro img { max-width: 50%; height: auto; } .cd-intro-content { /* vertically align inside its parent */ display: table-cell; vertical-align: middle; text-align: center; padding: 0 5%; background: #00AFD7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cd-intro-content h1 { font-size: 2.4rem; color: #ffffff; } .cd-intro-content p { font-size: 1.4rem; font-weight: 700; line-height: 1.4; margin: 1em 0; color: #6d7a97; } .cd-intro-content .action-wrapper { display: inline-block; } .cd-intro-content .action-wrapper::after { clear: both; content: ""; display: table; } .cd-intro-content .action-wrapper>* { float: left; } @media only screen and (min-width: 768px) { .cd-intro-content h1 { font-size: 5.2rem; font-weight: 300; } .cd-intro-content p { font-size: 1.6rem; margin: 1.5em 0 1.9em; } } .cd-btn { display: inline-block; padding: 1.2em 1.4em; font-size: 1.3rem; color: #ffffff; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; background-color: #393D42; border-radius: .25em; margin-right: 1.5em; } .cd-btn:nth-of-type(2) { margin-right: 0; } .cd-btn.main-action { background-color: #393D42; } @media only screen and (min-width: 480px) { .cd-btn { padding: 1.2em 1.6em; } } @media only screen and (min-width: 768px) { .cd-btn { padding: 1.4em 1.8em; } } .cd-intro-content h1, .cd-intro-content h1 span, .cd-intro-content p, .cd-intro-content .cd-btn { opacity: 0; -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .no-cssanimations .cd-intro-content h1, .no-cssanimations .cd-intro-content h1 span, .no-cssanimations .cd-intro-content p, .no-cssanimations .cd-intro-content .cd-btn { opacity: 1; } /* -------------------------------- Bouncy -------------------------------- */ .bouncy.cd-intro-content h1 { -webkit-animation-name: cd-bounce-right; -moz-animation-name: cd-bounce-right; animation-name: cd-bounce-right; } .bouncy.cd-intro-content p { -webkit-animation-name: cd-bounce-left; -moz-animation-name: cd-bounce-left; animation-name: cd-bounce-left; } .bouncy.cd-intro-content h1, .bouncy.cd-intro-content p { -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; animation-duration: 0.6s; } .bouncy.cd-intro-content .cd-btn { -webkit-animation-name: cd-bounce-rotate; -moz-animation-name: cd-bounce-rotate; animation-name: cd-bounce-rotate; } .bouncy.cd-intro-content .cd-btn { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; } .bouncy.cd-intro-content .cd-btn.main-action { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } @-webkit-keyframes cd-bounce-right { 0% { opacity: .2; -webkit-transform: translateX(-200px); } 60% { opacity: .7; -webkit-transform: translateX(15px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes cd-bounce-right { 0% { opacity: .2; -moz-transform: translateX(-200px); } 60% { opacity: .7; -moz-transform: translateX(15px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @keyframes cd-bounce-right { 0% { opacity: .2; -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); transform: translateX(-200px); } 60% { opacity: .7; -webkit-transform: translateX(15px); -moz-transform: translateX(15px); -ms-transform: translateX(15px); -o-transform: translateX(15px); transform: translateX(15px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-bounce-left { 0% { opacity: .2; -webkit-transform: translateX(200px); } 60% { opacity: .7; -webkit-transform: translateX(-15px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes cd-bounce-left { 0% { opacity: .2; -moz-transform: translateX(200px); } 60% { opacity: .7; -moz-transform: translateX(-15px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @keyframes cd-bounce-left { 0% { opacity: .2; -webkit-transform: translateX(200px); -moz-transform: translateX(200px); -ms-transform: translateX(200px); -o-transform: translateX(200px); transform: translateX(200px); } 60% { opacity: .7; -webkit-transform: translateX(-15px); -moz-transform: translateX(-15px); -ms-transform: translateX(-15px); -o-transform: translateX(-15px); transform: translateX(-15px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-bounce-rotate { 0% { opacity: .2; -webkit-transform: perspective(800px) rotateX(-80deg); } 20% { opacity: 1; } 60% { -webkit-transform: perspective(800px) rotateX(20deg); } 100% { opacity: 1; -webkit-transform: perspective(800px) rotateX(0); } } @-moz-keyframes cd-bounce-rotate { 0% { opacity: .2; -moz-transform: perspective(800px) rotateX(-80deg); } 20% { opacity: 1; } 60% { -moz-transform: perspective(800px) rotateX(20deg); } 100% { opacity: 1; -moz-transform: perspective(800px) rotateX(0); } } @keyframes cd-bounce-rotate { 0% { opacity: .2; -webkit-transform: perspective(800px) rotateX(-80deg); -moz-transform: perspective(800px) rotateX(-80deg); -ms-transform: perspective(800px) rotateX(-80deg); -o-transform: perspective(800px) rotateX(-80deg); transform: perspective(800px) rotateX(-80deg); } 20% { opacity: 1; } 60% { -webkit-transform: perspective(800px) rotateX(20deg); -moz-transform: perspective(800px) rotateX(20deg); -ms-transform: perspective(800px) rotateX(20deg); -o-transform: perspective(800px) rotateX(20deg); transform: perspective(800px) rotateX(20deg); } 100% { opacity: 1; -webkit-transform: perspective(800px) rotateX(0); -moz-transform: perspective(800px) rotateX(0); -ms-transform: perspective(800px) rotateX(0); -o-transform: perspective(800px) rotateX(0); transform: perspective(800px) rotateX(0); } } /* -------------------------------- Cut -------------------------------- */ .cut.cd-intro-content h1 { position: relative; /* overwrite default style */ opacity: 1; font-weight: 700; color: transparent; } .cut.cd-intro-content h1 span { /* 2 span elements are used to create the cut effect */ display: block; position: absolute; width: 100%; height: 50%; left: 0; overflow: hidden; color: #ffffff; } .cut.cd-intro-content h1 span:first-of-type { top: 0; } .cut.cd-intro-content h1 span:last-of-type { bottom: 0; } .cut.cd-intro-content h1 span:first-of-type::before, .cut.cd-intro-content h1 span:last-of-type::after { /* span:first-of-type::before - top half of the text */ /* span:last-of-type::after - bottom half of the text */ content: attr(data-content); position: absolute; width: 100%; left: 0; color: #ffffff; } .cut.cd-intro-content h1 span:first-of-type::before { top: 0; } .cut.cd-intro-content h1 span:last-of-type::after { bottom: 0; } .cut.cd-intro-content .cd-btn { /* overwrite default style */ margin-right: 0; border-radius: 0; } .cut.cd-intro-content h1 span, .cut.cd-intro-content p, .cut.cd-intro-content .cd-btn { -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; animation-duration: 0.6s; } .cut.cd-intro-content h1 span, .cut.cd-intro-content p { -webkit-animation-name: cd-slide-left; -moz-animation-name: cd-slide-left; animation-name: cd-slide-left; } .cut.cd-intro-content h1 span:first-of-type { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } .cut.cd-intro-content p { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; } .cut.cd-intro-content .cd-btn { -webkit-animation-name: cd-slide-left-btn; -moz-animation-name: cd-slide-left-btn; animation-name: cd-slide-left-btn; -webkit-animation-delay: 0.55s; -moz-animation-delay: 0.55s; animation-delay: 0.55s; } @-webkit-keyframes cd-slide-left { 0% { opacity: 1; -webkit-transform: translateX(100vw); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes cd-slide-left { 0% { opacity: 1; -moz-transform: translateX(100vw); } 100% { opacity: 1; -moz-transform: translateX(0); } } @keyframes cd-slide-left { 0% { opacity: 1; -webkit-transform: translateX(100vw); -moz-transform: translateX(100vw); -ms-transform: translateX(100vw); -o-transform: translateX(100vw); transform: translateX(100vw); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-slide-left-btn { 0% { opacity: 1; -webkit-transform: translateX(150vw); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes cd-slide-left-btn { 0% { opacity: 1; -moz-transform: translateX(150vw); } 100% { opacity: 1; -moz-transform: translateX(0); } } @keyframes cd-slide-left-btn { 0% { opacity: 1; -webkit-transform: translateX(150vw); -moz-transform: translateX(150vw); -ms-transform: translateX(150vw); -o-transform: translateX(150vw); transform: translateX(150vw); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } /* -------------------------------- Reveal -------------------------------- */ .reveal.cd-intro-content h1 { position: relative; /* overwrite default style */ opacity: 1; font-weight: 700; /*

text is not visible - it is used only as a container for the ::after element */ color: transparent; overflow: hidden; } .reveal.cd-intro-content h1::after { /* this is the animated text */ content: attr(data-content); position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: #ffffff; opacity: 0; -webkit-animation-name: cd-reveal-up; -moz-animation-name: cd-reveal-up; animation-name: cd-reveal-up; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .no-cssanimations .reveal.cd-intro-content h1::after { opacity: 1; } @media only screen and (min-width: 768px) { .reveal.cd-intro-content h1 { -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); transform: translateY(5px); } } .reveal.cd-intro-content p { position: relative; margin: 0; padding: 1em; background-color: #202e4a; -webkit-animation-name: cd-reveal-down; -moz-animation-name: cd-reveal-down; animation-name: cd-reveal-down; } @media only screen and (min-width: 1170px) { .reveal.cd-intro-content p { padding: 1em 1.6em; } } .reveal.cd-intro-content h1::after, .reveal.cd-intro-content p { -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; } .reveal.cd-intro-content .action-wrapper { position: relative; overflow: hidden; } .reveal.cd-intro-content .action-wrapper::before { /* this is the loading bar */ content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 100%; background-color: #202e4a; -webkit-animation: cd-loading 0.4s 0.3s backwards; -moz-animation: cd-loading 0.4s 0.3s backwards; animation: cd-loading 0.4s 0.3s backwards; } .reveal.cd-intro-content .action-wrapper .cd-btn { display: block; opacity: 1; max-width: 200px; margin: 1em auto 0; } @media only screen and (min-width: 768px) { .reveal.cd-intro-content .action-wrapper .cd-btn { display: inline-block; margin: 0 0 0 1em; } } @-webkit-keyframes cd-reveal-up { 0% { opacity: 1; -webkit-transform: translateY(100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes cd-reveal-up { 0% { opacity: 1; -moz-transform: translateY(100%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes cd-reveal-up { 0% { opacity: 1; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes cd-reveal-down { 0% { opacity: 1; -webkit-transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes cd-reveal-down { 0% { opacity: 1; -moz-transform: translateY(-100%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes cd-reveal-down { 0% { opacity: 1; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes cd-loading { 0% { -webkit-transform: scaleX(0); } 100% { -webkit-transform: scaleX(1); } } @-moz-keyframes cd-loading { 0% { -moz-transform: scaleX(0); } 100% { -moz-transform: scaleX(1); } } @keyframes cd-loading { 0% { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); } 100% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } } /* -------------------------------- Mask -------------------------------- */ .mask.cd-intro-content h1 { position: relative; padding-bottom: 10px; /* overwrite default style */ opacity: 1; font-weight: 700; /*

text is not visible - it is used only as a container for the ::after element */ color: transparent; overflow: hidden; } .mask.cd-intro-content h1::after { /* this is the animated text */ content: attr(data-content); position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: #ffffff; -webkit-animation-name: cd-reveal-up; -moz-animation-name: cd-reveal-up; animation-name: cd-reveal-up; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; animation-fill-mode: backwards; } .mask.cd-intro-content h1 span { position: relative; display: inline-block; opacity: 1; } .mask.cd-intro-content h1 span::before { /* this is the loading bar */ content: ''; position: absolute; top: calc(100% + 8px); left: -1em; height: 2px; width: calc(100% + 2em); background-color: #ffffff; -webkit-animation: cd-loading-mask 1s 0.3s both; -moz-animation: cd-loading-mask 1s 0.3s both; animation: cd-loading-mask 1s 0.3s both; } @media only screen and (min-width: 768px) { .mask.cd-intro-content h1 { padding-bottom: 20px; } .mask.cd-intro-content h1 span::before { top: calc(100% + 18px); } } .mask.cd-intro-content p { position: relative; margin: 0; padding: 10px 0 0; -webkit-animation-name: cd-reveal-down; -moz-animation-name: cd-reveal-down; animation-name: cd-reveal-down; } @media only screen and (min-width: 768px) { .mask.cd-intro-content p { padding-top: 20px; } } .mask.cd-intro-content h1::after, .mask.cd-intro-content p { -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; } .mask.cd-intro-content .action-wrapper { overflow: hidden; } .mask.cd-intro-content .action-wrapper .cd-btn { opacity: 1; margin: 0 0 0 1.5em; } .mask.cd-intro-content .action-wrapper .cd-btn:first-of-type { margin-left: 0; } @-webkit-keyframes cd-loading-mask { 0%, 100% { -webkit-transform: scaleX(0); } 40%, 60% { -webkit-transform: scaleX(1); } } @-moz-keyframes cd-loading-mask { 0%, 100% { -moz-transform: scaleX(0); } 40%, 60% { -moz-transform: scaleX(1); } } @keyframes cd-loading-mask { 0%, 100% { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); } 40%, 60% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } } /* -------------------------------- Mask 2 -------------------------------- */ .mask-2.cd-intro-content * { /* overwrite default style */ opacity: 1; } .mask-2.cd-intro-content .content-wrapper { position: relative; width: 100%; max-width: 650px; margin: 0 auto; padding: 2em 0; overflow: hidden; } .mask-2.cd-intro-content .content-wrapper::before { /* vertical bar */ content: ''; position: absolute; z-index: 2; top: 0; left: 0; height: 100%; width: 2px; background-color: #ffffff; -webkit-animation: cd-pulse 1.3s 0.3s both; -moz-animation: cd-pulse 1.3s 0.3s both; animation: cd-pulse 1.3s 0.3s both; } .no-cssanimations .mask-2.cd-intro-content .content-wrapper::before { opacity: 0; } .mask-2.cd-intro-content .content-wrapper>div { /* wrap the entire content */ position: relative; z-index: 1; } .mask-2.cd-intro-content .content-wrapper, .mask-2.cd-intro-content .content-wrapper>div { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 1.1s; -moz-animation-delay: 1.1s; animation-delay: 1.1s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; animation-fill-mode: backwards; } .mask-2.cd-intro-content .content-wrapper { -webkit-animation-name: cd-mask-wrapper; -moz-animation-name: cd-mask-wrapper; animation-name: cd-mask-wrapper; } .mask-2.cd-intro-content .content-wrapper>div { -webkit-animation-name: cd-mask-content; -moz-animation-name: cd-mask-content; animation-name: cd-mask-content; } @-webkit-keyframes cd-mask-wrapper { 0% { -webkit-transform: translateX(50%); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes cd-mask-wrapper { 0% { -moz-transform: translateX(50%); } 100% { -moz-transform: translateX(0); } } @keyframes cd-mask-wrapper { 0% { -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-mask-content { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes cd-mask-content { 0% { -moz-transform: translateX(-100%); } 100% { -moz-transform: translateX(0); } } @keyframes cd-mask-content { 0% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-pulse { 0%, 30.8% { opacity: 0; } 15.4%, 46.2%, 61.5%, 70% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes cd-pulse { 0%, 30.8% { opacity: 0; } 15.4%, 46.2%, 61.5%, 70% { opacity: 1; } 100% { opacity: 0; } } @keyframes cd-pulse { 0%, 30.8% { opacity: 0; } 15.4%, 46.2%, 61.5%, 70% { opacity: 1; } 100% { opacity: 0; } } /* -------------------------------- scale -------------------------------- */ .scale.cd-intro-content * { /* overwrite default style */ opacity: 1; } .scale.cd-intro-content { /* overwrite default style */ background-color: transparent; /* Force hardware acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: cd-scale-in 0.6s 0.3s both; -moz-animation: cd-scale-in 0.6s 0.3s both; animation: cd-scale-in 0.6s 0.3s both; } @-webkit-keyframes cd-scale-in { 0% { opacity: 0; -webkit-transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes cd-scale-in { 0% { opacity: 0; -moz-transform: scale(3); } 100% { opacity: 1; -moz-transform: scale(1); } } @keyframes cd-scale-in { 0% { opacity: 0; -webkit-transform: scale(3); -moz-transform: scale(3); -ms-transform: scale(3); -o-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } /* -------------------------------- Parallax -------------------------------- */ .parallax.cd-intro-content * { /* overwrite default style */ opacity: 1; } .parallax.cd-intro-content h1 span, .parallax.cd-intro-content p span { position: relative; display: inline-block; padding: .5em 1em; /* span text is not visible */ color: transparent; } .parallax.cd-intro-content h1 span::before, .parallax.cd-intro-content h1 span::after, .parallax.cd-intro-content p span::before, .parallax.cd-intro-content p span::after { position: absolute; left: 0; width: 100%; } .parallax.cd-intro-content h1 span::before, .parallax.cd-intro-content p span::before { /* this is used to create the background colored layer */ content: ''; height: 100%; top: 0; background-color: #202e4a; } .parallax.cd-intro-content h1 span::after, .parallax.cd-intro-content p span::after { /* this is used to create the text */ content: attr(data-content); top: .5em; } .parallax.cd-intro-content h1 { font-size: 2.2rem; } .parallax.cd-intro-content h1 span::after { color: #ffffff; } @media only screen and (min-width: 768px) { .parallax.cd-intro-content h1 { font-size: 5.4rem; } } .parallax.cd-intro-content p span::after { color: #6d7a97; } .parallax .cd-btn { color: #202e4a; background-color: #ffffff; margin-top: .6em; /* overwrite default style */ border-radius: 0; margin-right: 0; } .parallax .cd-btn.main-action { background-color: #fb5e58; color: #ffffff; padding: 1.8em 2.2em; margin-top: 0; } @media only screen and (min-width: 768px) { .parallax .cd-btn.main-action { padding: 2em 3em; } } .parallax.cd-intro-content h1 span::after, .parallax.cd-intro-content h1 span::before, .parallax.cd-intro-content p span::after, .parallax.cd-intro-content p span::before, .parallax.cd-intro-content .cd-btn { -webkit-animation-name: cd-slide-up; -moz-animation-name: cd-slide-up; animation-name: cd-slide-up; -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; animation-fill-mode: backwards; } .parallax.cd-intro-content h1 span::after { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .parallax.cd-intro-content h1 span::before { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } .parallax.cd-intro-content p span::after { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; } .parallax.cd-intro-content p span::before { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } .parallax.cd-intro-content .cd-btn { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; } .parallax.cd-intro-content .cd-btn.main-action { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s; } @-webkit-keyframes cd-slide-up { 0% { opacity: 0; -webkit-transform: translateY(30vh); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes cd-slide-up { 0% { opacity: 0; -moz-transform: translateY(30vh); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes cd-slide-up { 0% { opacity: 0; -webkit-transform: translateY(30vh); -moz-transform: translateY(30vh); -ms-transform: translateY(30vh); -o-transform: translateY(30vh); transform: translateY(30vh); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } /* -------------------------------- Video -------------------------------- */ .cd-intro.video { display: block; } .video.cd-intro-content { display: block; height: 100%; position: relative; } .video.cd-intro-content * { opacity: 1; } .video.cd-intro-content .svg-wrapper { position: absolute; z-index: 2; top: 0; left: 0; height: 100%; width: 100%; } .video.cd-intro-content svg { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 0.8; } .video.cd-intro-content svg.svg-mask { /* this is the svg mask used on desktop version */ display: none; } .video.cd-intro-content p, .video.cd-intro-content .action-wrapper { position: absolute; z-index: 3; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .video.cd-intro-content p { bottom: calc(50% + 80px); margin: 0; color: #040404; min-width: 90%; } .video.cd-intro-content .action-wrapper { top: calc(50% + 120px); min-width: 295px; } .video.cd-intro-content .cd-btn { background-color: rgba(4, 4, 4, 0.4); } .video.cd-intro-content .cd-btn.main-action { background-color: #fb5e58; } @media only screen and (min-width: 768px) { .video.cd-intro-content svg.svg-mask-mobile { display: none; } .video.cd-intro-content svg.svg-mask { display: block; } .video.cd-intro-content p { bottom: calc(50% + 40px); } .video.cd-intro-content .action-wrapper { top: calc(50% + 80px); } } .cd-bg-video-wrapper { /* background cover video */ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: url(../assets/bg-img.jpg) no-repeat center center; background-size: cover; } .cd-bg-video-wrapper video { /* you won't see this element in the html, but it will be injected using js */ display: block; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-height: 100%; min-width: 100%; max-width: none; height: auto; width: auto; } .cd-bg-video-wrapper::after { /* never visible - this is used in jQuery to check the current MQ */ display: none; content: 'mobile'; } @media only screen and (min-width: 768px) { .cd-bg-video-wrapper::after { content: 'desktop'; }