@charset "UTF-8"; @font-face { font-family: "icomoon"; src: url("./icomoon.eot?q2fo0y"); src: url("./icomoon.eot?q2fo0y#iefix") format("embedded-opentype"), url("./icomoon.ttf?q2fo0y") format("truetype"), url("./icomoon.woff?q2fo0y") format("woff"), url("./icomoon.svg?q2fo0y#icomoon") format("svg"); font-weight: normal; font-style: normal; } [class^=icon-], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "icomoon" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-warning:before { content: ""; } .icon-grid-masonry:before { content: ""; } .icon-grid-small:before { content: ""; } .icon-grid-big:before { content: ""; } .icon-pin:before { content: ""; } .icon-search:before { content: ""; } .icon-dribbble:before { content: ""; } .icon-chat:before { content: ""; } .icon-share:before { content: ""; } .icon-view:before { content: ""; } .icon-ph:before { content: ""; } .icon-time:before { content: ""; } .icon-google:before { content: ""; } .icon-invision:before { content: ""; } .icon-menu:before { content: ""; } .icon-notification:before { content: ""; } .icon-like:before { content: ""; } .icon-user:before { content: ""; } .icon-star:before { content: ""; } .icon-bolt:before { content: ""; } .icon-close:before { content: ""; } .icon-link:before { content: ""; } .icon-medium:before { content: ""; } .icon-slack:before { content: ""; } .icon-linkedin:before { content: ""; } .icon-twitter:before { content: ""; } .icon-facebook:before { content: ""; } .icon-plus:before { content: ""; } .icon-check:before { content: ""; } .icon-community:before { content: ""; } .icon-upload:before { content: ""; } .icon-behance:before { content: ""; } .icon-bin:before { content: ""; } .icon-stage:before { content: ""; } .icon-images:before { content: ""; } .icon-users:before { content: ""; } .icon-refresh:before { content: ""; } .icon-play:before { content: ""; } .icon-right:before { content: ""; } .icon-fav:before { content: ""; } .icon-plus-lite:before { content: ""; } .icon-check-lite:before { content: ""; } .icon-fill:before { content: ""; } .icon-image:before { content: ""; } .icon-download:before { content: ""; } .icon-instagram:before { content: ""; } .icon-camera:before { content: ""; } .icon-lightness:before { content: ""; } .icon-lock:before { content: ""; } .icon-pick:before { content: ""; } .icon-copy:before { content: ""; } .icon-studio:before { content: ""; } .icon-bolt-strong:before { content: ""; } .icon-hot:before { content: "🌊"; } h1 { font-family: "Playfair Display", "Open Sans", sans-serif; font-weight: 400; font-size: 9rem; } h2 { font-size: 3rem; font-weight: 300; } h3 { font-size: 3.8rem; font-family: "Playfair Display", "Open Sans", sans-serif; font-weight: 300; } a { text-decoration: none; color: #654CF6; } .center { text-align: center; } body, html { height: 100%; } html { font-size: 62.5%; /* Now 10px = 1rem! */ } body { font-family: "Poppins", sans-serif; font-weight: 300; font-size: 1.4em; background: #fff; background-size: 100%; background-attachment: fixed; color: #000; display: flex; flex-direction: column; padding: 0; margin: 0; } .wrapper { flex: 1 0 auto; padding: 65px 80px 0; } header { position: fixed; z-index: 1002; background-color: #ffffff99; height: 65px; width: 100%; left: 0; top: 0; backdrop-filter: blur(20px); } header li { margin: 0; } header .dropdown { display: inline-block; vertical-align: top; color: #303030; margin: 12px 10px 13px 10px; position: relative; user-select: none; } header .dropdown .icon-play { font-size: 9px; display: inline-block; width: 40px; height: 40px; line-height: 40px; vertical-align: top; text-align: center; cursor: pointer; transition: color 0.15s ease-in; } header .dropdown .icon-play:hover { color: #000; } header .dropdown .icon-play:before { transform: rotate(90deg); display: inline-block; } header .dropdown ul { position: absolute; top: 54px; left: -10px; background: #fff; list-style: none; margin: 0; padding: 0 15px 0 10px; width: 200px; border-radius: 0 0 4px 0; transition: all 0.15s ease-in-out; height: 0; overflow: hidden; } header .dropdown ul.active { height: 135px; padding: 5px 10px 10px 10px; box-shadow: 0 35px 60px 0 rgba(0, 0, 0, 0.2); } header .dropdown ul li { line-height: 45px; border-radius: 3px; } header .dropdown ul li:hover { background: rgba(194, 194, 194, 0.3); } header .dropdown ul li a { color: #303030; text-decoration: none; white-space: nowrap; display: block; padding: 0 7px; box-sizing: border-box; } header .dropdown ul li a i { text-align: center; display: inline-block; width: 30px; height: 30px; line-height: 30px; background: #654CF6; color: #fff; text-decoration: none; font-size: 10px; border-radius: 50%; margin: 0 10px 0 0; } header .dropdown ul li a i.inspiration { background-color: #000000; } header .dropdown ul li a i.colors { background-color: #3adbb9; } header .dropdown ul li a i.collections { background-color: #a22fff; } header .dropdown ul li a span { display: inline-block; line-height: 40px; height: 40px; font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, 0.7); } header .logo { text-decoration: none; } header .logo i { vertical-align: top; text-align: center; display: inline-block; width: 40px; height: 40px; line-height: 40px; background: #000000; color: #fff; text-decoration: none; font-size: 14px; border-radius: 50%; margin: 12px 10px 13px 0; } header .logo .title { display: inline-block; height: 40px; margin: 12px 0 13px 0; } header .logo .title span { font-size: 14px; font-weight: 600; line-height: 1.21; color: rgba(0, 0, 0, 0.7); display: block; margin: 3px 0 0; } header .logo .title small { font-size: 12px; font-weight: 500; color: rgba(0, 0, 0, 0.3); } header .cta, header form input[type=submit], form header input[type=submit], header form .g-recaptcha, form header .g-recaptcha { height: 40px; border-radius: 20px; color: #fff; line-height: 40px; padding: 0 20px; text-align: center; text-decoration: none; display: inline-block; margin: 10px 20px 10px 10px; float: right; font-size: 13px; font-weight: 500; background-color: #654CF6; transition: all 0.15s ease-in; width: auto; background-image: none; margin: 12px; } header .cta i, header form input[type=submit] i, form header input[type=submit] i, header form .g-recaptcha i, form header .g-recaptcha i { margin: 0 8px 0 2px; } header .avatar { height: 40px; width: 40px; color: #303030; line-height: 40px; text-align: center; text-decoration: none; display: inline-block; margin: 10px 20px 10px 10px; float: right; font-size: 13px; font-weight: 500; transition: all 0.15s ease-in; position: relative; } header .avatar img { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; } header .avatar ::ng-deep .tooltip { right: 0; left: auto; transform: none; } header .avatar ::ng-deep .tooltip:after { right: 10px; left: auto; } header .nav, header .nav-icon { margin: 12px 7px 0; display: inline-block; vertical-align: top; position: relative; float: right; } header .nav:hover i, header .nav-icon:hover i { color: #4c5358; } header .nav.active i, header .nav-icon.active i { color: #373D40; } header .nav span, header .nav-icon span { display: block; position: relative; } header .nav a, header .nav-icon a { line-height: 40px; color: #303030; opacity: 0.7; font-size: 13px; transition: opacity 0.15s ease-in; } header .nav a:hover, header .nav-icon a:hover { opacity: 1; } header .nav i, header .nav-icon i { cursor: pointer; display: block; text-align: center; font-size: 14px; color: #303030; transition: all 0.15s ease-in; border: solid 1px rgba(194, 194, 194, 0.3); width: 40px; height: 40px; line-height: 38px; border-radius: 50%; box-sizing: border-box; } header .nav i:hover, header .nav-icon i:hover { border: solid 1px #c2c2c2; } header .nav a, header .nav-icon a { text-decoration: none; } header .nav:hover, header .nav-icon:hover { opacity: 1; } header .nav .zboing, header .nav-icon .zboing { position: relative; animation: zboing 1.3s forwards; } header .nav .zboing i, header .nav-icon .zboing i { color: #FFB700; border-color: #FFB700; } header .nav .zboing:before, header .nav-icon .zboing:before { z-index: -1; content: ""; left: 0; top: 0; background-color: #FFB700; width: 40px; height: 40px; border-radius: 100%; animation-fill-mode: both; position: absolute; opacity: 0; animation: jumper 1.3s 0.33333s ease-out forwards; } header .nav .zboing:after, header .nav-icon .zboing:after { z-index: -1; left: 0; top: 0; content: ""; background-color: #FFB700; width: 40px; height: 40px; border-radius: 100%; animation-fill-mode: both; position: absolute; opacity: 0; animation: jumper 1.3s 0.66666s ease-out forwards; } header .controls { display: none; position: absolute; top: 0; right: 0; padding-right: 5px; } header .controls a { cursor: pointer; display: block; text-align: center; font-size: 14px; color: #303030; transition: all 0.15s ease-in; border: solid 1px rgba(194, 194, 194, 0.3); width: 40px; height: 40px; line-height: 38px; border-radius: 50%; box-sizing: border-box; position: relative; text-decoration: none; margin: 10px 5px 0 0px; } header nav { float: right; height: 65px; line-height: 65px; margin-right: 15px; } header nav ul { list-style: none; margin: 0; padding: 0; } header nav ul li { list-style: none; margin: 0; padding: 0; line-height: 19px; display: inline-block; vertical-align: middle; } header nav ul li a { display: inline-block; margin: 0 12px; line-height: 19px; opacity: 0.7; font-size: 13px; color: #303030; transition: opacity 0.15s ease-in; } header nav ul li a:hover { opacity: 1; color: #000; } header nav ul li a:last-child { margin-right: 0; } header nav ul li a.facebook-page, header nav ul li a.twitter-page { display: inline-block; opacity: 0.2; color: #000000; font-size: 14px; width: 26px; line-height: 22px; text-align: center; vertical-align: top; margin: 0 0 0 10px; transition: opacity 0.15s ease-in; } header nav ul li a.facebook-page:hover, header nav ul li a.twitter-page:hover { opacity: 1; } header nav ul li a.facebook-page { margin-left: 30px; } hamburger { display: none; } hamburger.active .trigger { position: fixed; } hamburger.active .trigger i { color: #FFF; transform: rotate(90deg); } hamburger.active .container { left: 0%; box-shadow: 0 2px 60px 0 rgba(0, 0, 0, 0.5); } hamburger.active .overlay { opacity: 1; right: 0; left: 0; } hamburger .trigger { display: inline-block; color: #303030; position: absolute; left: 0; z-index: 100; } hamburger .icon-menu { width: 40px; height: 40px; line-height: 40px; display: inline-block; text-align: center; margin: 12px; font-size: 20px; transition: all 0.15s ease-in; } hamburger .container { position: fixed; height: 100vh; width: 315px; left: -315px; top: 0; z-index: 10; text-align: left; transition: all 0.15s ease-in-out; background: #000; padding: 0; } hamburger .container .controls { height: 65px; line-height: 65px; } hamburger .container .controls .icon-menu { transform: rotate(90deg); } hamburger .container ul { list-style: none; margin: 0; padding: 0 20px; } hamburger .container ul li { height: 40px; line-height: 40px; } hamburger .container ul li.large a { font-size: 20px; font-weight: 600; line-height: 2.5; } hamburger .container ul li a { display: block; color: #FFF; text-decoration: none; font-size: 14px; font-weight: 500; line-height: 3; } hamburger .container .credits { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; } hamburger .container .credits i { background: #fff; color: #000; width: 30px; height: 30px; line-height: 30px; text-align: center; display: inline-block; border-radius: 3px; margin-right: 4px; } hamburger .overlay { content: ""; position: fixed; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.15s ease-in-out; z-index: 1; } .container.hero { text-align: center; margin: 10vh auto 60px auto; } .container.hero h2 { /* margin: 7vh auto 60px auto; */ font-weight: 200; margin-bottom: .5rem; } .container.hero h1 { margin-bottom: 0; } .container.hero .disclaimer { margin-bottom: 60px; margin-top: -.5rem; font-size: 1.6rem; } .feedSlide { height: 80vh; overflow: hidden; position: relative; margin-top: 80px; cursor: pointer; margin-left: -80px; margin-right: -80px; margin-bottom: 20rem; } .feedSlide .scroll { background-size: auto 100%; width: 100vw; background-repeat: repeat-x; background-position: 0 0; animation: scrollGrid 180s linear infinite; height: 100%; background-image: url(./banner.png); } .cta, form input[type=submit], form .g-recaptcha { width: 330px; display: inline-block; background: #654CF6; /* background: url(./chrome-logo.png) no-repeat 35px center hsl(229, 100%, 59%); */ background-size: 20px; font-size: 18px; color: #fff; height: 64px; line-height: 64px; border-radius: 100px; text-align: center; transition: background-color .3s; font-weight: 400; } .cta:hover { background-color: #654CF680; } .cta:hover, form input[type=submit]:hover, form .g-recaptcha:hover { color: #fff; } .grecaptcha-badge { z-index: 1000; } a.video-button { width: 64px; display: inline-block; background: url(./play.png) no-repeat center center hsla(229, 100%, 59%, 10%); background-size: 12px; height: 64px; vertical-align: middle; margin-left: 10px; transition: background-color .3s; border-radius: 40px; } a.video-button:hover { background-color: hsla(229, 100%, 59%, 20%); } a.learn-more { color: #2E54FF; text-decoration: underline; } .align-left { text-align: left; } .block, .block.grid-columns { max-width: calc(148rem); width: calc(100vw - 32rem); margin:7rem auto 0 auto; } .block.ctas-container { margin-top: 15rem; } /* .block { margin: 6% auto; } */ .block.offgrid { /* margin: 2% auto; */ width: calc(100vw - 14%); max-width: 160rem; } .block.offgrid p { margin-bottom: 3rem; } .block h2, .block h3 { font-size: 4.8rem; font-weight: 700; font-family: "Poppins"; margin-bottom: 3rem; line-height: 6rem; } .block p { max-width: 95ch; margin: auto; font-size: 1.6rem; } .block.grid-columns .text p { max-width: 65ch; } .block.grid-columns h2, .block.grid-columns h3 { margin-top: 0; } .block .highlight { background: url(./highlight.png) no-repeat left; background-size: 100%; font-weight: 700; padding: 0 .5rem; } .block picture img { /* margin-top: 4rem; */ max-width: 100%; height: auto; } .grid-columns { display: grid; gap: 5rem; justify-content: space-between; } .block.grid-columns.two { align-items: center; } .grid-columns.two { grid-template-columns: 1fr 1fr; } .grid-columns.three { grid-template-columns: 1fr 1fr 1fr; } .grid-columns.four { grid-template-columns: 1fr 1fr 1fr 1fr; } .grid-columns.five { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .block.reviews { text-align: left; max-width: 1000px; margin: 15rem auto; } .block.reviews a { display: inline-block; padding-right: 13rem; height: 2rem; background: url(./stars@2x.png) no-repeat center right; background-size: 10rem; margin-top: 1rem; } .ctas { max-width: 110rem; gap: 4rem; margin: 5rem auto; } .ctas a { display: block; height: 40rem; min-width: 33%; color: #fff; } .ctas a h5 { background: rgba(254, 254, 254, 0.20); border-radius: 10px 10px 0 0; padding: 2rem; margin: 0; text-align: left; font-weight: 400; font-size: 1.8rem; display: flex; justify-content: space-between; align-items: center; } .ctas a h5 span { background: rgba(254, 254, 254, 0.80); border-radius: 2rem; display: block; padding: .5rem 3rem; font-size: 1.6rem; transition: all .5s; } .ctas a h5 span:before { content: 'Install'; } .ctas .dl-safari, .ctas .dl-chrome, .ctas .dl-ios { transition: all .5s; } .ctas .dl-safari:hover, .ctas .dl-chrome:hover, .ctas .dl-ios:hover { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.10); transform: translateY(-10px); } .ctas .dl-safari:hover span, .ctas .dl-chrome:hover span, .ctas .dl-ios:hover span { /* background: rgba(255, 255, 255, 1); */ } .ctas .dl-safari h5 span { color: #568FBC; } .ctas .dl-chrome h5 span { color: #8A69CD; } .ctas .dl-ios h5 span { color: #BC65A6; } @media (max-width: 650px) { .container.hero .disclaimer, .container.hero { margin-bottom: 3rem; } .container.hero .disclaimer { line-height: 2rem; font-size: 1.4rem; } .container.hero h2 { line-height: 3.1rem; font-size: 2.2rem; margin-top: 3rem; margin-bottom: 2rem; } .grid-columns { grid-auto-flow: row; grid-template-columns: 1fr !important; } .block.grid-columns { width: auto; gap: 2rem; margin-top: 5rem; } .block.offgrid { margin-bottom: -3rem; } .block.ctas-container { margin-top: 9rem; } .block { max-width: calc(148rem); width: auto; margin:0 auto; margin-top: 5rem; text-align: left !important; } .grid-columns .figure { order: 2; } .block h2, .block h3 { font-size: 2.4rem; line-height: 3rem; } .block .text, .block p { font-size: 1.4rem; } .block.offgrid p { margin-bottom: 0; } .block.offgrid img { width: 100vw; max-width: 100vw; margin-left: -3rem; } .ctas { gap: 1rem; } .ctas .dl-safari ,.ctas .dl-safari:hover, .ctas .dl-chrome, .ctas .dl-chrome:hover, .ctas .dl-ios, .ctas .dl-ios:hover { background: none; background-color:transparent; background-image:none; border-radius: 0; box-shadow: none; } .ctas a { height: auto; } .ctas a h5 { background-color: #000; border-radius: 3.5rem; padding: 1rem 2rem; font-size: 1.4rem; } .ctas a h5 span { background-color: transparent; background-size: auto 2rem; background-repeat: no-repeat; background-position: center; width: 3.2rem; height: 3.2rem; border-radius: 0; padding: 0; } .ctas .dl-safari:hover, .ctas .dl-chrome:hover, .ctas .dl-ios:hover { transform: none; } .ctas a h5 span:before { content: ''; } .ctas .dl-ios a h5 { background-color: #654CF6; } .ctas .dl-ios { order: -1; } .ctas .dl-ios:after { content: ''; display: block; height: 1px; border-top: 1px dashed rgba(46, 84, 255, 0.20); margin: 2rem 0 1rem 0; } .copy { flex-flow: column; gap: 2rem; margin: 0 3rem !important; } footer section.grid-columns.five { margin: 3rem !important; grid-template-columns: 1fr 1fr !important; } footer section.grid-columns.five .footer-text { order: 5; grid-column: span 2; } .block.reviews { background-color: #F7F7F7; margin: 0 -3rem; padding: 3rem 3rem 5rem 3rem; } .block h2, .block h3 { margin-bottom: 2rem; } } .grid-columns.block p { margin: 0; } #overlay { width: 100vw; height: 100vh; position: fixed; top: -30px; left: 0; background-color: rgba(255, 255, 255, 0.95); text-align: center; opacity: 0; transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out; pointer-events: none; } #overlay #player { margin: 10vh auto; display: block; } #overlay.open { top: 0; opacity: 1; pointer-events: all; } .content { font-size: 1.6rem; margin-top: 10vh; } .content h1 { font-size: 4.8rem; } .content p.pad { max-width: 720px; margin-left: auto; margin-right: auto; } .about .content .cta, .about .content form input[type=submit], form .about .content input[type=submit], .about .content form .g-recaptcha, form .about .content .g-recaptcha { display: block; margin: 100px auto; } .about .content .screens-img { max-width: 130%; margin-left: -15%; } .about .content .press { width: 90%; margin: 0 auto; column-count: 2; column-gap: 0; column-width: 46%; -webkit-column-count: 2; -webkit-column-gap: 0; -webkit-column-width: 46%; -moz-column-count: 2; -moz-column-gap: 0; -moz-column-width: 46%; break-after: avoid; break-before: avoid; break-inside: avoid; -webkit-break-after: avoid; -webkit-break-before: avoid; -webkit-break-inside: avoid; -moz-break-after: avoid; -moz-break-before: avoid; -moz-break-inside: avoid; padding: 40px 0; } .about .content .press .screens-img { max-width: 1100px; } .about .content .press article { text-align: left; reak-after: avoid; break-before: avoid; break-inside: avoid; -webkit-break-after: avoid; -webkit-break-before: avoid; -webkit-break-inside: avoid; -moz-break-after: avoid; -moz-break-before: avoid; -moz-break-inside: avoid; margin: 0 2% 12% 2%; background: #FFFFFF; box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.1); padding: 20px; color: #3D4345; display: inline-block; } .about .content .press article a { color: #3D4345; } .about .content .press article.tweet { border: solid 20px #fff; padding: 0; text-align: center; position: relative; } .about .content .press article.tweet a { line-height: 0%; display: block; } .about .content .press article.tweet .icon { position: absolute; left: calc(50% - 20px); top: 20%; width: auto; } .about .content .press article.tweet p { position: absolute; width: 80%; left: 10%; text-align: center; top: 35%; font-family: "Playfair Display", "Open Sans", sans-serif; color: #fff; font-size: 2.1rem; line-height: 3rem; font-weight: 400; } .about .content .press article.tweet .from { position: absolute; width: 80%; left: 10%; text-align: center; display: block; bottom: 10%; color: #fff; } .about .content .press article h4 { font-size: 1.8rem; margin-top: 30px; font-weight: 600; } .about .content .press article img { width: 100%; } .about .content .press article p { font-size: 1.4rem; } .about .content .press article .source { margin: 20px 0; display: block; color: #B2C0C8; font-size: 12px; } .about .content .follow { margin-bottom: 100px; } .about .content .follow h5 { color: #3D4345; font-size: 1.8rem; font-weight: 600; } .about .content .follow a { display: inline-block; width: 64px; height: 64px; background-position: center; background-color: #FFFFFF; box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1); border-radius: 50%; background-size: auto 20px; background-repeat: no-repeat; margin: 0 10px; } form .message, form .hs-error-msgs { border-radius: 3px; margin: 0px 0 20px 0; padding: 10px; display: none; } form .message.error, form .hs-error-msgs { background-color: rgba(255, 0, 0, 0.1); } form .message.success, form .success.hs-error-msgs { background-color: rgba(173, 216, 230, 0.5); } form .hs-form-field label { display: none; } form .hs-button.primary.large { border: none; } form .hs-error-msgs { list-style: none; } form .hs-error-msgs label, form .hs-error-msgs li { padding: 0; margin: 0; } form .hs-error-msgs label { display: block; } form .hs_recaptcha div:nth-child(1) { margin: 0 auto; margin-bottom: 20px; } form input, form select, form textarea { background: none; margin-bottom: 30px; font-size: 13px; } form input.hs-input, form select.hs-input, form textarea.hs-input { width: 100%; } form input:focus, form textarea:focus { outline: 0; } form input[type=text], form input[type=email] { border: 0; background: none; border-radius: 0; border-bottom: dashed 1px #979797; padding: 10px 0; } form input[type=text]:focus, form input[type=email]:focus { border: 0; border-bottom: dashed 1px #979797; } form textarea { border: 0; background: none; border: dashed 1px #979797; padding: 10px; height: 150px; } form textarea:focus { border: 0; border: dashed 1px #979797; } form input[type=submit], form .g-recaptcha { background-image: none; text-transform: none; font-size: 18px; color: #fff; font-weight: 400; -webkit-appearance: none; -moz-appearance: none; } form input[type=submit]:hover, form .g-recaptcha:hover { color: #fff; } .hs-form .success { background: #8BC34A; line-height: 50px; border-radius: 3px; color: #fff; margin: 20px 0; } .hs-form .mktoForm .mktoFormCol, .hs-form .mktoForm .mktoFieldWrap { float: none; } .hs-form .mktoForm input[type=text], .hs-form .mktoForm input[type=email] { border: 0; background: none; border-radius: 0; border-bottom: dashed 1px #979797; padding: 10px 0 !important; height: 38px; line-height: 37px; width: 100%; margin-bottom: 30px; font-size: 13px; } .hs-form .mktoForm .mktoButtonRow { width: 100%; text-align: center; } .hs-form .mktoForm .mktoFormRow:nth-child(4) { display: flex; } .hs-form .mktoForm .mktoFormRow:nth-child(4) label { float: right; margin: 0 0 30px; } .hs-form .mktoForm .mktoFormRow:nth-child(4) label p { font-weight: normal; font-size: 13px; color: #111; } .hs-form .mktoForm .mktoFormRow:nth-child(4) .mktoCheckboxList { float: right; padding: 7px 0; margin-right: 10px; } .hs-form .mktoForm .mktoButton { background: #2E54FF; width: 330px; display: inline-block; background-size: 20px; font-size: 18px; color: #fff; height: 64px; line-height: 64px; border-radius: 100px; text-align: center; border: none; margin-bottom: 60px; font-weight: normal; text-transform: capitalize; } @media only screen and (max-width: 480px) { .hs-form .mktoForm .mktoFormRow:nth-child(4) label { max-width: 90%; } .hs-form .mktoForm .mktoButton { padding: 0 !important; width: 260px; } .hs-form .mktoForm .mktoCheckboxList { width: auto; } } /*===================================== = Media queries = =====================================*/ @media all and (max-width: 840px) { header { /* background: #000000; */ background: #FFFFFF; box-shadow: 0 2px 40px 0 rgba(0, 0, 0, 0.10); position: absolute; } header.search-active .search i.icon-search { display: none; } header.search-active .search i.icon-close { display: block; } header hamburger { display: initial; } header hamburger .controls { display: block; position: initial; } header hamburger .trigger i { color: #000; } header .dropdown { display: none; } header nav { display: none; } header .cta, header form input[type=submit], form header input[type=submit], header form .g-recaptcha, form header .g-recaptcha { display: none; } header .avatar { display: none !important; } } /* Medium Devices, Desktops */ @media only screen and (max-width: 1590px) and (min-width: 1200px) { .wrapper { padding: 65px 40px 0; } .feedSlide { margin-left: -40px; margin-right: -40px; margin-bottom: 6rem; } } /* Medium Devices, Desktops */ @media only screen and (min-width: 740px) and (max-width: 1199px) { .wrapper { padding: 65px 30px 0; } .feedSlide { margin-left: -30px; margin-right: -30px; } .about .press { width: 100%; column-count: 1; column-gap: 0; column-width: 100%; -webkit-column-count: 1; -webkit-column-gap: 0; -webkit-column-width: 100%; -moz-column-count: 1; -moz-column-gap: 0; -moz-column-width: 100%; break-after: avoid; break-before: avoid; break-inside: avoid; -webkit-break-after: avoid; -webkit-break-before: avoid; -webkit-break-inside: avoid; -moz-break-after: avoid; -moz-break-before: avoid; -moz-break-inside: avoid; } } /* Small Devices, Tablets */ @media only screen and (max-width: 739px) and (min-width: 320px) { .subscribe { background: none; } .wrapper { padding: 65px 30px 0; } .feedSlide { margin-left: -30px; margin-right: -30px; margin-bottom: 6rem; margin-top: 4rem; } h1 { font-size: 5rem; } .content h1 { font-size: 3.5rem; } .cta, form input[type=submit], form .g-recaptcha { max-width: 280px; font-size: 15px; } a.video-button { display: none; } .fb-like, .fb_iframe_widget { display: none !important; } #overlay #player { width: 90%; } .container.hero { margin-top: 5vh; } .about .screens-img { display: none; } .about .press { width: 100%; column-count: 1; column-gap: 0; column-width: 100%; -webkit-column-count: 1; -webkit-column-gap: 0; -webkit-column-width: 100%; -moz-column-count: 1; -moz-column-gap: 0; -moz-column-width: 100%; break-after: avoid; break-before: avoid; break-inside: avoid; -webkit-break-after: avoid; -webkit-break-before: avoid; -webkit-break-inside: avoid; -moz-break-after: avoid; -moz-break-before: avoid; -moz-break-inside: avoid; } .about .press article { margin-left: 0; margin-right: 0; } .about .press article.tweet p { font-size: 1.3rem; line-height: 1.8rem; } } @keyframes scaleIn { 80% { opacity: 0; } 100% { transform: scaleX(1); opacity: 0; } } @keyframes slideIn { 100% { transform: translateY(0); opacity: 1; } } @keyframes fadeIn { 60% { opacity: 0; } 100% { opacity: 1; } } .hero { transform: translateY(-10px); opacity: 0; animation: slideIn 2s cubic-bezier(0.54, 0.46, 0.54, 0.94) forwards; } @keyframes present { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes scrollGrid { 0% { background-position: 0 0; } 100% { background-position: -2420px 0; } } /*# sourceMappingURL=style.css.map */