@charset "UTF-8"; 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; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } em { font-style: italic; } html { scroll-behavior: smooth; } table { border-collapse: collapse; border-spacing: 0; } img { display: block; width: 100%; height: auto; } sup { font-size:0.7rem; vertical-align:super; } /* outfit-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Outfit'; font-style: normal; font-weight: 300; src: url('../fonts/outfit-v11-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../fonts/outfit-v11-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* outfit-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Outfit'; font-style: normal; font-weight: 400; src: url('../fonts/outfit-v11-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../fonts/outfit-v11-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* outfit-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Outfit'; font-style: normal; font-weight: 500; src: url('../fonts/outfit-v11-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../fonts/outfit-v11-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* outfit-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Outfit'; font-style: normal; font-weight: 600; src: url('../fonts/outfit-v11-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../fonts/outfit-v11-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } a, button { cursor: pointer; } a, a:visited { color: #232323; } .container { margin-left: auto; margin-right: auto; } @media only screen and (max-width: 48rem) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media only screen and (min-width: 48rem) { .container { width: 46rem; } } @media only screen and (min-width: 62rem) { .container { width: 61rem; } } @media only screen and (min-width: 75rem) { .container { width: 71rem; } } .row { box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex: 0 1 auto; -webkit-box-flex: 0; flex: 0 1 auto; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col { box-sizing: border-box; -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem; -webkit-flex-grow: 1; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } body { background-color: #F6F7FB; background-color: #F1F5FF; color: #232323; line-height: 1.7; font-family: "Outfit", sans-serif; font-weight: 400; } header { width: 100%; padding-top: 1rem; padding-bottom: 1rem; position: relative; } header .row { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .logo.col { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } .logo a { display: inline-block; vertical-align: middle; } .logo a img { width: 12rem; vertical-align: middle; } .main-menu.col { -ms-flex-preferred-size: 66.667%; flex-basis: 66.667%; max-width: 66.667%; } /*typography*/ h1, h2, h3 { font-family: "Outfit", sans-serif; font-weight: 600; } #intro-info h2, #getfiro h2 { font-size: 2.5rem; } #intro-info h2+p, #getfiro h2+p, .alt-section h2 + p, .tech-section p.intro-text { font-size: 1.5rem; } #intro-info h3 { font-size: 2rem; line-height: 1.4; } .team-section h2, .site-section h2, .tech-section .container h2 { text-align: center; margin-bottom: 1rem; font-size: 2.5rem; } .faq-section h2, .alt-section h2 { text-align: center; margin-bottom: 1rem; font-size: 2rem; } #intro-info .open p, #intro-info .noncust p, #intro-info .privacy p { font-size: 1.5rem; } #intro-info .open p span, #intro-info .noncust p span { font-weight: 600; } @media only screen and (max-width: 75rem) { .team-section h2, .site-section h2, .tech-section .container h2, #intro-info h2, #getfiro h2 { font-size: 2.2rem; } #intro-info h2+p, #getfiro h2+p, .alt-section h2 + p, .tech-section p.intro-text { font-size: 1.35rem; } } @media only screen and (max-width: 30rem) { #intro-info h3, .faq-section h2, .alt-section h2 { font-size: 1.7rem; } #intro-info h2+p, #getfiro h2+p, .alt-section h2 + p, .tech-section p.intro-text { font-size: 1.25rem; } } /*space*/ .section { padding: 0; } .faq-section, .team-section, .site-section, .alt-section, .tech-section, .blog-section { padding-top: 6rem; } .faq-section:last-of-type, .team-section:last-of-type, .alt-section:last-of-type, .site-section:last-of-type, .tech-section:last-of-type, .blog-section:last-of-type { padding-bottom: 6rem; } @media only screen and (max-width: 38rem) { .faq-section, .team-section, .site-section, .alt-section, .tech-section, .blog-section { padding-top: 4rem; } .faq-section:last-of-type, .team-section:last-of-type, .alt-section:last-of-type, .site-section:last-of-type, .tech-section:last-of-type, .blog-section:last-of-type { padding-bottom: 4rem; } } /*nav*/ .main-menu { text-align: right; } .main-menu li.nav-item { display: inline-block; position: relative; padding: 1rem 0; } .main-menu li.nav-item a { display: block; text-decoration: none; font-size: 1rem; font-weight: 700; padding: 0.5rem 1.5rem; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; position: relative; border-radius: 100px; } .main-menu li.nav-item a:hover, .main-menu li.nav-item a:active, .main-menu li.nav-item a:focus { color: #3a76f0; background-color: #D1DFFB; } .main-menu li.nav-item ul.dropdown { background-color: #eaeefc; visibility: hidden; opacity: 0; min-width: 15rem; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; margin-left: 0; text-align: left; transition:visibility 0.3s linear, opacity 0.3s linear; -webkit-box-shadow: 0px 0px 10px 0px rgba(84,104,119,0.3); -moz-box-shadow: 0px 0px 10px 0px rgba(84,104,119,0.3); box-shadow: 0px 0px 10px 0px rgba(84,104,119,0.3); border-radius: 20px; } .main-menu li.nav-item ul.dropdown li { width: 100%; border-bottom: 1px solid #D1D4E1; } .main-menu li.nav-item ul.dropdown li:last-child { border: none; } .main-menu li.nav-item ul.dropdown li a { display: block; padding: 1rem 1.5rem; font-size: 1rem; -webkit-transition: background-color ease-out .3s; -moz-transition: background-color ease-out .3s; -o-transition: background-color ease-out .3s; transition: background-color ease-out .3s; vertical-align: middle; background: none; border-radius: 100px; margin: 0.5rem; } .main-menu li.nav-item ul.dropdown li a img { width: 1.8rem; height: 1.8rem; display: inline-block; margin-right: 0.8rem; vertical-align: middle; } .main-menu li.nav-item ul.dropdown li a:hover, .main-menu li.nav-item ul.dropdown li a:active, .main-menu li.nav-item ul.dropdown li a:focus { color: #3a76f0; background-color: #D1DFFB; } .main-menu li.nav-item:hover > ul.dropdown, .main-menu li.nav-item:focus-within > ul.dropdown .main-menu li.nav-item ul.dropdown:hover, .main-menu li.nav-item ul.dropdown:focus { visibility: visible; opacity: 1; display: block; } .main-menu li.nav-item ul.dropdown li a span { vertical-align: middle; } .burger-check, .burger-checkdropdown { display: none; } .mobile-menu { display: none; } @media only screen and (max-width: 75rem) { header .container { width: 100%; } } @media only screen and (max-width: 62rem) { .main-menu, .logo { display: none; } .mobile-menu { display: block; } .logo-mobile { display: inline-block; vertical-align: middle; } .logo-mobile img { width: 12rem; vertical-align: middle; } .hamburger { padding: 1.5rem; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger-box { width: 2rem; height: 1.5rem; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 2rem; height: 3px; background-color: #232323; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } .hamburger--spring .hamburger-inner { top: 2px; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .burger-check:checked ~ .hamburger--spring .hamburger-inner { transition-delay: 0.22s; background-color: transparent; } .burger-check:checked ~ .hamburger--spring .hamburger-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(45deg); } .burger-check:checked ~ .hamburger--spring .hamburger-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); } .burger-check:checked ~ .nav-items{ display: block; } /*.burger-check:checked + label { position: fixed; } */ .slide-nav { text-align: center; position: absolute; top: 99%; width: 100%; transition: all ease .6s; background-color: #F1F5FF; height: 0; -webkit-transition: height 500ms ease; -moz-transition: height 500ms ease; -o-transition: height 500ms ease; transition: height 500ms ease; overflow: hidden; opacity: -1; z-index: 100; box-shadow: 0 5px 5px rgba(217,220,227,0.8); } .slide-nav::-webkit-scrollbar { display: none; } label[for="mobile-burger"] { position: absolute; top: 0; right: 0; z-index: 11; } #mobile-burger:checked ~ .slide-nav { height: auto; opacity: 1; } #mobile-burger:checked ~ body { overflow: none; } .dropdown-content { display: none; } #list1:checked ~ .dropdown-content, #list2:checked ~ .dropdown-content, #list3:checked ~ .dropdown-content, #list4:checked ~ .dropdown-content { display: block; position: inherit; opacity: 1; visibility: visible; box-shadow: none; } .slide-nav .mob-item > a, .slide-nav .mob-item > label, .slide-nav .mob-item > p { font-weight: 700; font-size: 1.2rem; display: block; padding: 1rem 0; text-decoration: none; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; text-align: center; border-top: 1px solid #D9DCE3; } .slide-nav .mob-item >a, .slide-nav .mob-item > label { color: #3a76f0; } .slide-nav .mob-item label { cursor: pointer; position: relative; } .slide-nav .mob-item label:after, .slide-nav .mob-item label:before { content: ''; display: inline-block; position: absolute; top: 1.5rem; left: 2rem; width: 3px; height: 1rem; background-color: #232323; transition: all 0.2s; border-radius: 4px; } .slide-nav .mob-item label:after { transform: rotate(90deg); } .slide-nav .mob-item input:checked + label:before { transform: rotate(90deg); } .slide-nav .mob-item input:checked + label:after { background-color: #3a76f0; } .slide-nav .mob-item .dropdown-content li a { font-weight: 700; font-size: 1rem; display: block; padding: 1rem 0; text-decoration: none; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; text-align: left; padding-left: 6rem; border-bottom: 1px solid #fff; } .slide-nav .mob-item > a:hover, .slide-nav .mob-item > a:focus, .slide-nav .mob-item > a:active, .slide-nav .mob-item > label:hover, .slide-nav .mob-item > label:focus, .slide-nav .mob-item > label:active, .slide-nav .mob-item > input:checked + label, .slide-nav .mob-item .dropdown-content li a:hover, .slide-nav .mob-item .dropdown-content li a:focus, .slide-nav .mob-item .dropdown-content li a:active { color: #3a76f0; } .logo-mobile img { width: 11rem; } .slide-nav .mob-item:last-of-type > p { padding-top: 2rem; } .slide-nav .mob-item .nav-social-mob { padding-bottom: 2rem; } .slide-nav .mob-item li { display: inline-block; margin: 0 0.5rem; } .slide-nav .mob-item .sub-nav-item { display: block; background-color: #D1DFFB; border-radius: 50%; padding: 1rem; width: 1.8rem; height: 1.8rem; } .slide-nav .mob-item .sub-nav-item svg { fill: #3a76f0; } } @media only screen and (max-width: 48rem) { header .container { padding: 0; } } /*intro*/ #intro .container > .row { -ms-flex-align: center; -webkit-box-align: center; align-items: center; height: 100%; min-height: 60vh; padding: 6rem 0; } #intro .intro-img, #intro .intro-info { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } #intro .intro-img { padding: 0; } #intro .intro-img img { width: 100%; } #intro .intro-info.imgi { display: none; } #intro .intro-info h1 { font-size: 2.5rem; line-height: 1.3; } #intro .intro-info h1 + p { font-size: 1.5rem; margin-top: 1rem; line-height: 1.5; color: #232323; } #intro .download-btn { margin-top: 2rem; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: start; } #intro .download-btn a { margin-right: 1rem; text-decoration: none; } .btn-primary, .btn-primary:visited, .blog-section .col.post-page .post-body p a.btn-primary { background-color: #3a76f0; color: #ffffff; border-radius: 100px; text-decoration: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: 500; font-family: inherit; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; position: relative; } .btn-primary:before, .btn-primary:visited:before, .blog-section .col.post-page .post-body p a.btn-primary:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100px; height: 0; width: 0; background-color: rgba(255,255,255,0.3); -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; opacity: 0; } .btn-primary:hover:before, .btn-primary:active:before, .btn-primary:focus:before, .blog-section .col.post-page .post-body p a.btn-primary:hover:before, .blog-section .col.post-page .post-body p a.btn-primary:active:before, .blog-section .col.post-page .post-body p a.btn-primary:focus:before { opacity: 1; height: 100%; width: 100%; } .btn-secondary, .btn-secondary:visited { background-color: #D1DFFB; color: #3a76f0; border-radius: 100px; text-decoration: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: 500; font-family: inherit; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; position: relative; } .btn-secondary:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 0; width: 0; border-radius: 100px; background-color: rgba(87,125,233,0.2); -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; opacity: 0; } .btn-secondary:hover:before, .btn-secondary:active:before, .btn-secondary:focus:before { opacity: 1; height: 100%; width: 100%; } @media only screen and (min-width: 112rem) { #intro .intro-img img { width: 100%; } } @media only screen and (max-width: 112rem) { #intro .intro-img img { width: 100%; } #intro .intro-info h1 { font-size: 3rem; } } @media only screen and (max-width: 87rem) { #intro .intro-info h1 { font-size: 2.7rem; } #intro .intro-info h1 + p { font-size: 1.2rem; line-height: 1.5; } } @media only screen and (max-width: 75rem) { #intro .intro-info h1 { font-size: 2.5rem; } #intro .intro-info h1 + p { width: auto; } } @media only screen and (max-width: 62rem) { #intro .intro-img, #intro .intro-info { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; text-align: center; } #intro .intro-info h1 br { display: none; } #intro .intro-info h1 + p { font-size: 1.5rem; } #intro .intro-info .download-btn { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #intro .intro-img { display:none; } #intro .download-btn a { margin-right: 0.5rem; margin-left: 0.5rem; text-decoration: none; } } @media only screen and (max-width: 48rem) { #intro .intro-img { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; margin-top: 3rem; } #intro .intro-img img { width: 50%; margin-left: auto; margin-right: auto; } #intro .row { background-repeat: no-repeat; background-size: cover; background-position: top left; } #intro .intro-info { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; text-align: center; padding: 0; } #intro .intro-info h1 { padding: 0 1rem; } #intro .intro-info h1 + p { padding: 0 1rem; } #intro .download-btn { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; text-align: center; } #intro .download-badge { width: 12rem; margin: 1rem 0.5rem; } } @media only screen and (max-width: 37rem) { #intro .intro-info h1 { font-size: 2rem; } #intro .intro-info h1 + p { font-size: 1.2rem; } #intro .container > .row { padding: 4rem 0; } #intro .download-btn a { margin: 1rem 0.5rem 0 0.5rem; text-decoration: none; } #intro .intro-info .download-btn { margin-top: 1rem; } } /*shorts*/ #shorts { padding-top: 4rem; padding-bottom: 3rem; } #shorts .container > .row { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } .short-item { background-color: #fcfdff; padding: 2rem; border-radius: 20px; -ms-flex-preferred-size: 32%; flex-basis: 32%; max-width: 22.5rem; } .short-item.row { -ms-flex-align: center; -webkit-box-align: center; align-items: center; -ms-flex-pack: start; -webkit-box-pack: start; justify-content: start; } .short-item img { max-width: 5rem; } .short-item h3 { font-size: 1.1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; } @media only screen and (max-width: 75rem) { .short-item { padding: 1.5rem; max-width: 19.66rem; } } @media only screen and (max-width: 62rem) { #shorts { display: none; } } /*features*/ #features .container { position: relative; padding-top: 5rem; } #intro-info h2 { display: inline-block; background-color: #dfebf2; padding: 1rem 1.5rem 1rem 0; position: relative; margin-bottom: 2rem; } #intro-info h2:before { content: ""; background-color: #dfebf2; height: 100%; width: 9999px; position: absolute; right: 100%; top: 0; z-index: -1; } #intro-info .row { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } #intro-info .col-img { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } #intro-info .noncust, #intro-info .privacy { padding-top: 3rem; } #intro-info .open h3 span { color: #E7B408; } #intro-info .noncust h3 span { color: #FF4B00; } #intro-info .privacy h3 span { color: #3030D0; } #intro-info .col-info { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; padding-left: 2rem; } #intro-info h3, #intro-info h3 + p { margin-bottom: 1rem; } @media only screen and (max-width: 62rem) { #features .container { padding-top: 0; } #features .row { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #features #intro-info .col-img, #features #intro-info .col-info { -ms-flex-preferred-size: 60%; flex-basis: 60%; max-width: 60%; } #features #intro-info .col-info { text-align: center; padding: 0; } #intro-info .open p, #intro-info .noncust p, #intro-info .privacy p { font-size: 1.2rem; } #intro-info .col-info { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; margin-top: 2rem; } #intro-info .noncust .col-img { -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } } @media only screen and (max-width: 48rem) { #intro-info .open, #intro-info .noncust, #intro-info .privacy { padding-top: 3rem; } } @media only screen and (max-width: 37rem) { #features #intro-info .col-img, #features #intro-info .col-info { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } #features #intro-info h3, #Features #intro-info h3 + p { margin-bottom: 0; } } #moreinfo { padding-top: 10rem; } #moreinfo .container { background: #ffffff; border-radius: 32px; } #moreinfo .container > .row { -ms-flex-align: center; -webkit-box-align: center; align-items: center; padding: 4rem; } #moreinfo .container .col:last-child { padding-left: 2rem; padding-right: 0; } #moreinfo .container .col img { width: 90%; } #moreinfo .container .col h2 { font-size: 2rem; margin-bottom: 0.5rem; } #moreinfo .container .col p { font-size: 1.1rem; } #moreinfo .container .col .btn-group { margin-top: 2rem; } #moreinfo .container .col .btn-group a { margin-right: 1rem; width: 8rem; text-align: center; } @media only screen and (max-width: 75rem) { #moreinfo .container > .row { padding: 3rem; } #moreinfo .container .col .btn-group a { min-width: 7rem; padding: 1rem 1.5rem; } } @media only screen and (max-width: 62rem) { #moreinfo { padding-top: 8rem; } #moreinfo .container .col { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; text-align: center; } #moreinfo .container .col:last-child { order: -1; padding: 0; } #moreinfo .container .col:first-child { margin-top: 2rem; } #moreinfo .container .col:first-child img { margin: 0 auto; } #moreinfo .container .col .btn-group { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 0; } #moreinfo .container .col .btn-group a { margin: 1rem 0.5rem 0 0.5rem; } } @media only screen and (max-width: 48rem) { #moreinfo .container { border-radius: 0; padding-top: 6rem; padding-bottom: 6rem; } #moreinfo .container > .row { padding: 0; } #moreinfo .container .row { padding-top: 0; padding-bottom: 0; } #moreinfo .container .col img { width: 100%; } #moreinfo .container .col h2 { line-height: 1.3; } } /*faq*/ #faq .container { position: relative; padding-top: 10rem; padding-bottom: 10rem; } #faq .container > .row { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } #faq h3 { font-size: 2rem; } .social { padding-right: 5rem; max-width: 50%; } .social p { padding-top: 1.18rem; font-size: 1.1rem; } .social .social-links { margin-top: 1rem; } .social .social-links li { display: inline-block; margin-top: 1rem; } .social .social-links li a { display: block; background-color: #D1DFFB; border-radius: 50%; padding: 1rem; width: 2rem; height: 2rem; margin-right: 1rem; position: relative; } .social .social-links li a svg path { fill: #3a76f0; } .social .social-links li a:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 0; width: 0; border-radius: 100px; background-color: rgba(87,125,233,0.2); -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; opacity: 0; } .social .social-links li a:hover:before, .social .social-links li a:active:before, .social .social-links li a:focus:before { opacity: 1; height: 100%; width: 100%; } .accordion { padding: 0; z-index: 1; max-width: 50%; border-bottom: 1px solid #D1D4E1; border-top: 1px solid #D1D4E1; } @media only screen and (max-width: 62rem) { #faq .col { padding: 0; } #faq h3 { text-align: center; } .accordion { margin-bottom: 2rem; margin-top: 2rem; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; order: -1; } .social { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; margin-bottom: 2rem; } .social p { padding-top: 0; } .social .social-links { text-align: center; } } @media only screen and (max-width: 48rem) { } @media only screen and (max-width: 37rem) { } .accordion h3 { font-size: 1.5rem; font-family: 'Outfit', sans-serif; font-weight: 700; line-height: 1.2; } .accordion__item { display: block; padding: 1.5rem 0; cursor: pointer; overflow: hidden; transition: all 150ms ease; } .accordion__item:not(:last-child) { border-bottom: 1px solid #D1D4E1; } .accordion__item:last-child { margin-bottom: 0; } .accordion__title { font-size: 1.1rem; line-height: 1; transition: all 150ms ease; position: relative; padding-right: 30px; font-weight: 700; } .accordion__title::after, .accordion__title::before { content: ""; width: 16px; height: 2px; background-color: #666; position: absolute; right: 0; top: 8px; transition: all 150ms ease; } .accordion__title::after { transform: rotate(90deg); } .accordion__content { transform: translateY(50%); color: #232323; font-size: 1.1rem; line-height: 1.5; max-height: 0; opacity: 0; transition: all 150ms ease; } .accordion__item [type=checkbox], .accordion__item [type=radio] { display: none; } .accordion__item [type=radio]:checked + .accordion__title, .accordion__item [type=checkbox]:checked + .accordion__title { margin-bottom: 1rem; } .accordion__item [type=radio]:checked + .accordion__title::after, .accordion__item [type=checkbox]:checked + .accordion__title::after { transform: rotate(-180deg); } .accordion__item [type=radio]:checked + .accordion__title::before, .accordion__item [type=checkbox]:checked + .accordion__title::before { transform: rotate(-180deg); } .accordion__item [type=radio]:checked + .accordion__title + .accordion__content, .accordion__item [type=checkbox]:checked + .accordion__title + .accordion__content { transform: translateY(0); max-height: none; opacity: 1; } /* privacy policy*/ .policy { max-width: 40rem; margin-left: auto; margin-right: auto; } .policy h1 { font-size: 2rem; } .policy p.p-summary { padding: 0; } .policy h2 { font-size: 1.2rem; } .policy p { padding-top: 1rem; } .policy ul { list-style: disc; padding-left: 2rem; } @media only screen and (max-width: 48rem) { .policy { max-width: 100%; padding: 0; } } /*blog*/ .page-intro { padding: 6rem 0 2rem 0; } .page-intro h1 { font-size: 3rem; font-family: "Outfit", sans-serif; font-weight: 700; } .page-intro .col { padding: 0 3rem; } .page-intro .title { } .page-intro .subtitle { } .page-intro .subtitle p { font-size: 1.5rem; margin-top: 1.5rem; line-height: 1.5; } .blog-section { padding-top: 4rem; } .blog-section:last-of-type { padding-bottom: 6rem; } @media only screen and (max-width: 75rem) { .page-intro .col { padding: 0 2.5rem; } } @media only screen and (max-width: 62rem) { .page-intro .col { padding: 0 2.5rem; } .page-intro h1 { font-size: 2rem; } .page-intro .subtitle p { font-size: 1.2rem; margin-top: 1rem; } } @media only screen and (max-width: 48rem) { .page-intro .col { padding: 0 2.5rem; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; padding: 0 1.5rem; } .page-intro h1 { font-size: 2.5rem; line-height: 1.2; } } @media only screen and (max-width: 38rem) { .blog-section { padding-top: 4rem; } .blog-section:last-of-type { padding-bottom: 4rem; } } .blog-section .row { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } .blog-section .col.post-section { background-color: #ffffff; margin-top: 2rem; border-radius: 32px; flex-basis: 33rem; padding: 2rem; text-decoration: none; max-width: 50%; } .blog-section .col.post-section:nth-child(2n+1) { margin: 1rem; } .blog-section .col.post-section:nth-child(2n) { margin: 1rem; } .blog-section .col.post-section img { border-radius: 8px; margin-bottom: 1rem; } .blog-section .col.post-section p.post-date, .blog-section .col.post-page .post-meta p { color: #A9ACAC; margin-bottom: 0.5rem; } .blog-section .col.post-section h2 { font-size: 1.8rem; line-height: 1.3; } .blog-section .col.post-section p.post-summary, .blog-section .post-page .p-summary { font-size: 1rem; color: #A9ACAC; padding-top: 0.5rem; } .blog-section .col.post-section a.post-link img { margin-top: 1.5rem; border-radius: 16px; } .blog-section .pagination { text-align: center; font-size: 1.2rem; } .blog-section .pagination .btn-secondary { padding: 0.5rem 1rem; min-width: 4rem; display: inline-block; margin-left: 1rem; margin-right: 1rem; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; } @media only screen and (max-width: 75rem) { .blog-section .col.post-section { flex-basis: 29.5rem; } .blog-section .col.post-section:nth-child(2n+1) { margin: 0.5rem; } .blog-section .col.post-section:nth-child(2n) { margin: 0.5rem; } } @media only screen and (max-width: 62rem) { .blog-section .col.post-section { flex-basis: 22rem; } .blog-section .col.post-section h2 { font-size: 1.5rem; } } @media only screen and (max-width: 48rem) { .blog-section .col.post-section { flex-basis: 100%; max-width: 100%; padding: 1.5rem; border-radius: 16px; } .blog-section .col.post-section h2 { font-size: 1.5rem; } .blog-section .col.post-section:nth-child(2n+1) { margin: 1.5rem 0; } .blog-section .col.post-section:nth-child(2n) { margin: 1.5rem 0; } } .container.post-wrap { width: 50rem; } .blog-section .post-page p.post-date { color: #A9ACAC; } .blog-section .post-page h1 { font-size: 2rem; line-height: 1.3; margin-top: 1rem; } .blog-section .col.post-page .post-body img { max-width: 100%; width: auto; border-radius: 8px; margin-top: 1.5rem; } .blog-section .col.post-page .post-body h2 { font-size: 1.5rem; margin-top: 3rem; margin-bottom: -1rem; font-weight: 700; line-height: 1.3; } .blog-section .col.post-page .post-body h3 { font-size: 1.5rem; font-family: "Outfit", sans-serif; margin-bottom: -1rem; margin-top: 2rem; line-height: 1.5; } .blog-section .col.post-page .post-body h4 { font-size: 1.5rem; font-family: "Outfit", sans-serif; margin-bottom: -1rem; margin-top: 2rem; line-height: 1.5; } .blog-section .col.post-page .post-body p, .blog-section .col.post-page .post-body table { font-size: 1.2rem; padding-top: 2rem; width: 100%; } .blog-section .col.post-page .post-body table { margin-top: 2rem; } .blog-section .col.post-page .post-body table td, th { padding: 1rem 2rem; text-align: left; background: #e1e7fb; } .blog-section .col.post-page .post-body table tr { border-bottom: 1px solid #F1F5FF; } .blog-section .col.post-page .post-body p a { text-decoration: none; color: #3a76f0; border-bottom: 1.5px dashed #3a76f0; } .blog-section .col.post-page .post-body ul { list-style: disc; padding-top: 2rem; padding-left: 2rem; } .blog-section .col.post-page .post-body ul ul { list-style: circle; padding-top: 0; } .blog-section .col.post-page .post-body ol ul { list-style: circle; padding-top: 0; } .blog-section ol, .guide-section ol { list-style: decimal; margin-top: 2rem; padding-left: 2rem; } .blog-section .col.post-page .post-body ul li, .blog-section .col.post-page .post-body ol li { font-size: 1.2rem; } .blog-section .col.post-page .post-body ul li a, .blog-section .col.post-page .post-body ol li a { color: #3a76f0; text-decoration: none; border-bottom: 1px solid #3a76f0; } .blog-section .col.post-page .post-body ul p, .blog-section .col.post-page .post-body ol p { display: block; padding-top: 0; } .blog-section .col.post-page .post-body code { display: block; overflow: auto; padding: 1.5rem; white-space: pre; background-color: #e1e7fb; font: 0.9rem andale mono,Courier,courier new,monospace; margin-top: 1rem; margin-bottom: 1rem; border-radius: 8px; font-weight: 700; color: #455074; line-height: 1.5; } blockquote { background: #e1e7fb; margin: 2rem 0 0 0; padding: 1.5rem 1.5rem 1.5rem 6rem; quotes: "\201C""\201D""\2018""\2019"; position: relative; border-radius: 20px; color: #455074; } blockquote:before { content: ' \201C'; display: inline-block; position: absolute; top:-0.5rem; left: 2rem; margin-right: 1rem; font-size: 6rem; color: #3a76f0; font-weight: 700; } blockquote p { padding-top: 0 !important; } @media only screen and (max-width: 48rem) { .page-intro { padding-top: 3rem; } .blog-section { padding-top: 3rem; } .blog-section .container { width: auto; margin-left: auto; margin-right: auto; } .blog-section .post-page { padding: 0; } .blog-section .row:first-child .col.post-section { margin-top: 0; } .blog-section .col.post-section a.post-link h2, .blog-section .post-page h1 { font-size: 1.8rem; } .blog-section .col.post-page .post-body h2 { font-size: 1.7rem; } .blog-section .col.post-section .post-tag { margin-top: 1.5rem; } .blog-section .col.post-section .post-tag a { display: inline-block; } } @media only screen and (max-width: 45rem) { .blog-section { padding-top: 0; } } @media only screen and (max-width: 30rem) { .blog-section .col.post-section a.post-link h2, .blog-section .post-page h1 { font-size: 1.7rem; } } /* footer */ footer { background-color: #3a76f0; padding: 1rem; } footer .row { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } footer .fsocial { text-align: center; } footer .fsocial li { display: inline-block; margin: 0.5rem 0.5rem 0 0.5rem; } footer .fsocial li a { display: block; width: 1.8rem; height: 1.8rem; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; } footer .fsocial li a svg { fill: #ffffff; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; } footer .fsocial li a:hover svg { fill: #89a4ef; } footer .col:last-child { text-align: right; padding-right: 0; } footer .col:last-child p a { margin: 0 0 0 1rem; } footer p { font-size: 0.9rem; color: #ffffff; display: inline-block; } footer p a, footer p a:visited { margin-right: 1rem; text-decoration: none; font-size: 0.9rem; color: #ffffff; display: block; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; } footer p a:hover, footer p a:focus, footer p a:active { color: #89a4ef; } @media only screen and (max-width: 62rem) { footer .col { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; text-align: center; padding: 0; margin-top: 1rem; } footer .col:last-child { text-align: center; } footer .col:last-child p a { margin: 0; padding: 0.5rem; } footer .col:nth-child(1) { order: 3; margin-bottom: 1rem; } footer .col:nth-child(2) { order: 1; } footer .col:nth-child(3) { order: 2; } } @media only screen and (max-width: 48rem) { footer .pre-footer { padding-left: 0.5rem; padding-right: 0.5rem; } footer .bottom-row .col { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; padding-left: 0; padding-right: 0; text-align: center; } footer .bottom-row .col:last-child { text-align: center; -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } footer .bottom-row p:last-of-type a{ margin-right: 0; } } @media only screen and (max-width: 38rem) { footer .social { padding-top: 0; } footer .pre-footer .col:first-child, footer .pre-footer .col:last-child { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } footer .pre-footer .col:last-child { margin-top: 1rem; } }