*, :after, :before {margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0);} body, html, button {font-family: Dosis, sans-serif; color: #555; background-image: url(_images/cross-pattern-light.svg), linear-gradient(to top, rgb(0, 138, 236) 20%,rgb(228, 7, 150) 100%);} body {padding: 20px;} a {text-decoration: none;} a:link, a:visited {} a:hover {} h1 {font-size: 3.6rem; letter-spacing: 0.2rem;} h2 {font-size: 2.2rem; margin: 0 0 25px 0; letter-spacing: 0.05rem; font-weight: 400;} h3 {} p {font-size: 1.5rem; font-weight: 200; line-height: 2.2rem;} p strong {font-weight: 400;} p a {text-decoration: none;} p a:link, p a:visited {box-shadow: inset 0 -5px 0 0 rgba(255, 255, 255, 0.3);} p a:hover {} .textbox p {margin-bottom: 25px;} ul {} ul li {} input {} button {border-radius: 5px; border: none; background-color: rgba(0, 0, 0, 0); border: 1px solid #fff; height: 80px; padding: 0px 25px 0 78px; position: relative; transition: all 0.3s ease 0s; margin: 0 20px; font-size: 1.5em;} button:hover {background: #FFF; color: #444;} button span {font-size: 1rem; display: block;} /* General Styles */ .center {text-align: center;} .centerInside {margin: 0 auto; display: block;} .left {text-align: left;} .radius {border-radius: 22px;} .block {display: block;} .shadowWhite {box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);} .shadowDark {box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);} .shadowText {text-shadow: 0px 0px 300px rgba(0, 0, 0, 1);} .light {font-weight: 200;} .regular {font-weight: 400;} .heavy {} .whitefont {color: #FFF;} .greenfont {color: #4eeca5;} /* Layout */ nav {margin: 10px 0 80px;} nav a:link, nav a:visited {font-size: 1rem; color: rgba(255, 255, 255, 0.8); margin: 0% 5% 0% 0;} nav a:hover {color: rgba(255, 255, 255, 1);} header { padding: 3% 6% 6%; border-radius: 20px; border-bottom-right-radius: 100% 20%; border: 0px solid rgba(255, 255, 255, 5); box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); background-image: url(_images/cross-pattern-light.svg),linear-gradient(-205deg,#9156d1 0,#4901a9 100%); color: var(--color-white); } header h1 {} header h2 {margin: 40px 0 20px; font-size: 1.5rem;} header h3 {color: rgba(255, 255, 255, 0.7); font-size: 1.2rem;} header button {margin: 0 35px 0 0;} header button span {} footer {margin: 180px -6% -6% -6%; background: rgba(0, 0, 0, 1); padding: 2% 6%;} footer .copyright {font-size: 0.9rem;} footer .copyright a {display: inline-block; margin: 0 1%;} footer .copyright a:link, footer .copyright a:visited {color: rgba(255, 255, 255, 0.7);} footer .copyright a:hover {color: rgba(255, 255, 255, 1);} .layoutdiv {margin: 40px 0; border-radius: 20px; padding: 120px 6%;} .layoutdiv img {margin: 30px 0 50px;} .layoutdiv p {max-width: 70%;} .layoutdiv.boxshadow {box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);} .first {} .second {background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 100%); border-radius: 20px; border-bottom-right-radius: 100% 20%; position: relative; z-index: 1;} .second:before { content: "content from before, should be behind #target"; color: rgba(255, 255, 255, 0.5); position: absolute; top: -120px; right: 6%; width: 330px; height: 180px; z-index: 2; background-image: url(_images/stars.svg); background-repeat: none;} .second:after {content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: solid 3px rgba(255, 255, 255, 0.85); margin: -15px; z-index: -1; transition: transform 0.6s linear; transform: scale(0.97, 0.93); border-radius: 20px; border-bottom-right-radius: 100% 20%;} .second:hover::after {transform: scale(0.958,0.905); border: solid 5px rgba(255, 255, 255, 0.85);} .third {min-height: 500px;} .forth {background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 100%); min-height: 500px; border-radius: 20px; border-top-right-radius: 100% 20%; position: relative; z-index: 1; color: #FFF;} .forth:after {content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: solid 3px rgba(255, 255, 255, 0.85); margin: -15px; z-index: -1; transition: transform 0.6s linear; transform: scale(0.97, 0.92); border-radius: 20px; border-radius: 20px; border-top-right-radius: 100% 20%;} .forth:hover::after {transform: scale(0.958,0.905); border: solid 5px rgba(255, 255, 255, 0.85);} .fifth {} /* Images */ .appIcon {margin-bottom: 25px;} .phoneOne {float: right; position: absolute; top: 14%; right: 6%;} /* Brands */ .layoutdiv.brands {padding: 120px 6% 60px;} .layoutdiv.brands h2 {margin-bottom: 80px;} .brandslider > div {margin: 30px 0 0 0; vertical-align: middle;} .brandslider div img {max-width: 80%; margin: 0 auto;} /* Social */ .layoutdiv.social {padding: 120px 6% 60px; margin: 0 auto; height: 50px;} .layoutdiv.social h2 {} .layoutdiv.social a:link, .layoutdiv.social a:visited {width: 50px; height: 50px; display: inline-block; background-size: 100%; opacity: 0.6; margin: 0 2%;} .layoutdiv.social a:hover {opacity: 1;} .layoutdiv.social .facebook {background: transparent url(/_images/_design/_icons/facebook.svg) center center no-repeat;} .layoutdiv.social .pinterest {background: transparent url(/_images/_design/_icons/pinterest.svg) center center no-repeat;} .layoutdiv.social .instagram {background: transparent url(/_images/_design/_icons/instagram.svg) center center no-repeat;} .layoutdiv.social .ios {background: transparent url(/_images/_design/_icons/ios.svg) center center no-repeat;} .layoutdiv.social .android {background: transparent url(/_images/_design/_icons/android.svg) center center no-repeat;} /* Media Queries */ @media only screen and (max-device-width: 812px) { body {padding: 0px;} h1 {line-height: 3.5rem; letter-spacing: 0rem;} h2 {font-weight: 400; letter-spacing: 0rem;} header {border: none; border-top-left-radius: 0; border-top-right-radius: 0;} .phoneOne {float: none; display: block;} .layoutdiv h2 {font-size: 2rem; margin: 0 0 25px 0; letter-spacing: 0.05rem; font-weight: 200;} } /* Video Wrapper */ .videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ border-radius: 25px; height: 0; overflow: hidden; position:relative;} .videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /* SVG Backgrounds */ header { } .apple {cursor: pointer; min-width: 210px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGZpbGw9IndoaXRlIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1Ni42OTMgNTYuNjkzIiBoZWlnaHQ9IjU2LjY5M3B4IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTYuNjkzIDU2LjY5MyIgd2lkdGg9IjU2LjY5M3B4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cGF0aCBkPSJNNDEuNzc3LDMwLjUxN2MtMC4wNjItNi4yMzIsNS4wODItOS4yMjEsNS4zMTItOS4zNzJjLTIuODkxLTQuMjI3LTcuMzk1LTQuODA3LTguOTk4LTQuODczICAgYy0zLjgzLTAuMzg5LTcuNDc3LDIuMjU2LTkuNDIsMi4yNTZjLTEuOTM5LDAtNC45NDEtMi4xOTktOC4xMTctMi4xNDNjLTQuMTc4LDAuMDYyLTguMDI5LDIuNDMtMTAuMTc5LDYuMTcgICBjLTQuMzM5LDcuNTI3LTEuMTEsMTguNjgyLDMuMTE4LDI0Ljc5MWMyLjA2NywyLjk4Niw0LjUzMiw2LjM0Niw3Ljc2Niw2LjIyM2MzLjExNy0wLjEyMyw0LjI5My0yLjAxNiw4LjA2MS0yLjAxNiAgIHM0LjgyNiwyLjAxNiw4LjEyMywxLjk1M2MzLjM1Mi0wLjA2MSw1LjQ3Ny0zLjA0Myw3LjUyNy02LjA0MWMyLjM3My0zLjQ2OSwzLjM1LTYuODI4LDMuNDA4LTYuOTk4ICAgQzQ4LjMwNSw0MC40MzMsNDEuODQ0LDM3Ljk1OCw0MS43NzcsMzAuNTE3eiIvPjxwYXRoIGQ9Ik0zNS41ODIsMTIuMjI5YzEuNzE1LTIuMDgyLDIuODc3LTQuOTc1LDIuNTYxLTcuODU1Yy0yLjQ3NSwwLjEtNS40NzEsMS42NDUtNy4yNDgsMy43MjUgICBjLTEuNTkyLDEuODQ2LTIuOTg0LDQuNzg1LTIuNjExLDcuNjEzQzMxLjA0NSwxNS45MjYsMzMuODYxLDE0LjMwNywzNS41ODIsMTIuMjI5eiIvPjwvZz48L3N2Zz4=) no-repeat 7px 8px;} .apple:hover {background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2LjY5MyA1Ni42OTMiIGhlaWdodD0iNTYuNjkzcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1Ni42OTMgNTYuNjkzIiB3aWR0aD0iNTYuNjkzcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxwYXRoIGQ9Ik00MS43NzcsMzAuNTE3Yy0wLjA2Mi02LjIzMiw1LjA4Mi05LjIyMSw1LjMxMi05LjM3MmMtMi44OTEtNC4yMjctNy4zOTUtNC44MDctOC45OTgtNC44NzMgICBjLTMuODMtMC4zODktNy40NzcsMi4yNTYtOS40MiwyLjI1NmMtMS45MzksMC00Ljk0MS0yLjE5OS04LjExNy0yLjE0M2MtNC4xNzgsMC4wNjItOC4wMjksMi40My0xMC4xNzksNi4xNyAgIGMtNC4zMzksNy41MjctMS4xMSwxOC42ODIsMy4xMTgsMjQuNzkxYzIuMDY3LDIuOTg2LDQuNTMyLDYuMzQ2LDcuNzY2LDYuMjIzYzMuMTE3LTAuMTIzLDQuMjkzLTIuMDE2LDguMDYxLTIuMDE2ICAgczQuODI2LDIuMDE2LDguMTIzLDEuOTUzYzMuMzUyLTAuMDYxLDUuNDc3LTMuMDQzLDcuNTI3LTYuMDQxYzIuMzczLTMuNDY5LDMuMzUtNi44MjgsMy40MDgtNi45OTggICBDNDguMzA1LDQwLjQzMyw0MS44NDQsMzcuOTU4LDQxLjc3NywzMC41MTd6Ii8+PHBhdGggZD0iTTM1LjU4MiwxMi4yMjljMS43MTUtMi4wODIsMi44NzctNC45NzUsMi41NjEtNy44NTVjLTIuNDc1LDAuMS01LjQ3MSwxLjY0NS03LjI0OCwzLjcyNSAgIGMtMS41OTIsMS44NDYtMi45ODQsNC43ODUtMi42MTEsNy42MTNDMzEuMDQ1LDE1LjkyNiwzMy44NjEsMTQuMzA3LDM1LjU4MiwxMi4yMjl6Ii8+PC9nPjwvc3ZnPg==) no-repeat 7px 8px;} .google {cursor: pointer; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0iI2ZmZmZmZiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzIzMUYyMDt9Cgkuc3Qxe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzIzMUYyMDt9Cgkuc3Qye2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO30KPC9zdHlsZT48ZyBpZD0iTGF5ZXJfMyIvPjxnIGlkPSJMYXllcl8xIj48ZyBpZD0iZ29vZ2xlX3BsYXkiPjxwb2x5Z29uIHBvaW50cz0iNTkuNyw0MC42IDUzLjIsNDguNiAzNS4yLDI2LjMgICAiLz48cGF0aCBkPSJNMjYuOCw3OC4yYy0yLjEsMC0zLjQtMS45LTMuNC01di00NmMwLTEuNSwwLjMtNSwzLjMtNWMwLjksMCwyLDAuNCwzLjIsMWwwLjIsMC4xYzAsMC4xLDAuMSwwLjIsMC4xLDAuM2wyMS42LDI2LjYgICAgTDMwLjMsNzYuOGMtMC4xLDAuMS0wLjEsMC4yLTAuMiwwLjNMMzAsNzcuMkMyOC44LDc3LjksMjcuNyw3OC4yLDI2LjgsNzguMnoiLz48cG9seWdvbiBwb2ludHM9IjUzLjIsNTEuOSA1OS43LDU5LjkgMzUuMSw3NC4yICAgIi8+PHBhdGggZD0iTTcwLjcsNTQuMmwtNy44LDQuNWwtNy04LjZsNy04LjZsNy45LDQuNmMxLjksMS4xLDIuOSwyLjUsMi45LDMuOUM3My43LDUxLjYsNzIuNiw1My4xLDcwLjcsNTQuMnoiLz48L2c+PC9nPjwvc3ZnPg==) no-repeat left center;} .google:hover {background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzIzMUYyMDt9Cgkuc3Qxe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzIzMUYyMDt9Cgkuc3Qye2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO30KPC9zdHlsZT48ZyBpZD0iTGF5ZXJfMyIvPjxnIGlkPSJMYXllcl8xIj48ZyBpZD0iZ29vZ2xlX3BsYXkiPjxwb2x5Z29uIHBvaW50cz0iNTkuNyw0MC42IDUzLjIsNDguNiAzNS4yLDI2LjMgICAiLz48cGF0aCBkPSJNMjYuOCw3OC4yYy0yLjEsMC0zLjQtMS45LTMuNC01di00NmMwLTEuNSwwLjMtNSwzLjMtNWMwLjksMCwyLDAuNCwzLjIsMWwwLjIsMC4xYzAsMC4xLDAuMSwwLjIsMC4xLDAuM2wyMS42LDI2LjYgICAgTDMwLjMsNzYuOGMtMC4xLDAuMS0wLjEsMC4yLTAuMiwwLjNMMzAsNzcuMkMyOC44LDc3LjksMjcuNyw3OC4yLDI2LjgsNzguMnoiLz48cG9seWdvbiBwb2ludHM9IjUzLjIsNTEuOSA1OS43LDU5LjkgMzUuMSw3NC4yICAgIi8+PHBhdGggZD0iTTcwLjcsNTQuMmwtNy44LDQuNWwtNy04LjZsNy04LjZsNy45LDQuNmMxLjksMS4xLDIuOSwyLjUsMi45LDMuOUM3My43LDUxLjYsNzIuNiw1My4xLDcwLjcsNTQuMnoiLz48L2c+PC9nPjwvc3ZnPg==) no-repeat left center;} .download {margin: 0 0; cursor: pointer; background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNnB4IiBoZWlnaHQ9IjI3cHgiIHZpZXdCb3g9IjAgMCAyNiAyNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5BcnRib2FyZCAyIENvcHkgNTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPiAgICAgICAgPGcgaWQ9IkFydGJvYXJkLTItQ29weS00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzA4LjAwMDAwMCwgLTUxLjAwMDAwMCkiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlBhdGgtNS1Db3B5IiBwb2ludHM9IjMxMSA2MyAzMjEgNzQgMzMxIDYzIj48L3BvbHlsaW5lPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMjEsNTMgTDMyMSw3NC41MjQ0MTQxIiBpZD0iUGF0aC02LUNvcHkiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzEwLDc1LjUgTDMzMiw3NS41IiBpZD0iUGF0aC03LUNvcHkiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==) no-repeat 14px 15px; background-size: 13%;} .download:hover {background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNnB4IiBoZWlnaHQ9IjI3cHgiIHZpZXdCb3g9IjAgMCAyNiAyNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5BcnRib2FyZCAyIENvcHkgNDwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPiAgICAgICAgPGcgaWQ9IkFydGJvYXJkLTItQ29weS00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjc1LjAwMDAwMCwgLTUxLjAwMDAwMCkiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlBhdGgtNSIgcG9pbnRzPSIyNzggNjMgMjg4IDc0IDI5OCA2MyI+PC9wb2x5bGluZT4gICAgICAgICAgICA8cGF0aCBkPSJNMjg4LDUzIEwyODgsNzQuNTI0NDE0MSIgaWQ9IlBhdGgtNiI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNzcsNzUuNSBMMjk5LDc1LjUiIGlkPSJQYXRoLTciPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==) no-repeat 14px 15px; background-size: 13%;} /* Aktionen */ .flex {display: flex; justify-content: space-between; flex-wrap: wrap;} .aktion {flex: 1 0 45%;}