html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after { content: ""; content: none; } q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } div { box-sizing: border-box; } /* ---------------------------------------------------------------------------------------------------- Super Form Reset A couple of things to watch out for: - IE8: If a text input doesn't have padding on all sides or none the text won't be centered. - The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders. - You NEED to set the font-size and family on all form elements - Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs - You can style the upload button in webkit using ::-webkit-file-upload-button - ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out. - IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block. - By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs ----------------------------------------------------------------------------------------------------*/ input, label, select, button, textarea { margin: 0; border: 0; padding: 0; display: inline-block; vertical-align: middle; white-space: normal; background: none; line-height: 1; /* Browsers have different default form fonts */ font-size: 13px; font-family: Arial; } /* Remove the stupid outer glow in Webkit */ input:focus { outline: 0; } /* Box Sizing Reset -----------------------------------------------*/ /* All of our custom controls should be what we expect them to be */ input, textarea { box-sizing: content-box; } /* These elements are usually rendered a certain way by the browser */ button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select { box-sizing: border-box; } /* Text Inputs -----------------------------------------------*/ /* Button Controls -----------------------------------------------*/ input[type=checkbox], input[type=radio] { width: 13px; height: 13px; } /* File Uploads -----------------------------------------------*/ /* Search Input -----------------------------------------------*/ /* Make webkit render the search input like a normal text field */ input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; } /* Turn off the recent search for webkit. It adds about 15px padding on the left */ ::-webkit-search-decoration { display: none; } /* Buttons -----------------------------------------------*/ button, input[type="reset"], input[type="button"], input[type="submit"] { /* Fix IE7 display bug */ overflow: visible; width: auto; } /* IE8 and FF freak out if this rule is within another selector */ ::-webkit-file-upload-button { padding: 0; border: 0; background: none; } /* Textarea -----------------------------------------------*/ textarea { /* Move the label to the top */ vertical-align: top; /* Turn off scroll bars in IE unless needed */ overflow: auto; } /* Selects -----------------------------------------------*/ select[multiple] { /* Move the label to the top */ vertical-align: top; } @font-face { font-family: PostGrotesk-Medium; src: url(../../fonts/PostGrotesk-Medium.eot); src: url(../../fonts/PostGrotesk-Medium.eot?#iefix) format("embedded-opentype"), url(../../fonts/PostGrotesk-Medium.woff) format("woff"), url(../../fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium) format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: PostGrotesk-Book; src: url(../../fonts/PostGrotesk-Book.eot); src: url(../../fonts/PostGrotesk-Book.eot?#iefix) format("embedded-opentype"), url(../../fonts/PostGrotesk-Book.woff) format("woff"), url(../../fonts/PostGrotesk-Book.svg#PostGrotesk-Book) format("svg"); font-weight: 400; font-style: normal; } body { background-color: #eef2f5; font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 15px; line-height: 25px; color: #49555f; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a { color: #49555f; text-decoration: none; transition: opacity .2s ease; } .button { display: block; height: 44px; line-height: 43px; padding: 0 20px; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; text-transform: uppercase; text-align: center; letter-spacing: 1px; color: white; background-color: #68c0f8; box-shadow: 0 8px 14px 0 #DEE2E5; border-radius: 8px; transform: translate3d(0, 0, 0) scale(1); transition: transform .1s ease, box-shadow .2s ease, background-color .2s ease; -webkit-appearance: none; cursor: pointer; } .button:active { transform: translate3d(0, 0, 0) scale(0.99); } .button:hover { background-color: #84cfff; } .button.button--disabled { color: rgba(255, 255, 255, 0.5); cursor: default; } .header-wrap { margin: 30px 0 0 0; width: 1080px; height: 130px; background-color: #4957b8; background-image: url(../img/new-site/dot.svg); box-shadow: 0px 10px 14px 0px rgba(79, 90, 166, 0.35); border-top-left-radius: 10px; border-top-right-radius: 10px; transform: translate3d(0, 0, 0); transition: transform .6s ease, opacity .3s ease; } .header { position: absolute; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; width: 100%; z-index: 900; top: 40px; left: 0; } .header__inner { width: 1012px; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } .nav { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; } a.logo { display: -ms-flexbox; display: flex; width: 260px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: start; align-items: flex-start; } .logo__icon { height: 58px; width: 58px; background-image: url(../img/new-site/logo3.png); background-size: 58px; background-position: left; } .logo_text { margin: 2px 0 0 8px; } .logo__title { display: block; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 22px; line-height: 25px; color: white; } .logo__description { display: block; font-size: 15px; line-height: 25px; color: white; opacity: .5; } .nav a { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 10px 15px 15px; } .header .nav a { color: white; } .header .nav a.nav__item--blog::before { content: ""; width: 16px; height: 16px; background-image: url(../img/new-site/icon_external.png); background-size: 16px; opacity: 0; transform: translate3d(5px, 0, 0) rotate(5deg); margin: 0 10px 0 0; transition: transform .2s ease, opacity .2s ease; } .header .nav a.nav__item--blog:hover::before { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .4; } .nav a:hover { opacity: .9; } .qr-popup { left: 349px; top: 48px; position: absolute; background: #FFFFFF; box-shadow: 0 3px 7px 0 rgba(175, 192, 202, 0.41); border-radius: 10px; padding: 8px; opacity: 0; transform: translate3d(0, 15px, 0) scale(1); visibility: hidden; transition: visibility .5s linear 0s, opacity .2s ease, transform .2s ease; } .qr-popup.qr-popup--shown { transition-delay: 0s; visibility: visible; opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .qr-popup h4 { font-size: 22px; color: #49555F; line-height: 35px; margin: 8px 8px 0 8px; font-weight: bold; } .qr-popup-wrap { display: -ms-flexbox; display: flex; padding: 8px; } .qr-code { width: 256px; height: 256px; border: 1px solid #E5EAEE; border-radius: 8px; background-size: 256px; background-repeat: no-repeat; margin: 8px; } .qr-code.qr-code--one { background-image: url(../img/new-site/u32.jpg); } .qr-code.qr-code--two { background-image: url(../img/new-site/u38.jpg); } .shares { width: 260px; height: 50px; } .social-links { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; } .shares .social-links { -ms-flex-pack: end; justify-content: flex-end; } .social-links li.social-link { margin: 0 5px; } li.social-link a { display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #3F4A97; background-repeat: no-repeat; background-size: 20px; background-position: center; transition: transform .2s ease; cursor: pointer; box-shadow: 0 10px 10px 0 rgba(62, 76, 167, 0.25); } .social-link.social-link--fb a { background-color: #4675DF; background-image: url(../img/new-site/icon_fb3.svg); } .social-link.social-link--tw a { background-color: #4DB9FE; background-image: url(../img/new-site/icon_tw.svg); } .social-link.social-link--sl a { background-color: #E3306D; background-image: url(../img/new-site/icon_sl.svg); } .social-link.social-link--ri a { background-color: #7dc8a2; background-image: url(../img/new-site/icon_ri.svg); } .social-link.social-link--gh a { background-color: #535353; background-image: url(../img/new-site/icon_gh.svg); } .social-link.social-link--rd a { background-color: #FF4501; background-image: url(../img/new-site/icon_rd.svg); } .social-link:hover a { -ms-transform: scale(1.06); transform: scale(1.06); } @media (max-width: 1140px) { .header { top: 0; } .header__inner { width: 100%; margin: 40px; -ms-flex-align: center; align-items: center; } .header-wrap { margin: 0 0 0 0; width: 100%; } } @media (max-width: 960px) { .qr-popup.qr-popup--shown { display: none; } .nav { display: none; } a.logo, .shares { width: auto; } } @media (max-width: 840px) { .header__inner { margin: 30px; } } @media (max-width: 767px) { .header__inner { margin: 20px 20px 20px 17px; -ms-flex-align: start; align-items: flex-start; } .header-wrap { height: 92px; border-radius: 0; } .logo__icon { height: 48px; width: 48px; background-size: 48px; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-positive: 0; flex-grow: 0; } .logo__title { font-size: 18px; line-height: 24px; } .logo__description { font-size: 14px; line-height: 15px; } .logo__description span { display: none; } .logo_text { margin: 0px 0 0 4px; } .shares .social-links li.social-link { margin: 0 0 0 7px; } .header .social-link.social-link--fb { display: none; } } .the-iphone { position: relative; width: 292px; height: 610px; background: #FFFFFF; box-shadow: 11px 15px 39px 0 rgba(31, 35, 61, 0.2), 0 2px 4px 0 rgba(88, 100, 177, 0.01), inset 0 0 4px 4px #dfe1ec; border-radius: 40px; z-index: 600; } .the-iphone-dot { width: 8px; height: 8px; position: absolute; left: 50%; top: 22px; transform: translate3d(-50%, 0, 0); border-radius: 50%; opacity: 0.5; background: #DAE1EA; box-shadow: inset 0 1px 2px 0 #B3B8D0; } .the-iphone-line { width: 44px; height: 6px; position: absolute; left: 50%; top: 36px; transform: translate3d(-50%, 0, 0); border-radius: 5px; opacity: 0.5; background: #DAE1EA; box-shadow: inset 0 1px 2px 0 #B3B8D0; } .the-iphone-screen { width: 270px; height: 479px; border: 1px solid #E7E9F0; background-color: #F3F4F8; position: absolute; left: 50%; top: 60px; border-radius: 4px; transform: translate3d(-50%, 0, 0); background-image: url(../img/new-site/IOS_Chat4.png); background-size: 270px; } .the-iphone-button { width: 40px; height: 40px; position: absolute; left: 50%; bottom: 18px; transform: translate3d(-50%, 0, 0); border-radius: 50%; opacity: 0.5; background: #DAE1EA; box-shadow: inset 0 1px 2px 0 #B3B8D0; } .the-android { position: relative; width: 290px; height: 574px; background: #FFFFFF; box-shadow: 11px 15px 39px 0 rgba(31, 35, 61, 0.2), 0 2px 4px 0 rgba(88, 100, 177, 0.01), inset 0 0 4px 4px #dfe1ec; border-radius: 30px; } .the-android-dot { width: 7px; height: 7px; position: absolute; left: 76px; top: 25px; border-radius: 50%; opacity: 0.5; background: #DAE1EA; box-shadow: inset 0 1px 2px 0 #B3B8D0; } .the-android-line { width: 94px; height: 6px; position: absolute; left: 50%; top: 25px; transform: translate3d(-50%, 0, 0); border-radius: 5px; opacity: 0.5; background: #DAE1EA; box-shadow: inset 0 1px 2px 0 #B3B8D0; } .the-android-screen { width: 262px; height: 466px; border: 1px solid #E7E9F0; background-color: #F3F4F8; position: absolute; left: 50%; top: 50px; border-radius: 4px; transform: translate3d(-50%, 0, 0); background-image: url(../img/new-site/Android_Chats.png); background-size: 262px; } .the-android-button { width: 94px; height: 6px; position: absolute; left: 50%; bottom: 26px; transform: translate3d(-50%, 0, 0); border-radius: 5px; opacity: 0.5; background: #DAE1EA; box-shadow: inset 0 1px 2px 0 #B3B8D0; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; display: none; opacity: 0; transform: translate3d(0, 0, 0) scale(1); visibility: hidden; transition: visibility .5s linear 0s, opacity .2s ease; } .overlay.overlay--shown { transition-delay: 0s; visibility: visible; opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .popup { max-width: 600px; display: none; } .popup__inner { margin: 0 20px; background-color: white; border-radius: 8px; padding: 60px; position: relative; opacity: 0; transform: translate3d(0, 15px, 0) scale(0.96); visibility: hidden; transition-delay: .2s; transition: visibility 0.5s linear 0s, opacity 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.135, 1.425); } .popup--shown .popup__inner { transition-delay: 0s; visibility: visible; opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .popup__title { font-family: PostGrotesk-Medium; font-size: 22px; line-height: 30px; margin: 0 0 20px 0; } .popup__text { font-size: 18px; line-height: 26px; margin: 0 0 25px 0; color: #70808D; } .popup__close { position: absolute; right: 20px; top: 20px; width: 24px; height: 24px; background-image: url(../img/new-site/icon_close.svg); background-size: 24px; background-repeat: no-repeat; cursor: pointer; transition: opacity .2s ease; } .popup__close:hover { opacity: .8; } .popup__buttons a { margin: 0 10px 0 0; } @media (max-width: 767px) { .popup__inner { margin: 0 20px; padding: 40px; } .popup__title { font-size: 18px; line-height: 26px; margin: 0 0 10px 0; } .popup__text { font-size: 14px; line-height: 22px; margin: 0 0 15px 0; } } .page { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; } .page__inner { width: 1120px; position: relative; } .page__content-wrap { position: relative; width: 1180px; margin: 0 0 40px 0; background: white; box-shadow: 0px -2px 18px 0px rgba(72, 89, 102, 0.25); border-radius: 10px; } .page__content { max-width: 800px; margin: 0 auto; padding: 50px 40px 100px; background: white; border-radius: 8px; } .page__content.page__content--centered { max-width: 100%; padding: 50px 160px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-direction: column; flex-direction: column; text-align: center; } .page__title { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 24px; line-height: 30px; margin: 0 0 20px 0; } .page__subheader { font-size: 18px; line-height: 26px; margin: 0 0 25px 0; color: #92999f; } .page__content p { margin: 0 0 10px 0; } .page__content p a { color: #4957b8; } .page__content p strong { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .page__content.page__content--centered .page__title { max-width: 500px; } .page__content.page__content--centered .page__text { max-width: 500px; } .page h3 { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 22px; margin: 32px 0 8px 0; } .page h5 { font-size: 15px; opacity: 1; padding: 16px; } .page__social { width: 100%; padding: 48px 0; } .page__social-buttons { width: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .page__social-button-wrap { -ms-flex-preferred-size: 33.3%; flex-basis: 33.3%; -ms-flex-negative: 1; flex-shrink: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 12px; position: relative; border-radius: 8px; border: 1px solid #e9eaf4; text-align: center; box-shadow: 0 2px 5px 0 rgba(71, 91, 106, 0.12); transition: box-shadow .2s ease; } .page__social-button-wrap:first-child { margin-left: 0; } .page__social-button-wrap:last-child { margin-right: 0; } .page__social-button-wrap:hover { box-shadow: 0 4px 10px 0 rgba(71, 91, 106, 0.16); } .page__social-button { padding: 24px; height: 92px; overflow: hidden; } .big-button-wrap { margin: 48px 0 0 0; } .button.button--big { height: 56px; line-height: 56px; font-size: 15px; letter-spacing: 1.2px; } .button.button--secondary.button--page { display: inline-block; padding: 0 40px; background-color: #4A5C69; color: white; } .button.button--secondary.button--page.button--page--slack { background-color: #E3306D; } .button.button--secondary.button--page.button--page--wiki { background-color: #4A55BF; } .button.button--secondary.button--page:hover { opacity: .8; background-color: #4A5C69; } .button.button--secondary.button--page.button--page--slack:hover { opacity: .8; background-color: #E3306D; } .button.button--secondary.button--page.button--page--wiki:hover { opacity: .8; background-color: #4A55BF; } .page__social-button-label { display: block; text-align: center; opacity: .6; padding: 16px; } .page__footer { position: absolute; bottom: 0; left: 0; width: 100%; display: -ms-flexbox; display: flex; text-align: center; font-size: 13px; line-height: 15px; letter-spacing: 1px; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; text-transform: uppercase; border-top: 1px solid #e9eaf4; } .page__footer .page__footer-link { display: block; text-align: center; width: 100%; padding: 20px 0; transition: opacity .2s ease; } .page__footer .page__footer-link:hover { opacity: .6; } @media (max-width: 1220px) { .page__content-wrap { width: 1080px; top: -10px; margin: 0 0 30px 0; } } @media (max-width: 1140px) { .page__social { padding: 16px 0; } .page__social-buttons { -ms-flex-wrap: wrap; flex-wrap: wrap; } .page__social-button-wrap { width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .page__social-button-wrap { margin-left: 0; margin-right: 0; } .page { margin: 20px 20px 0 20px; } .page__content-wrap { width: 100%; } .page__content { width: auto; } } @media (max-width: 840px) { .page__content { margin: 0 30px; padding: 50px 20px 100px; } .page__content-wrap { top: -20px; margin: 0 0 20px 0; } .page__content.page__content--centered { padding: 100px 20px; } } @media (max-width: 767px) { .page { margin: 0; } .page__content.page__content--centered, .page__content { padding: 40px 0 80px 0; } .page__content-wrap { top: -10px; margin: 0; } .page__title { font-size: 18px; line-height: 26px; margin: 0 0 10px 0; } .page__subheader { font-size: 16px; line-height: 20px; margin: 0 0 15px 0; } } .cookie-popup { margin: 0 auto; position: relative; } .cookie-popup__inner { display: block; right: 20px; top: 20px; position: fixed; border-radius: 8px; background-color: white; box-shadow: 0px 4px 18px 0px rgba(189, 208, 223, 0.26); border-radius: 8px; padding: 30px; z-index: 999; opacity: 0; transform: translate3d(20px, 0, 0) scale(0.5); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.135, 1.425), opacity 0.2s ease; transition-delay: 1.5s; } .cookie-popup-text { display: block; width: 220px; font-size: 16px; padding: 0 0 10px 0; } .cookie-popup-button { display: inline-block; margin: 10px 0 0 0; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; text-transform: uppercase; line-height: 15px; padding: 14px 25px 14px; font-size: 13px; letter-spacing: 1px; color: #6370CA; background-color: rgba(99, 112, 202, 0.1); border-radius: 10px; } .shown .cookie-popup__inner { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } @media (max-width: 767px) { .cookie-popup__inner { display: none; } } .container-wrap { z-index: 2; margin-bottom: 480px; background-color: #eef2f5; box-shadow: 0 0 30px 0 rgba(54, 69, 79, 0.86); } .container { max-width: 1280px; margin: 0 auto; overflow: hidden; position: relative; } .slides { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .slide { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; } .slide__inner { width: 1080px; position: relative; } .slide__header { margin: 0 auto; width: 400px; text-align: center; } .slide__title { font-family: PostGrotesk-Medium; font-size: 24px; line-height: 30px; margin: 0 0 15px 0; } .slide__description { color: #70808D; font-size: 16px; line-height: 25px; } .slide__footer { text-align: center; width: 250px; margin: 0 auto; color: #70808D; opacity: .6; font-size: 15px; line-height: 25px; } .slide__header--inversed .slide__title { color: white; } .slide__header--inversed .slide__description { color: white; opacity: .6; } @media (max-width: 1140px) { .slide__inner { width: 100%; margin: 0; } } @media (max-width: 767px) { .container-wrap { margin-bottom: 0; } .slide__header { padding: 0 20px; margin: 0 auto; width: auto; max-width: 300px; } .slide__title { font-size: 19px; line-height: 26px; margin: 0 0 6px 0; } .slide__description { font-size: 15px; line-height: 21px; } .slide__footer { font-size: 14px; line-height: 20px; } } .slide.slide--one .slide__inner { margin: 30px 0 0 0; height: 780px; background-color: #4957B8; background-image: url(../img/new-site/dot.svg); box-shadow: 0px 10px 14px 0px rgba(79, 90, 166, 0.35); border-radius: 10px; transform: translate3d(0, 0, 0); transition: transform .6s ease, opacity .3s ease; } .tagline { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; position: absolute; z-index: 200; text-align: center; width: 440px; left: 90px; top: 260px; } .tagline .tagline__title { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: white; font-size: 25px; line-height: 35px; margin: 0 0 5px 0; opacity: 0; transform: translate3d(0, 20px, 0); transition: transform .6s ease, opacity .6s ease; transition-delay: .1s; } .shown .tagline__title { opacity: 1; transform: translate3d(0, 0, 0); } .tagline .tagline__body { color: white; opacity: .6; font-size: 18px; line-height: 25px; margin: 0 0 20px 0; opacity: 0; transform: translate3d(0, 20px, 0); transition: transform .6s ease,opacity .6s ease; transition-delay: .2s; } .shown .tagline__body { opacity: .6; transform: translate3d(0, 0, 0); } .tagline__form { opacity: 0; transform: translate3d(0, 20px, 0); transition: transform .6s ease,opacity .6s ease; transition-delay: .3s; } .shown .tagline__form { opacity: 1; transform: translate3d(0, 0, 0); } .email-form { display: -ms-flexbox; display: flex; width: 400px; position: relative; } .email-form.email-form--error .email-form__inner { animation-duration: .6s; animation-fill-mode: both; animation-name: shakeIt; animation-timing-function: ease; } .email-form a { color: white; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .email-form__responces { color: rgba(255, 255, 255, 0.8); width: 100%; text-align: left; margin: 10px 0 0 0; } .email-form__error-message { opacity: 0; position: absolute; top: 52px; color: rgba(255, 255, 255, 0.5); transform: translate3d(0, 10px, 0); transition: transform .2s ease, opacity .2s ease; } .email-form__error-message a { color: white; } .email-form__error-message.email-form__error-message--shown { opacity: 1; transform: translate3d(0, 0, 0); } .email-form__success-message { position: absolute; top: 60px; left: 0px; width: 100%; padding: 15px; font-size: 15px; border-radius: 8px; text-align: left; background-color: rgba(255, 255, 255, 0.12); color: white; line-height: 22px; opacity: 0; transform: translate3d(0, 10px, 0); transition: transform .2s ease, opacity .2s ease; } .email-form__success-message.email-form__success-message--shown { opacity: 1; transform: translate3d(0, 0, 0); } .email-form__inner { display: -ms-flexbox; display: flex; width: 400px; position: relative; } .email-form__input { height: 45px; line-height: 45px; border-radius: 8px !important; } .email-form__input--email { text-align: left; background-color: rgba(255, 255, 255, 0.12); color: white; width: 215px; padding: 0 15px; margin: 0 10px 0 0; font-family: 'PostGrotesk-Book', sans-serif; box-sizing: border-box; transition: background-color .2s ease; font-weight: 400; font-size: 15px; } input.email-form__input--email:disabled { color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.12); opacity: 1; } .email-form--valid .email-form__input--email { color: rgba(255, 255, 255, 0.4); background-image: url(../img/new-site/icon_valid.png); background-size: 24px; background-repeat: no-repeat; background-position: right 10px center; } .email-form__input--email:focus { background-color: rgba(255, 255, 255, 0.2); color: white; } .email-form__input--email::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } .email-form__input--email::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } .email-form__input--email:-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } .email-form__input--email:-moz-placeholder { color: rgba(255, 255, 255, 0.6); } .email-form input[type="submit"], .download-apk a.button { width: 175px; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-positive: 0; flex-grow: 0; box-shadow: 0px 10px 10px 0px rgba(80, 92, 174, 0.3); } .email-form input[type="submit"]:disabled { cursor: default; color: rgba(255, 255, 255, 0.5); } .email-form input[type="submit"]:disabled:hover { background-color: #68c0f8; } .tagline__footer { text-align: center; color: white; margin: 0 auto; padding: 25px; width: 200px; font-size: 16px; line-height: 24px; opacity: 0; transform: translate3d(0, 20px, 0); transition: transform .6s ease,opacity .6s ease; transition-delay: .3s; display: none; } .shown .tagline__footer { opacity: 1; transform: translate3d(0, 0, 0); } .tagline__footer-inner { transition: opacity .2s ease; } .tagline__footer.tagline__footer--hidden .tagline__footer-inner { opacity: 0; } .phones { width: 476px; height: 636px; position: absolute; right: -20px; top: 106px; } .phone-wrap { position: absolute; transform: translate3d(0, 0, 0); } .phone { position: absolute; opacity: 0; transform: translate3d(0, 40px, 0); transition: transform .6s ease, opacity .3s ease; } .phone.phone--iphone { transition-delay: .3s; } .phone.phone--android { transition-delay: .4s; transform: translate3d(0, 40px, 0); } .shown .phone { opacity: 1; transform: translate3d(0, 0, 0); } .phone-wrap--iphone { width: 292px; height: 610px; left: 0; top: -3px; z-index: 500; } .phone-wrap--android { width: 290px; height: 574px; left: 186px; top: 62px; z-index: 400; } .features-wrap { position: relative; top: -139px; width: 1180px; height: 300px; } .features { display: -ms-flexbox; display: flex; width: 100%; height: 100%; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 80px; background: white; box-shadow: 0px -2px 18px 0px rgba(72, 89, 102, 0.25); border-radius: 10px; } .button.button--secondary { color: #6370CA; background-color: rgba(99, 112, 202, 0.1); box-shadow: none; } .button.button--more { padding: 0 35px; transform: translate3d(-50%, 0, 0); position: absolute; bottom: 30px; left: 50%; transition: transform .2s ease, background-color .2s ease; } .button.button--secondary:hover { background-color: rgba(99, 112, 202, 0.2); } .button.button--more:active { transform: translate3d(-50%, 0, 0) scale(0.99); } .features__item { text-align: center; width: 240px; } .features__icon { display: inline-block; width: 130px; height: 60px; background-size: 130px; background-repeat: no-repeat; } .features__item--send .features__icon { background-image: url(../img/new-site/send_icon.png); } .features__item--browse .features__icon { background-image: url(../img/new-site/browse_icon.png); } .features__item--buy .features__icon { background-image: url(../img/new-site/buy_icon.png); } .features__title { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 20px; margin: 15px 0 12px 0; } .features__description { color: #70808D; font-size: 15px; line-height: 25px; } @media (max-width: 1220px) { .features-wrap { width: 1040px; } .features { padding: 20px 50px; } .tagline { left: 65px; } .phones { right: 40px; } } @media (max-width: 1140px) { .slide.slide--one { margin: 20px 20px 0 20px; } .slide.slide--one .slide__inner { margin: 0 0 0 0; width: 100%; } .features-wrap { width: 100%; } .features { width: auto; margin: 0 20px; } .tagline { -ms-flex-pack: start; justify-content: flex-start; text-align: left; left: 40px; } } @media (max-width: 1030px) { .tagline { width: 300px; top: 230px; } .email-form__success-message { top: 112px; } .email-form__error-message { top: 108px; } .email-form.email-form--valid input[type="submit"] { display: none; } .email-form { -ms-flex-direction: column; flex-direction: column; width: 300px; } .email-form__inner { -ms-flex-direction: column; flex-direction: column; width: 300px; } .email-form__input--email { width: 100%; margin: 0 0 10px 0; } .email-form input[type="submit"] { width: 100%; } } @media (max-width: 960px) { .tagline, .email-form, .email-form__inner { width: 280px; } .features-wrap { width: 100%; } .features { padding: 20px; } } @media (max-width: 922px) { .slide.slide--one .slide__inner { height: 693px; } .tagline { width: 260px; top: 180px; } .email-form, .email-form__inner { width: 260px; } .phones { width: 404px; height: 548px; top: 91px; } .phone-wrap--iphone { width: 247px; height: 516px; } .phone-wrap--android { width: 246px; height: 486px; left: 149px; } .the-iphone { width: 252px; height: 516px; } .the-iphone-dot { top: 26px; width: 6px; height: 6px; } .the-iphone-line { top: 38px; height: 5px; } .the-iphone-screen { width: 229px; height: 405px; background-size: 229px; } .the-iphone-button { width: 30px; height: 30px; bottom: 13px; } .the-android { width: 246px; height: 486px; } .the-android-screen { width: 222px; height: 394px; background-size: 222px; } .the-android-button { bottom: 21px; } .features__item { margin: 0 15px; } } @media (max-width: 840px) { .slide.slide--one .slide__inner { height: 670px; } .tagline { left: 30px; } .tagline, .email-form, .email-form__inner { width: 246px; } .tagline .tagline__title { font-size: 21px; line-height: 35px; margin: 0 0 0 0; } .tagline .tagline__body { font-size: 16px; line-height: 24px; margin: 0 0 10px 0; } .features { margin: 0 15px; } .features-wrap { height: 260px; } .features__icon { width: 95px; height: 44px; background-size: 95px; } .features__title { font-size: 15px; line-height: 20px; margin: 5px 0; } .features__description { font-size: 14px; line-height: 20px; } .phones { right: 20px; top: 69px; } } @media (max-width: 767px) { input.email-form__input--email { font-size: 16px; } .email-form__success-message { position: static; margin: 12px 0 0 0; } .slide.slide--one { margin: 0; } .slide.slide--one .slide__inner { height: auto; border-radius: 0; } .tagline { position: static; -ms-flex-direction: column; flex-direction: column; width: auto; left: 0; top: 0; margin: 110px 0 0px 0; padding: 0 20px; } .tagline, .email-form, .email-form__inner { width: auto; } .email-form.email-form--error .email-form__inner { animation: none; } .email-form__responces { margin-top: 5px; } .tagline .tagline__body { margin: 0 0 10px 0; } .tagline__footer { display: block; margin-top: 24px; } .phones { position: relative; top: 0; left: 0; height: 340px; width: auto; max-width: 500px; overflow: hidden; margin: 0 auto; } .phone-wrap--iphone { left: 10px; transform: translate3d(0, 0, 0) !important; } .phone-wrap--android { left: auto; right: 10px; transform: translate3d(0, 0, 0) !important; } .features-wrap { top: 0; height: auto; } .features { margin: 0; border-radius: 0; height: auto; -ms-flex-direction: column; flex-direction: column; padding: 5px 20px 5px 10px; } .features__item { width: auto; text-align: left; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 0; } .features__title { font-size: 16px; line-height: 20px; } .features__icon { width: 80px; height: 80px; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-positive: 0; flex-grow: 0; background-position: center center; } .features__item--send .features__icon { background-size: 70px; } .features-text { margin: 0 0 0 10px; padding: 25px 0; border-bottom: 1px solid #EEF2F5; } .features__item:nth-child(3) .features-text { border-bottom: none; } .button.button--more { display: none; } } @keyframes shakeIt { 0%, 100% { transform: translate3d(0, 0, 0); } 20%, 60% { transform: translate3d(-4px, 0, 0); } 40%, 80% { transform: translate3d(4px, 0, 0); } } .slide.slide--two { padding: 40px 0 40px 0; margin: -140px 0 0 0; } .dapps { margin: 50px auto 30px; width: 880px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; -ms-flex-pack: justify; justify-content: space-between; } .dapp { display: block; text-decoration: none; width: 25%; opacity: 0; transform: translate3d(0, 20px, 0); transition: transform .6s ease, opacity .4s ease; transition-delay: .1s; } .dapp:nth-child(2) { transition-delay: .2s; } .dapp:nth-child(3) { transition-delay: .3s; } .dapp:nth-child(4) { transition-delay: .4s; } .dapp:nth-child(5) { transition-delay: .5s; } .dapp:nth-child(6) { transition-delay: .6s; } .dapp:nth-child(7) { transition-delay: .7s; } .dapp:nth-child(8) { transition-delay: 1s; } .slide--shown .dapp { opacity: 1; transform: translate3d(0, 0, 0); } .dapp.dapp--plus { display: -ms-flexbox; display: flex; } .dapp.dapp--plus a.dapp--plus__link { text-align: center; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } .dapp__inner { background-color: white; height: 240px; margin: 10px; box-shadow: 0px 4px 18px 0px rgba(189, 208, 223, 0.26); border-radius: 8px; padding: 20px; position: relative; transition: box-shadow .3s ease, transform .3s ease; } .dapp:hover .dapp__inner { transform: translate3d(0, -2px, 0); box-shadow: 0px 8px 22px 0px rgba(189, 208, 223, 0.6); } .dapp__title { font-size: 15px; line-height: 15px; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; margin: 0 0 10px 0; } .dapp__description { font-size: 14px; line-height: 20px; color: #5A6F7E; opacity: .8; } .dapp__icon { display: block; width: 72px; height: 72px; margin: 0 0 10px 0; -ms-transform: scale(1); transform: scale(1); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.135, 1.425); } .dapp--plus:hover .dapp__icon { -ms-transform: scale(1.12); transform: scale(1.12); } .dapp__icon-inner { width: 72px; height: 72px; background-image: url(../img/new-site/plus.svg); background-repeat: no-repeat; background-size: cover; opacity: 0; -ms-transform: scale(0.6); transform: scale(0.6); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.135, 1.425), opacity 0.2s ease; transition-delay: 1.2s; } .slide--shown .dapp__icon-inner { -ms-transform: scale(1); transform: scale(1); opacity: 1; } .dapp--plus .dapp__description { text-align: center; display: inline-block; width: 80%; } .dapp__image { width: 50px; height: 50px; border-radius: 50%; position: absolute; left: 20px; bottom: 20px; background-color: white; background-size: cover; } .dapp.dapp--one .dapp__image { background-image: url(../img/new-site/uport-avatar@2x.png); } .dapp.dapp--two .dapp__image { background-image: url(../img/new-site/gnosis-avatar@2x.png); } .dapp.dapp--three .dapp__image { background-image: url(../img/new-site/oasis-avatar@2x.png); } .dapp.dapp--four .dapp__image { background-image: url(../img/new-site/ethlance-avatar@2x.png); } .dapp.dapp--five .dapp__image { background-image: url(../img/new-site/aragon-avatar@2x.png); } .dapp.dapp--six .dapp__image { background-image: url(../img/new-site/etherisc-avatar@2x.png); } .dapp.dapp--seven .dapp__image { background-image: url(../img/new-site/ujo-avatar@2x.png); } @media (max-width: 922px) { .dapps { margin: 50px auto 30px; width: 748px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .dapp { width: 25%; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; } .dapp__inner { height: 260px; } } @media (max-width: 767px) { .slide.slide--two { margin: 0; padding: 0; } .dapps { margin: 20px auto 10px; width: auto; padding: 0 10px; } .dapp__inner { margin: 5px; height: 240px; padding: 15px; } .dapp { width: 50%; opacity: 1; transform: translate3d(0, 0, 0); } .dapp__image { width: 40px; height: 40px; left: 15px; bottom: 15px; } .dapp:nth-child(4), .dapp:nth-child(5) { display: none; } .dapp__icon, .dapp__icon-inner { width: 60px; height: 60px; -ms-transform: scale(1); transform: scale(1); opacity: 1; } } .slide.slide--three { display: -ms-flexbox; display: flex; padding: 40px 0 60px; } .slide.slide--three .slide__inner { background-image: linear-gradient(-180deg, #5A6F7E 0%, #445561 100%); box-shadow: 0px 12px 23px 0px rgba(74, 92, 105, 0.33); border-radius: 8px; padding: 50px 0; height: 740px; width: 1080px; } .circles { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; z-index: 500; } .slide__circles { position: absolute; top: 56%; left: 0; width: 1080px; height: 740px; } .slide__circle-wrap { position: absolute; left: 50%; top: 110%; transform: translate3d(-50%, -50%, 0); } .slide__circle { border-radius: 50%; opacity: 0.1; background: #A6B0BA; border: 2px solid #FFFFFF; opacity: .1; transform: scale(1) translate3d(0, 0, 0); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s linear; } .slide__circle--one .slide__circle { width: 1200px; height: 1200px; transition-delay: .7s; } .slide__circle--two .slide__circle { width: 1000px; height: 1000px; transition-delay: .6s; } .slide__circle--three .slide__circle { width: 800px; height: 800px; transition-delay: .5s; } .slide__circle--four .slide__circle { width: 600px; height: 600px; transition-delay: .4s; } .slide__circle--five .slide__circle { width: 400px; height: 400px; transition-delay: .3s; } .slide__circle--six .slide__circle { width: 200px; height: 200px; transition-delay: .2s; } .points { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 600; } .point { position: absolute; width: 260px; } .point.point--one { top: 198px; left: -50px; } .point.point--two { top: 439px; left: 273px; } .point.point--three { top: 192px; left: 490px; } .point.point--four { top: 336px; left: 844px; } .point__point { width: 20px; height: 20px; margin: 10px auto; border-radius: 50%; background-color: #3AAAF2; border: 6px solid white; box-shadow: 0px 13px 11px 0px rgba(69, 81, 90, 0.16); opacity: 0; transform: scale(0.2) translate3d(0, -20px, 0); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s ease; } .slide--shown .point__point { opacity: 1; transform: scale(1) translate3d(0, 0, 0); } .point.point--one .point__point { transition-delay: 1.2s; } .point.point--two .point__point { transition-delay: .6s; } .point.point--three .point__point { transition-delay: .8s; } .point.point--four .point__point { transition-delay: 1s; } .point__title { font-family: PostGrotesk-Medium; line-height: 15px; margin-bottom: 10px; } .point__description { color: #5A6F7E; font-size: 14px; line-height: 20px; } .point__content { width: 260px; position: relative; background: white; box-shadow: 0px 13px 11px 0px rgba(69, 81, 90, 0.16); border-radius: 8px; opacity: 0; transform: scale(1) translate3d(0, -20px, 0); transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.135, 1.425), opacity 0.3s ease; } .slide--shown .point__content { opacity: 1; transform: scale(1) translate3d(0, 0, 0); } .point.point--one .point__content { transition-delay: 1.3s; } .point.point--two .point__content { transition-delay: .7s; } .point.point--three .point__content { transition-delay: .9s; } .point.point--four .point__content { transition-delay: 1.1s; } .point__top { padding: 30px 25px 20px 30px; } .point__footer { font-family: PostGrotesk-Medium; color: #68C0FF; padding: 15px 30px; background-color: #E6F2FD; border-radius: 0px 0px 8px 8px; } .point__avatar { float: right; width: 40px; height: 40px; border-radius: 50%; background-color: #eef2f5; margin: 0 0 10px 10px; background-size: cover; } .point.point--one .point__avatar { background-image: url(../img/new-site/image-jarrad-dapp.png); } .point.point--two .point__avatar { background-image: url(../img/new-site/image-etherplay-dapp.png); } .point.point--three .point__avatar { background-image: url(../img/new-site/image-carl-dapp.png); } .point.point--four .point__avatar { background-image: url(../img/new-site/image-moments-dapp.png); } @media (max-width: 1220px) { .point.point--one { top: 127px; left: 20px; } .point.point--four { top: 425px; left: 778px; } } @media (max-width: 1140px) { .slide.slide--three .slide__inner { width: 860px; } .point.point--one { top: 183px; left: -30px; } .point.point--two { top: 454px; left: 243px; } .point.point--four { top: 240px; left: 630px; } .point.point--three { display: none; } } @media (max-width: 960px) { .point.point--one { top: 183px; left: 20px; } .point.point--two { top: 454px; left: 243px; } .point.point--four { top: 240px; left: 580px; } } @media (max-width: 922px) { .slide.slide--three .slide__inner { width: 728px; } .point.point--one { top: 183px; left: 20px; } .point.point--two { top: 454px; left: 170px; } .point.point--four { top: 240px; left: 450px; } } @media (max-width: 767px) { .slide.slide--three { padding: 40px 0 40px; } .slide.slide--three .slide__inner { padding: 30px 0; width: 100%; border-radius: 0; height: 570px; } .slide__circle-wrap { top: 145%; } .point { width: auto; } .point__top { padding: 5px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .point__title { margin: 0 10px 0 10px; } .point__content { width: auto; border-radius: 40px; } .point__avatar { float: none; margin: 0; } .point__description { display: none; } .point__footer { display: none; } .point.point--one { top: 290px; left: 20px; } .point.point--two { top: 210px; right: 50px; left: auto; } .point.point--three { top: 440px; left: 70px; display: block; } .point.point--four { top: 360px; right: 20px; left: auto; } } .slide.slide--four { display: -ms-flexbox; display: flex; padding: 40px 0 100px; } .slide.slide--four .slide__inner { border-radius: 8px; padding: 20px 0 0 0; height: auto; width: auto; } .slide.slide--four .button { margin: 20px auto 0; width: 170px; } @media (max-width: 767px) { .slide.slide--four { padding: 0px 0px 60px 0px; } } .slide.slide--five { display: -ms-flexbox; display: flex; padding: 40px 0 60px; } .slide.slide--five .slide__inner { background-image: linear-gradient(-138deg, #5070D5 14%, #4957B8 100%); box-shadow: 0px 12px 23px 0px rgba(74, 92, 105, 0.33); border-radius: 8px; padding: 50px 0; height: 740px; width: 1080px; } .slide.slide--five .slide__header { padding: 150px 0 0 0; } .slide.slide--five .slide__bg-image { width: 814px; height: 519px; background-image: url(../img/new-site/lines@2x.png); background-size: 814px; position: absolute; left: 50%; top: 0; margin: 0 0 0 -407px; } .slide__bg-area { position: absolute; background-color: white; opacity: 0; left: 50%; top: -88px; margin: 0 0 0 -200px; width: 400px; height: 400px; border-radius: 50%; -ms-transform: scale(0.1); transform: scale(0.1); animation-timing-function: ease; animation-name: pulsateArea; animation-duration: 3.4s; animation-delay: 2.3s; animation-iteration-count: infinite; } .slide.slide--five .slide__bg-icon { position: absolute; top: 86px; left: 50%; margin: 0 0 0 -26px; height: 52px; width: 52px; border-radius: 50%; background: #68C0F8; box-shadow: 0 2px 9px 0 rgba(57, 80, 164, 0.69); position: relative; animation-timing-function: cubic-bezier(0.685, 0, 0.025, 1.185); animation-name: pulsate; animation-duration: 3.4s; animation-iteration-count: infinite; } .slide.slide--five .slide__bg-icon-inner { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); width: 24px; height: 24px; background-image: url(../img/new-site/icon-community.svg); background-position: 24px; } .contributors { width: 870px; margin: 0 auto; padding: 80px 0 0 0; } .contributors__title { text-align: center; color: white; opacity: .6; padding: 24px 0; } .contributors__list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; } .contributor { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: 210px; height: 92px; } .contributor__pic { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 2px 8px 0 #394C97; background-size: cover; } .contributor--carl .contributor__pic { background-image: url(../img/new-site/carl.png); } .contributor--jarrad .contributor__pic { background-image: url(../img/new-site/jarrad.png); } .contributor--roman .contributor__pic { background-image: url(../img/new-site/roman.png); } .contributor--victor .contributor__pic { background-image: url(../img/new-site/victor.png); } .contributor--alexander .contributor__pic { background-image: url(../img/new-site/alexander.png); } .contributor--andrey .contributor__pic { background-image: url(../img/new-site/andrey.png); } .contributor--gustavo .contributor__pic { background-image: url(../img/new-site/gustavo.png); } .contributor--andrei .contributor__pic { background-image: url(../img/new-site/andrei.png); } .contributor__info { padding: 0 0 0 16px; color: white; } .contributor__info__name { font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; line-height: 16px; } .contributor__info__position { font-size: 14px; color: #68C0F8; } @keyframes pulsate { 0% { transform: scale(1); box-shadow: 0 2px 9px 0 rgba(57, 80, 164, 0.69); } 50% { transform: scale(1.14); box-shadow: 0px 10px 14px 0 rgba(57, 80, 164, 0.69); } 100% { transform: scale(1); box-shadow: 0 2px 9px 0 rgba(57, 80, 164, 0.69); } } @keyframes pulsateArea { 0% { transform: scale(0.1); opacity: .1; } 100% { transform: scale(1.4); opacity: 0; } } @media (max-width: 1140px) { .slide.slide--five .slide__inner { width: 860px; height: auto; } .contributors { padding: 60px 0 0 0; width: 640px; } .contributor { -ms-flex-direction: column; flex-direction: column; text-align: center; -ms-flex-pack: center; justify-content: center; height: auto; margin: 0 0 24px 0; width: 160px; } .contributor__info { padding: 8px 0 0 0; } } @media (max-width: 922px) { .slide.slide--five .slide__inner { width: 728px; } .contributors { width: 100%; } .contributors__list { -ms-flex-pack: center; justify-content: center; } .contributor { width: 160px; } } @media (max-width: 767px) { .slide.slide--five { padding: 40px 0 40px; } .slide.slide--five .slide__inner { padding: 30px 0; width: 100%; border-radius: 0; } } .slide.slide--six { padding: 40px 0 40px 0; margin: 0 0 0 0; } .slide--shown { -ms-transform: scale(1); transform: scale(1); opacity: 1; } .slide.slide--six .slide__footer { width: 450px; } .messages { margin: 50px auto 30px; width: 880px; height: 600px; position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; -ms-flex-pack: justify; justify-content: space-between; } .message { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -ms-flex-direction: row; flex-direction: row; position: absolute; opacity: 0; transition: transform .6s ease, opacity .4s ease; transition-delay: .1s; } .message.message--outcoming { -ms-flex-direction: row-reverse; flex-direction: row-reverse; transform: translate3d(10px, 20px, 0) scale(0.9) rotate(0); } .message.message--incoming { transform: translate3d(-10px, 20px, 0) scale(0.9) rotate(0); } .message.message--one { top: 120px; left: 0; transition-delay: .2s; } .message.message--two { top: 0; left: 200px; transition-delay: .3s; } .message.message--three { top: 135px; right: 140px; transition-delay: .4s; } .message.message--four { top: 220px; left: 160px; transition-delay: .5s; } .message.message--five { top: 355px; left: 0px; transition-delay: .6s; } .message.message--six { top: 365px; right: 0; transition-delay: .7s; } .message.message--seven { top: 365px; right: 320px; transition-delay: .8s; } .slide--shown .message.message--outcoming, .slide--shown .message.message--incoming { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } .message__avatar { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 4px 18px 0 rgba(189, 208, 223, 0.26); background-color: white; background-size: 36px; margin: 0 8px; } .message--one .message__avatar { background-image: url(../img/new-site/face1@2x.png); } .message--two .message__avatar { background-image: url(../img/new-site/face2@2x.png); } .message--three .message__avatar { background-image: url(../img/new-site/face3@2x.png); } .message--four .message__avatar { background-image: url(../img/new-site/face4@2x.png); } .message--five .message__avatar { background-image: url(../img/new-site/face5@2x.png); } .message--six .message__avatar { background-image: url(../img/new-site/face6@2x.png); } .message--seven .message__avatar { background-image: url(../img/new-site/face7@2x.png); } .message__bubble { background-color: white; box-shadow: 0 4px 18px 0 rgba(189, 208, 223, 0.26); border-radius: 8px; max-width: 204px; } .message__name { font-size: 14px; color: #939BA1; padding: 12px 12px 2px 12px; } .message__text { padding: 0 12px 8px 12px; font-size: 15px; color: #000; } .message__location { width: 180px; height: 60px; background-size: cover; background-image: url(../img/new-site/location@2x.png); margin: 0 12px 12px 12px; } .message__player { width: 162px; height: 52px; background-size: cover; background-image: url(../img/new-site/player@2x.png); margin: 0 12px 12px 12px; } .message__transaction { width: 180px; padding: 0 12px 12px 12px; } .message__transaction__amount { font-size: 25px; font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .message__transaction__amount .currency { color: #C2C4CB; letter-spacing: 2px; } .message__transaction__details { padding: 8px 0 0 0; } .message__transaction__details .text-gray { display: inline-block; color: #C2C4CB; width: 44px; } .message__custom { margin: 0 12px 12px 12px; width: 180px; height: 150px; border: 1px dashed #6E97E9; border-radius: 8px; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; } .message__custom__icon-wrap { width: 46px; height: 46px; background-color: #E0E9F9; border-radius: 50%; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; } .message__custom__icon { width: 24px; height: 24px; background-image: url(../img/new-site/icon-plus2.svg); background-size: 24px; } .message__custom__text { text-align: center; color: #95A3AD; font-size: 14px; line-height: 20px; padding: 4px 16px 0; } .message__bubble-footer { height: 40px; line-height: 40px; text-align: center; } .message__bubble-footer.message__bubble-footer--button { color: white; background-color: #6E97E9; border-radius: 0px 0px 8px 8px; } .message__bubble-footer.message__bubble-footer--status { border-top: 1px solid #E8EBEC; color: #6E97E9; border-radius: 0px 0px 8px 8px; } @media (max-width: 922px) { .messages { margin: 50px auto 30px; width: 748px; height: 620px; } .message.message--three { right: 30px; top: 55px; } .message.message--four { left: 170px; top: 225px; } .message.message--five { left: 0; top: 355px; } .message.message--six { top: 255px; } .message.message--seven { right: 210px; top: 405px; } } @media (max-width: 767px) { .slide.slide--six { padding: 0; } .messages { margin: 20px auto 10px; width: 375px; padding: 0 10px; } .message.message--one { left: 0; top: 0; } .message.message--two { display: none; } .message.message--three { right: 0; top: 88px; } .message.message--four { display: none; } .message.message--five { left: 0; top: 278px; } .message.message--six { display: none; } .message.message--seven { right: 0px; top: 406px; } } @media (max-width: 375px) { .messages { width: auto; } } .footer { position: fixed; width: 100%; bottom: 0; left: 0; z-index: -1; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; background-color: #4A5C69; border-top: 100px solid #4A5C69; } .footer.footer--page { position: static; margin: -96px 0 0 0; border-top: 56px solid #4A5C69; } .footer-inner { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; width: 1080px; } .footer-logo-wrap { width: 280px; display: -ms-flexbox; display: flex; } .footer-logo-wrap__inner { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; justify-content: space-between; padding: 65px 0 75px 0; } .footer-logo { width: 52px; height: 52px; background-size: 52px; background-image: url(../img/new-site/footer-logo@2x.png); } .footer-address { color: white; padding: 20px 0 0 0; opacity: .5; } .footer-table { display: -ms-flexbox; display: flex; } .footer-table__column { box-sizing: border-box; padding: 60px 40px; } .footer-header { color: white; opacity: .5; font-size: 17px; margin: 0 0 40px 0; } .footer-link { height: 32px; line-height: 32px; font-size: 16px; margin: 0 0 15px 0; } .footer-link a { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .footer-icon { display: inline-block; width: 32px; height: 32px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; margin: 0 15px 0 0; background-repeat: no-repeat; background-size: 24px; background-position: center; } .footer-link--fb .footer-icon { background-image: url(../img/new-site/icon_fb2.svg); } .footer-link--tw .footer-icon { background-image: url(../img/new-site/icon_tw2.svg); } .footer-link--sl .footer-icon { background-image: url(../img/new-site/icon_sl2.svg); } .footer-link--ri .footer-icon { background-image: url(../img/new-site/icon_ri.svg); } .footer-link--gh .footer-icon { background-image: url(../img/new-site/icon_gh2.svg); } .footer-link--rd .footer-icon { background-image: url(../img/new-site/icon_rd2.svg); } .footer-link--yt .footer-icon { background-image: url(../img/new-site/icon_yt.svg); } .footer-link a { color: white; } .footer-link a:hover { opacity: .8; } .language-switcher { font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: white; -webkit-appearance: none; font-size: 16px; line-height: 32px; padding: 0 24px 0 0; background-image: url(../img/new-site/icon_dropdown-white.svg); background-size: 24px; background-repeat: no-repeat; background-position: right center; } .language-switcher:focus { outline: none; } @media (max-width: 1140px) { .footer-inner { width: 820px; -ms-flex-pack: distribute; justify-content: space-around; } .footer-logo-wrap { width: 200px; } } @media (max-width: 767px) { .footer { position: static; border-top: 0px; } .footer.footer--page { border-top: 100px solid #4A5C69; } .footer-inner { padding: 30px 0 0 0; -ms-flex-direction: column; flex-direction: column; } .footer-table { -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } .footer-table__column { text-align: center; padding: 10px 16px; } .footer-logo-wrap { width: auto; -ms-flex-order: 2; order: 2; } .footer-header { margin: 0 0 10px 0; } .footer-logo-wrap__inner { width: 100%; padding: 0 0 40px 0; -ms-flex-align: center; align-items: center; text-align: center; } .footer-link { text-align: center; height: 24px; line-height: 24px; margin: 0 0 10px 0; } .footer-link a { -ms-flex-pack: center; justify-content: center; text-align: center; } .footer-icon { display: none; } .footer-logo { display: none; } }