From 67fc52788156acb45173df4a1fa625e4489ade50 Mon Sep 17 00:00:00 2001 From: randomie Date: Thu, 5 Dec 2024 19:30:33 +0000 Subject: [PATCH] homepage: improve contrast --- css/style.css | 5126 ++++++++++++++++++++++++------------------------- 1 file changed, 2563 insertions(+), 2563 deletions(-) diff --git a/css/style.css b/css/style.css index bf99997..efa3bb5 100644 --- a/css/style.css +++ b/css/style.css @@ -1,2563 +1,2563 @@ -@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; -} - -/* noto-sans-regular - latin */ -@font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 400; - src: url('../fonts/noto-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/noto-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/noto-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/noto-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/noto-sans-v27-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */ - } - - /* noto-sans-700 - latin */ - @font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 700; - src: url('../fonts/noto-sans-v27-latin-700.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/noto-sans-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/noto-sans-v27-latin-700.woff') format('woff'), /* Modern Browsers */ - url('../fonts/noto-sans-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/noto-sans-v27-latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */ - } - - /* noto-sans-800 - latin */ - @font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 800; - src: url('../fonts/noto-sans-v27-latin-800.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/noto-sans-v27-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/noto-sans-v27-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/noto-sans-v27-latin-800.woff') format('woff'), /* Modern Browsers */ - url('../fonts/noto-sans-v27-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/noto-sans-v27-latin-800.svg#NotoSans') format('svg'); /* Legacy iOS */ - } - - @font-face { - font-family: 'stack-icons'; - src: url('../fonts/stack-icons.eot?77736380'); - src: url('../fonts/stack-icons.eot?77736380#iefix') format('embedded-opentype'), - url('../fonts/stack-icons.woff2?77736380') format('woff2'), - url('../fonts/stack-icons.woff?77736380') format('woff'), - url('../fonts/stack-icons.ttf?77736380') format('truetype'), - url('../fonts/stack-icons.svg?77736380#stack-icons') format('svg'); - font-weight: normal; - font-style: normal; - } - - [class^="icon-"]:before, [class*=" icon-"]:before { - font-family: "stack-icons"; - font-style: normal; - font-weight: normal; - speak: never; - display: inline-block; - text-decoration: inherit; - text-align: center; - font-variant: normal; - text-transform: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - .icon-discord:before { content: '\e800'; } /* '' */ - .icon-telegram-arrow:before { content: '\e801'; } /* '' */ - .icon-twitter:before { content: '\f099'; } /* '' */ - .icon-github:before { content: '\f09b'; } /* '' */ - .icon-mail-alt:before { content: '\f0e0'; } /* '' */ - .icon-youtube:before { content: '\f16a'; } /* '' */ - .icon-apple:before { content: '\f179'; } /* '' */ - .icon-android:before { content: '\f17b'; } /* '' */ - .icon-reddit-1:before { content: '\f1a1'; } /* '' */ - .icon-reddit:before { content: '\f281'; } /* '' */ - .icon-telegram:before { content: '\f2c6'; } /* '' */ - - - -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: #F7F7F7; - color: #232323; - line-height: 1.7; - font-family: "Noto Sans", 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: "Noto Sans", sans-serif; - font-weight: 800; -} - -#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.1rem; -} - -#intro-info .open p span, #intro-info .noncust p span { - font-weight: 800; -} - -@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; - margin-left: 1.8rem; - margin-right: 1.8rem; -} - -.main-menu li.nav-item a { - display: block; - text-decoration: none; - font-size: 1rem; - font-weight: 700; - color: #232323; - -webkit-transition: all ease-out .2s; - -moz-transition: all ease-out .2s; - -o-transition: all ease-out .2s; - transition: all ease-out .2s; -} - -.main-menu li.nav-item.link > a:after { - -ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; - -webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; - transition: transform .3s ease-out,border-color .3s ease-out; - position: absolute; - display: block; - bottom: 0.7rem; - left: 0; - width: 100%; - -ms-transform: scaleX(0); - -webkit-transform: scaleX(0); - transform: scaleX(0); - border-top: 2px solid #232323; - content: ''; - padding-bottom: inherit; -} - -.main-menu li.nav-item.link:hover > a:after { - -ms-transform: scaleX(1); - -webkit-transform: scaleX(1); - transform: scaleX(1); -} - -.main-menu li.nav-item:not(.link) > a:after { - position: absolute; - display: block; - bottom: 0.7rem; - left: 50%; - transform: translate(-50%); - content: ''; - padding-bottom: inherit; - width: 4px; - height: 4px; - background-color: #232323; - border-radius: 20px; - opacity: 0; - visibility: hidden; - transition:visibility 0.3s linear, opacity 0.3s linear; -} - -.main-menu li.nav-item:not(.link):hover > a:after { - opacity: 1; - visibility: visible; -} - -.main-menu li.nav-item ul.dropdown { - background: #F7F7F7; - visibility: hidden; - opacity: 0; - width: 30rem; - 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: 8px; - padding: 1rem; -} - -.main-menu li.nav-item ul.dropdown .row { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - flex-wrap: wrap; - margin-bottom: 1rem; -} - -.main-menu li.nav-item ul.dropdown .row:last-child { - margin-bottom: 0; -} - -.main-menu li.nav-item ul.dropdown .col { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; - padding: 0; -} - -.main-menu li.nav-item ul.dropdown li { - width: 100%; -} - -.main-menu li.nav-item ul.dropdown .systemlink a { - padding: 1rem 1rem 1rem 3rem; - position: relative; - border-radius: 8px; -} - -.main-menu li.nav-item ul.dropdown .systemlink a svg, .main-menu li.nav-item ul.dropdown .systemlink a img { - width: 1.5rem; - position: absolute; - top: 1rem; - left: 1rem; -} - -.main-menu li.nav-item ul.dropdown .systemlink a .systext p.system-title { - font-size: 1rem; - border-bottom: 2px solid rgba(0,0,0,0); - display: inline-block; - line-height: 1.3; -} - -.main-menu li.nav-item ul.dropdown .systemlink .systext p.system-about { - font-weight: 400; - font-size: 0.75rem; - margin-top: 0.25rem; - line-height: 1.5; -} - -.main-menu li.nav-item ul.dropdown .droptitle { - font-weight: 700; - font-size: 0.9rem; - margin-bottom: 0.5rem; - margin-top:0.5rem; - color: #232323; -} - -.main-menu li.nav-item ul.dropdown li a { - display: flex; - padding: 1rem; - 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; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; -} - -.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 { - background-color: rgba(35,35,35,.05); -} - -.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 .systemlink a:hover .systext p.system-title, .main-menu li.nav-item ul.dropdown .systemlink a:active .systext p.system-title, .main-menu li.nav-item ul.dropdown .systemlink a:focus .systext p.system-title { - border-bottom: 2px solid #232323; - color: #232323; - transition: border-bottom-color .1s ease-in-out; -} - -.main-menu li.nav-item ul.dropdown li a span { - vertical-align: middle; -} - -.main-menu li.nav-item ul.dropdown li a span.downicon { - width: 2rem; - height: 2rem; - display: inline-block; - margin-right: 0.2rem; -} - -.main-menu li.nav-item ul.dropdown li:nth-child(1) a span.downicon { - background-image: url(../img/apple-icon.svg); - background-size: contain; -} - -.main-menu li.nav-item ul.dropdown li:nth-child(2) a span.downicon { - background-image: url(../img/playstore-icon.svg); - background-size: contain; -} - -.main-menu li.nav-item ul.dropdown li:nth-child(3) a span.downicon { - background-image: url(../img/android-icon.svg); - background-size: contain; -} - -.main-menu li.nav-item ul.dropdown li:nth-child(4) a span.downicon { - background-image: url(../img/fdroid-icon.svg); - background-size: contain; -} - -.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 { - position: absolute; - top: 99%; - width: 100%; - transition: all ease .6s; - background-color: #F7F7F7; - 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 4px 5px rgba(0,0,0,0.25); - padding: 1rem 0; - } - - .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: flex; - position: inherit; - opacity: 1; - visibility: visible; - box-shadow: none; - } - - .slide-nav .mob-item { - padding: 0 1.5rem; - } - - .slide-nav .mob-item > a, .slide-nav .mob-item > label { - 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; - border-top: 1px solid #CFCFCF; - } - - .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; - right: 1rem; - 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: #232323; - } - - /*.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: #232323; - } - - .slide-nav .mob-item .dropdown-content.row { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - flex-wrap: wrap; - margin-bottom: 1rem; - } - - .slide-nav .mob-item .dropdown-content li.systemlink { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; - padding: 0; - } - - .slide-nav .mob-item .dropdown-content li a { - padding: 1rem 1rem 1rem 3rem; - border-radius: 8px; - position: relative; - display: flex; - 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; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - text-decoration: none; - } - - .slide-nav .mob-item .dropdown-content li a:hover, .slide-nav .mob-item .dropdown-content li a:active, .slide-nav .mob-item .dropdown-content li a:focus { - background-color: rgba(35,35,35,.05); - } - - .slide-nav .mob-item .dropdown-content li a svg, .slide-nav .mob-item .dropdown-content li a img { - width: 1.5rem; - position: absolute; - top: 1rem; - left: 1rem; - } - - .slide-nav .mob-item .dropdown-content li a .systext p.system-title { - font-size: 1rem; - border-bottom: 2px solid rgba(0,0,0,0); - display: inline-block; - line-height: 1.3; - font-weight: 700; - } - - .slide-nav .mob-item .dropdown-content li .systext p.system-about { - font-weight: 400; - font-size: 0.8rem; - margin-top: 0.25rem; - line-height: 1.5; - } - - .logo-mobile img { - width: 11rem; - } - -} - -@media only screen and (max-width: 48rem) { - - header .container { - padding: 0; - } - -} - -@media only screen and (max-width: 32rem) { - - .slide-nav .mob-item .dropdown-content li.systemlink { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - 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: 3rem; - line-height: 1.3; -} - -#intro .intro-info h1 + p { - width: 35rem; - font-size: 1.2rem; - margin-top: 1rem; - line-height: 1.5; -} - -#intro .download-btn a { - display: inline-block; - text-decoration: none; - font-size: 1rem; - font-weight: 700; - color: #ffffff; - background-color: #232323; - border-radius: 4rem; - padding: 1rem 2rem; - line-height: 1.5; - margin-top: 2rem; - letter-spacing: 0.5px; - -webkit-transition: all ease-out .3s; - -moz-transition: all ease-out .3s; - -o-transition: all ease-out .3s; - transition: all ease-out .3s; -} - -#intro .download-btn a svg { - vertical-align: middle; - margin-left: 1rem; -} - -#intro .download-btn a - -#intro .download-btn a:hover, #intro .download-btn a:active, #intro .download-btn a:focus { - background-color: #383838; -} - - -.download-badge { - width: 12rem; - height: 4rem; - display: block; - margin-top: 1rem; - margin-right: 1rem; -} - -.download-ios { - background: url(../img/app-store-badge.svg); - background-size: contain; - background-repeat: no-repeat; -} - -.download-playstore { - background: url(../img/google-play-badge.svg); - background-size: contain; - background-repeat: no-repeat; -} - -.download-android { - background: url(../img/android-apk-badge.svg); - background-size: contain; - background-repeat: no-repeat; -} - -.download-fdroid { - background: url(../img/fdroid-badge.svg); - background-size: contain; - background-repeat: no-repeat; -} - -@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; -} - -#intro .download-badge { - width: 10rem; - height: 3.375rem; -} - -} - -@media only screen and (max-width: 62rem) { - -#intro .intro-info h1 + p { - font-size: 1.1rem; -} - -#intro .download-badge { - width: 9rem; -} - -} - -@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 .download-btn { - display: block; - text-align: center; - } - - #intro .download-btn a { - margin: 2rem 3rem 0 3rem; - display: inline-block; - } - - #intro .download-badge { - width: 10rem; - margin: 0 0.5rem; - } - - #intro .intro-img img { - width: 70%; - } - -} - -@media only screen and (max-width: 30rem) { - -#intro .container > .row { - -ms-flex-align: center; - -webkit-box-align: center; - align-items: center; - height: 100%; - min-height: 60vh; - padding: 3rem 0; -} - -#intro .download-btn a span { - display: none; -} - -} - -/*downloads*/ - -#download .container { - position: relative; - padding-top: 10rem; - padding-bottom: 6rem; -} - -#download .container:before { - content: 'download'; - display; block; - color: gainsboro; - font-family: 'Noto Sans', sans-serif; - font-weight: 700; - font-size: 10rem; - position: absolute; - top: 0; - left: -12rem; - z-index: -1; - line-height: 1; - opacity: 0.5; -} - -#download .row.system-cards { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; - margin-top: 3rem; -} - -#download .row.system-cards .card { - -ms-flex-preferred-size: 32%; - flex-basis: 32%; - max-width: 22.5rem; - margin-bottom: 1.75rem; - background: #ffffff; - border-radius: 32px; - padding: 2rem; -} - -@media only screen and (max-width: 75rem) { - #download .row.system-cards .card { - -ms-flex-preferred-size: 32%; - flex-basis: 32%; - max-width: 19.33rem; - margin-bottom: 1.5rem; - } - - #download .card h3 { - font-size: 1.3rem; - } - - #download .card p { - height: 6rem; - } -} - -@media only screen and (max-width: 62rem) { - #download .row.system-cards .card { - -ms-flex-preferred-size: 48%; - flex-basis: 48%; - max-width: 48%; - margin-bottom: 1.5rem; - } -} - -@media only screen and (max-width: 40rem) { - #download .row.system-cards .card { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - margin-bottom: 1.5rem; - } -} - -#download .card.feature-icon img, #download .card.feature-icon svg { - width: 3rem; - margin-bottom: 2rem; -} - -#download .card h3, #download .card-long h3 { - font-size: 1.5rem; - font-family: 'Noto Sans', sans-serif; - font-weight: 700; - line-height: 1.2; -} - -#download .card p { - font-size: 1rem; - font-family: 'Noto Sans', sans-serif; - font-weight: 400; - margin-top: 0.75rem; - line-height: 1.6; -} - -#download .card a { - text-decoration: none; - color: #3030D0; - font-weight: 700; - margin-top: 2rem; - display: inline-block; - line-height: 1.3; - -webkit-transition: all ease-out .3s; - -moz-transition: all ease-out .3s; - -o-transition: all ease-out .3s; - transition: all ease-out .3s; -} - -#download .card.feature-icon a svg { - margin: 0 0 0 0.25rem; - width: 1.125rem; - vertical-align: middle; -} - -#download .card a:hover, #download .card a:active, #download .card a:focus { - color: #5959d9; -} - -@media only screen and (max-width: 75rem) { - - #download .card h3 { - font-size: 1.3rem; - } - - #download .card p { - height: 4rem; - } - - #download .card a { - margin-top: 1rem; - } -} - -@media only screen and (max-width: 48rem) { - - #download .card h3 { - font-size: 1.2rem; - } - - #download .card p { - height: 5rem; - } -} - -@media only screen and (max-width: 40rem) { - - #download .card p { - height: auto; - } - -} - - -/*features*/ - -#features .container { - position: relative; - padding-top: 10rem; -} - -#features .container:before { - content: 'features'; - display; block; - color: gainsboro; - font-family: 'Noto Sans', sans-serif; - font-weight: 700; - font-size: 10rem; - position: absolute; - top: 0; - left: -12rem; - z-index: -1; - line-height: 1; - opacity: 0.5; -} - -#feature .container { - position: relative; - padding-top: 8rem; -} - -@media only screen and (max-width: 100rem) { - - #features .container:before, #download .container:before { - left: -2rem; - } - - #feature .container:before { - right: 0; - } - -} - -@media only screen and (max-width: 62rem) { - - #feature .container:before { - display: none; - } - - #features .container:before, #download .container:before { - font-size: 8rem; - } - - #features .container, #download .container { - padding-top: 8rem; - } - - #feature .container { - padding-top: 6rem; - } -} - -@media only screen and (max-width: 48rem) { - - #features .container:before, #download .container:before { - font-size: 8rem; - left: 1.5rem; - } - - #features .container, .download .container { - padding-top: 8rem; - } - - #feature .container { - padding-top: 4rem; - } -} - -@media only screen and (max-width: 37rem) { - - #features .container:before, #download .container:before { - font-size: 4rem; - right: 1.5rem; - } - - #features .container, #download .container { - padding-top: 4rem; - } - - #feature .container { - padding-top: 2rem; - } -} - -#feature .row.feature-cards { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; -} - -#feature .row.feature-cards .card { - -ms-flex-preferred-size: 32%; - flex-basis: 32%; - max-width: 22.5rem; - margin-bottom: 1.75rem; - background: #ffffff; - border-radius: 32px; - padding: 2rem; -} - -@media only screen and (max-width: 75rem) { - #feature .row.feature-cards .card { - -ms-flex-preferred-size: 32%; - flex-basis: 32%; - max-width: 19.33rem; - margin-bottom: 1.5rem; - } -} - -@media only screen and (max-width: 62rem) { - #feature .row.feature-cards .card { - -ms-flex-preferred-size: 48%; - flex-basis: 48%; - max-width: 48%; - margin-bottom: 1.5rem; - } -} - -@media only screen and (max-width: 37rem) { - #feature .row.feature-cards .card { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - margin-bottom: 1.5rem; - } -} - -#feature .card img.feature-icon, #feature .card-long img.feature-icon { - width: 7rem; - margin-bottom: 2rem; -} - -#feature .card h3, #feature .card-long h3 { - font-size: 1.5rem; - font-family: 'Noto Sans', sans-serif; - font-weight: 700; - line-height: 1.2; -} - -#feature .card p { - font-size: 1rem; - font-family: 'Noto Sans', sans-serif; - font-weight: 400; - margin-top: 0.75rem; - line-height: 1.6; -} - -#feature .row.feature-cards .card-long { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - margin-bottom: 1.75rem; - background: #ffffff; - border-radius: 32px; - padding: 2rem; -} - -#feature .row.feature-cards .card-long .row { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; -} - -#feature .row.feature-cards .card-long .col { - margin-top: 0.75rem; - -ms-flex-preferred-size: 45%; - flex-basis: 45%; - max-width: 45%; - padding: 1rem 0 0 0; -} - -#feature .row.feature-cards .card-long .col p { - position: relative; - padding-left: 2rem; -} - -#feature .row.feature-cards .card-long .col p:before { - content: '☑️'; - position: absolute; - left: 0; -} - -@media only screen and (max-width: 37rem) { - - #feature .row.feature-cards .card-long .col { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - } - -} - -/*support*/ - -#support .container { - position: relative; - padding-top: 15rem; - padding-bottom: 10rem; - margin-top: 8rem; -} - -#support .container:before { - content: 'support'; - display; block; - color: gainsboro; - font-family: 'Noto Sans', sans-serif; - font-weight: 700; - font-size: 10rem; - position: absolute; - top: 0; - left: -12rem; - z-index: -1; - line-height: 1; - opacity: 0.5; -} - -#support.sup-page .container { - padding-top: 0 !important; - margin-top: 0; -} - -#support.sup-page .container:before { - display: none; -} - -@media only screen and (max-width: 100rem) { - - #support .container:before { - left: -2rem; - } - -} - -#support .container > .row { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; -} - -.social-support { - background-color: #ffffff; - border-radius: 16px; - max-width: 22.5rem; - padding: 2rem; -} - -.social-support h3 { - font-size: 1.1rem; - margin-bottom: 1rem; -} - -.social-support p span { - font-weight: 800; -} - -.social-support p span span.ignore { - display: none; -} - -.social-support .social-links { - margin-top: 1rem; -} - -.social-support .social-links li { - display: block; - margin-top: 1rem; -} - -.social-support .social-links li i { - display: block; - font-size: 1.7rem; - color: #3030D0; - -webkit-transition: all ease-out .2s; - -moz-transition: all ease-out .2s; - -o-transition: all ease-out .2s; - transition: all ease-out .2s; - line-height: 1; - margin-right: 0.5rem; -} - -.social-support .social-links i.icon-session { - background-image: url(../img/session-icon.svg); - background-repeat: no-repeat; - display: inline-block; - width: 1.7rem; - height: 1.7rem; - background-size: 1.7rem 1.7rem; -} - -.social-support .social-links li:hover i { - color: #3030D0; -} - -.social-support .social-links li i, .social-support .social-links li span { - display: inline; - vertical-align: middle; -} - -.social-support .social-links li a { - text-decoration: none; - display: inline-block; - color: #3030D0; -} - -.social-support .social-links li span { - font-weight: 800; -} - -.accordion { - padding: 0; - z-index: 1; - max-width: 47rem; -} - -@media only screen and (max-width: 75rem) { - - .social-support { - max-width: 19.33rem; - } - - .accordion { - max-width: 40.17rem; - } - -} - -@media only screen and (max-width: 62rem) { - - .social-support, .accordion { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - } - - .accordion { - margin-bottom: 1.5rem; - } - - #support .container:before { - font-size: 8rem; - } - - #support .container { - padding-top: 12rem; - margin-top: 6rem; - } - -} - -@media only screen and (max-width: 48rem) { - - #support .container:before { - left: 1.5rem; - } - - #support .container { - margin-top: 4rem; - padding-bottom: 6rem; - } - -} - -@media only screen and (max-width: 37rem) { - - #support .container:before { - font-size: 4rem; - right: 1.5rem; - } - - #support .container { - padding-top: 8rem; - } -} - - - -.accordion h3 { - font-size: 1.5rem; - font-family: 'Noto Sans', sans-serif; - font-weight: 700; - line-height: 1.2; -} - - .accordion__item { - display: block; - padding: 1.5rem 2rem; - cursor: pointer; - border-radius: 12px; - overflow: hidden; - transition: all 150ms ease; - margin-bottom: 1rem; - background: #ffffff; - } - .accordion__item:not(:last-child) { - border-bottom: 1px solid #fafafa; - } - - .accordion__item:last-child { - margin-bottom: 0; - } - - .accordion__title { - font-size: 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: #737577; - font-size: 0.9rem; - 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(45deg); - } - .accordion__item [type=radio]:checked + .accordion__title::before, .accordion__item [type=checkbox]:checked + .accordion__title::before { - transform: rotate(-45deg); - } - .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; - } - - - -/*intro facts*/ - -#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%; -} - -#intro-info h3, #intro-info h3 + p { - margin-bottom: 1rem; -} - -@media only screen and (max-width: 62rem) { - -.block-facts .col img, .block-facts .col div, .block-facts .col > h4 { - display: block; -} - -.block-facts .col img { - margin-bottom: 0.5rem; - width: 3rem; -} - -#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: 38rem) { - -#intro-info.section { - padding: 4rem 0; -} - - -#intro-info .col-img { - -ms-flex-preferred-size: 70%; - flex-basis: 70%; - max-width: 70%; -} - -} - -@media only screen and (max-width: 30rem) { - -#intro-info .row:first-of-type .col { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - padding-right: 0.5rem; -} - -#intro-info .row:first-of-type .col:nth-of-type(3), #intro-info .row:first-of-type .col:nth-of-type(2) { - margin-top: 1rem; -} - -} - -@media only screen and (max-width: 26rem) { - - - -} - -@media only screen and (max-width: 23.75rem) { - -#intro-info .row:first-of-type .col { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; -} - -#intro-info .row:first-of-type .col { - margin-top: 2rem; -} - -#intro-info .row:first-of-type .col:first-of-type { - margin-top: 0; -} - -} - -/* 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 { - padding-top: 3rem; - 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; -} - -} - -/* donate */ - -.page-hero { - padding: 6rem 0; -} - -.page-hero .row { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} - -.page-hero .col { - -ms-flex-preferred-size: 70%; - flex-basis: 70%; - max-width: 70%; -} - -.page-hero h1 { - font-size: 3rem; - line-height: 1.3; - text-align: center; -} - -.page-hero p.page-hero-sub { - font-size: 1.2rem; - margin-top: 1rem; - line-height: 1.5; - text-align: center; -} - -@media only screen and (max-width: 62rem) { - -.page-hero .col { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; -} - -.page-hero p.page-hero-sub { - font-size: 1.1rem; -} - -} - -.row.doncoins { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; - padding: 0 1rem; -} - -.donate-coin { - -ms-flex-preferred-size: 48%; - flex-basis: 48%; - max-width: 48%; - margin-bottom: 2.5rem; - background: #ffffff; - border-radius: 32px; - padding: 2rem; -} - -@media only screen and (max-width: 62rem) { - -.donate-coin { - margin-bottom: 1.75rem; -} - -} - -@media only screen and (max-width: 48rem) { - -.donate-coin { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; -} - -} - -.donate-coin .row { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; -} - -.donate-coin .row .col { - padding: 0; -} - -.donate-coin .row .col:nth-child(2) img { - float: right; -} - -.donate-coin img.coin-icon { - width: 3rem; - margin-bottom: 2rem; -} - -.donate-coin img.donqr { - width: 4rem; - border-radius: 0.5rem; -} - -.donate-coin h3 { - font-size: 1.5rem; - font-family: 'Noto Sans', sans-serif; - font-weight: 700; - line-height: 1.2; -} - -.donate-coin p { - word-wrap: break-word; - user-select: all; - font-size: 1rem; - font-family: 'Noto Sans', sans-serif; - font-weight: 400; - margin-top: 0.75rem; - line-height: 1.6; -} - -/*blog*/ - -.page-intro { - padding: 6rem 0 2rem 0; -} - -.page-intro h1 { - text-align: center; - font-size: 3rem; - font-family: "Noto Sans", sans-serif; - font-weight: 800; -} - -.faq-nav .row { - -ms-flex-pack: center; - -webkit-box-pack: center; - justify-content: center; - text-align: center; -} - -.faq-nav ul li { - margin-right: 1rem; -} - -.faq-nav ul li:last-of-type { - margin-right: 0; -} - -.faq-nav ul li a { - padding: 0.5rem 1rem; - display: block; - text-decoration: none; - font-size: 1rem; - -webkit-transition: all ease-out .2s; - -moz-transition: all ease-out .2s; - -o-transition: all ease-out .2s; - transition: all ease-out .2s; - background-color: #E0E3E3; - border-radius: 100px; - min-width: 4rem; -} - -.faq-nav ul li a:hover, .faq-nav ul li a:focus, .faq-nav ul li a:active { - background-color: #CDCFD2; -} - -@media only screen and (max-width: 62rem) { - -.faq-nav ul li a { - font-size: 1rem; -} - -} - -@media only screen and (max-width: 48rem) { - -.page-intro h1 { - font-size: 2.5rem; -} - -} - -@media only screen and (max-width: 45rem) { - -.faq-nav { - display: none; -} - -.faq-nav.disclaimer { - display: block; -} - -} - -@media only screen and (max-width: 30rem) { - -} - -.blog-section { - padding-top: 4rem; -} - -.blog-section:last-of-type { - padding-bottom: 6rem; -} - -@media only screen and (max-width: 38rem) { - -.blog-section { - padding-top: 4rem; -} - -.blog-section:last-of-type { - padding-bottom: 4rem; -} - -} - -.blog-section .container { - width: 43rem; -} - -.blog-section .col.post-section { - background-color: #ffffff; - margin-top: 2rem; - border-radius: 32px; - padding: 2rem; -} - -.blog-section .col.post-section .post-meta { - margin-bottom: 1rem; -} - -.blog-section .col.post-section .post-meta p, .blog-section .col.post-page .post-meta p { - color: #A9ACAC; -} - -.blog-section .col.post-section a.post-link { - text-decoration: none; -} - -.blog-section .col.post-section a.post-link h2 { - font-size: 1.8rem; - line-height: 1.3; -} - -.blog-section .col.post-section a.post-link p, .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 .col.post-section .post-tag { - margin-top: 2rem; -} - -.blog-section .col.post-section .post-tag a { - text-decoration: none; - color: #232323; - background-color: #E0E3E3; - border-radius: 32px; - padding: 0.5rem 1rem; - margin-right: 0.5rem; - -webkit-transition: all ease-out .2s; - -moz-transition: all ease-out .2s; - -o-transition: all ease-out .2s; - transition: all ease-out .2s; -} - -.blog-section .col.post-section .post-tag a:hover, .blog-section .col.post-section .post-tag a:active, .blog-section .col.post-section .post-tag a:focus { - background-color: #CDCFD2; -} - -.blog-section .pagination { - text-align: center; - font-size: 1.2rem; -} - -.blog-section .pagination .page-button { - text-decoration: none; - color: #fff; - background-color: #232323; - padding: 0.5rem 1rem; - min-width: 4rem; - border-radius: 100px; - 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; -} - -.blog-section .pagination .page-button:hover, .blog-section .pagination .page-button:active, .blog-section .pagination .page-button:focus { - background-color: #454545; -} - -.blog-section .col.post-page .post-meta { - margin-top: 1rem; -} - -.blog-section .post-page h1 { - font-size: 1.8rem; - line-height: 1.3; - margin-top: 2rem; -} - -.blog-section .col.post-page .post-body img { - max-width: 100%; - width: auto; - filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15)); -} - -.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: "Noto Sans", 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: "Noto Sans", 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; -} - -.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: #DFEBF2; -} - -.blog-section .col.post-page .post-body table tr { - border-bottom: 1px solid #fff; -} - -.blog-section .col.post-page .post-body p a { - text-decoration: none; - color: #9b1c2e; - border-bottom: 1px solid #9b1c2e; -} - -.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 ol, .guide-section ol { - list-style: decimal; - margin-left: 1.5rem; - margin-top: 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: #9b1c2e; - text-decoration: none; - border-bottom: 1px solid #9b1c2e; -} - -.blog-section .col.post-page .post-body ul p, .blog-section .col.post-page .post-body ol p { - display: block; -} - -.blog-section .col.post-page .post-body code { - background-color: blue; - display: block; - overflow: auto; - padding: 1rem; - white-space: pre; - background-color: #DFEBF2; - font: 0.9rem andale mono,Courier,courier new,monospace; - margin-top: 1rem; -} - -.blog-section h2.tag-blog { - font-size: 2.5rem; - text-align: center; -} - -@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: #EEEFF1; -} - -footer .pre-footer { - padding: 3rem 0; -} - -footer .pre-footer .row { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; -} - -footer .pre-footer .col:first-child { - -ms-flex-preferred-size: 30%; - flex-basis: 30%; - max-width: 30%; -} - -footer .pre-footer .col:last-child { - -ms-flex-preferred-size: 65%; - flex-basis: 65%; - max-width: 65%; -} - -footer .pre-footer img.logo-foot { - width: 10rem; -} - -footer .social { - margin-top: 1rem; -} - -footer .social li { - display: inline-block; - margin-right: 0.5rem; - margin-top: 0.5rem; -} - -footer .social li i { - display: block; - font-size: 1.5rem; - color: #A9ACAC; - -webkit-transition: all ease-out .2s; - -moz-transition: all ease-out .2s; - -o-transition: all ease-out .2s; - transition: all ease-out .2s; - line-height: 1; -} - -footer .social li:hover i { - color: #3030D0; -} - -footer .pre-footer .about-foot p { - font-size: 0.8rem; - color: #A9ACAC; - padding-top: 1rem; -} - -footer .pre-footer .about-foot p:first-child { - padding-top: 0; -} - -footer .bottom-row { - background-color: #232323; - padding: 1rem 0; -} - -footer .bottom-row .col:last-child { - text-align: right; -} - -footer .bottom-row p { - font-size: 0.9rem; - color: #737577; - display: inline-block; -} - -footer .bottom-row p a { - margin-right: 1rem; - text-decoration: none; - font-size: 0.9rem; - color: #737577; - display: block; -} - -@media only screen and (max-width: 62rem) { - - footer .pre-footer .col:first-child { - -ms-flex-preferred-size: 40%; - flex-basis: 40%; - max-width: 40%; - } - - footer .pre-footer .col:last-child { - -ms-flex-preferred-size: 60%; - flex-basis: 60%; - max-width: 60%; - } - -} - -@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; -} - -} +@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; +} + +/* noto-sans-regular - latin */ +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 400; + src: url('../fonts/noto-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */ + src: local(''), + url('../fonts/noto-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/noto-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('../fonts/noto-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/noto-sans-v27-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */ + } + + /* noto-sans-700 - latin */ + @font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 700; + src: url('../fonts/noto-sans-v27-latin-700.eot'); /* IE9 Compat Modes */ + src: local(''), + url('../fonts/noto-sans-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/noto-sans-v27-latin-700.woff') format('woff'), /* Modern Browsers */ + url('../fonts/noto-sans-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/noto-sans-v27-latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */ + } + + /* noto-sans-800 - latin */ + @font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 800; + src: url('../fonts/noto-sans-v27-latin-800.eot'); /* IE9 Compat Modes */ + src: local(''), + url('../fonts/noto-sans-v27-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/noto-sans-v27-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/noto-sans-v27-latin-800.woff') format('woff'), /* Modern Browsers */ + url('../fonts/noto-sans-v27-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/noto-sans-v27-latin-800.svg#NotoSans') format('svg'); /* Legacy iOS */ + } + + @font-face { + font-family: 'stack-icons'; + src: url('../fonts/stack-icons.eot?77736380'); + src: url('../fonts/stack-icons.eot?77736380#iefix') format('embedded-opentype'), + url('../fonts/stack-icons.woff2?77736380') format('woff2'), + url('../fonts/stack-icons.woff?77736380') format('woff'), + url('../fonts/stack-icons.ttf?77736380') format('truetype'), + url('../fonts/stack-icons.svg?77736380#stack-icons') format('svg'); + font-weight: normal; + font-style: normal; + } + + [class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "stack-icons"; + font-style: normal; + font-weight: normal; + speak: never; + display: inline-block; + text-decoration: inherit; + text-align: center; + font-variant: normal; + text-transform: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + .icon-discord:before { content: '\e800'; } /* '' */ + .icon-telegram-arrow:before { content: '\e801'; } /* '' */ + .icon-twitter:before { content: '\f099'; } /* '' */ + .icon-github:before { content: '\f09b'; } /* '' */ + .icon-mail-alt:before { content: '\f0e0'; } /* '' */ + .icon-youtube:before { content: '\f16a'; } /* '' */ + .icon-apple:before { content: '\f179'; } /* '' */ + .icon-android:before { content: '\f17b'; } /* '' */ + .icon-reddit-1:before { content: '\f1a1'; } /* '' */ + .icon-reddit:before { content: '\f281'; } /* '' */ + .icon-telegram:before { content: '\f2c6'; } /* '' */ + + + +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: #F7F7F7; + color: #232323; + line-height: 1.7; + font-family: "Noto Sans", 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: "Noto Sans", sans-serif; + font-weight: 800; +} + +#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.1rem; +} + +#intro-info .open p span, #intro-info .noncust p span { + font-weight: 800; +} + +@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; + margin-left: 1.8rem; + margin-right: 1.8rem; +} + +.main-menu li.nav-item a { + display: block; + text-decoration: none; + font-size: 1rem; + font-weight: 700; + color: #232323; + -webkit-transition: all ease-out .2s; + -moz-transition: all ease-out .2s; + -o-transition: all ease-out .2s; + transition: all ease-out .2s; +} + +.main-menu li.nav-item.link > a:after { + -ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; + -webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; + transition: transform .3s ease-out,border-color .3s ease-out; + position: absolute; + display: block; + bottom: 0.7rem; + left: 0; + width: 100%; + -ms-transform: scaleX(0); + -webkit-transform: scaleX(0); + transform: scaleX(0); + border-top: 2px solid #232323; + content: ''; + padding-bottom: inherit; +} + +.main-menu li.nav-item.link:hover > a:after { + -ms-transform: scaleX(1); + -webkit-transform: scaleX(1); + transform: scaleX(1); +} + +.main-menu li.nav-item:not(.link) > a:after { + position: absolute; + display: block; + bottom: 0.7rem; + left: 50%; + transform: translate(-50%); + content: ''; + padding-bottom: inherit; + width: 4px; + height: 4px; + background-color: #232323; + border-radius: 20px; + opacity: 0; + visibility: hidden; + transition:visibility 0.3s linear, opacity 0.3s linear; +} + +.main-menu li.nav-item:not(.link):hover > a:after { + opacity: 1; + visibility: visible; +} + +.main-menu li.nav-item ul.dropdown { + background: #F7F7F7; + visibility: hidden; + opacity: 0; + width: 30rem; + 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: 8px; + padding: 1rem; +} + +.main-menu li.nav-item ul.dropdown .row { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + flex-wrap: wrap; + margin-bottom: 1rem; +} + +.main-menu li.nav-item ul.dropdown .row:last-child { + margin-bottom: 0; +} + +.main-menu li.nav-item ul.dropdown .col { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + padding: 0; +} + +.main-menu li.nav-item ul.dropdown li { + width: 100%; +} + +.main-menu li.nav-item ul.dropdown .systemlink a { + padding: 1rem 1rem 1rem 3rem; + position: relative; + border-radius: 8px; +} + +.main-menu li.nav-item ul.dropdown .systemlink a svg, .main-menu li.nav-item ul.dropdown .systemlink a img { + width: 1.5rem; + position: absolute; + top: 1rem; + left: 1rem; +} + +.main-menu li.nav-item ul.dropdown .systemlink a .systext p.system-title { + font-size: 1rem; + border-bottom: 2px solid rgba(0,0,0,0); + display: inline-block; + line-height: 1.3; +} + +.main-menu li.nav-item ul.dropdown .systemlink .systext p.system-about { + font-weight: 400; + font-size: 0.75rem; + margin-top: 0.25rem; + line-height: 1.5; +} + +.main-menu li.nav-item ul.dropdown .droptitle { + font-weight: 700; + font-size: 0.9rem; + margin-bottom: 0.5rem; + margin-top:0.5rem; + color: #232323; +} + +.main-menu li.nav-item ul.dropdown li a { + display: flex; + padding: 1rem; + 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; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} + +.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 { + background-color: rgba(35,35,35,.05); +} + +.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 .systemlink a:hover .systext p.system-title, .main-menu li.nav-item ul.dropdown .systemlink a:active .systext p.system-title, .main-menu li.nav-item ul.dropdown .systemlink a:focus .systext p.system-title { + border-bottom: 2px solid #232323; + color: #232323; + transition: border-bottom-color .1s ease-in-out; +} + +.main-menu li.nav-item ul.dropdown li a span { + vertical-align: middle; +} + +.main-menu li.nav-item ul.dropdown li a span.downicon { + width: 2rem; + height: 2rem; + display: inline-block; + margin-right: 0.2rem; +} + +.main-menu li.nav-item ul.dropdown li:nth-child(1) a span.downicon { + background-image: url(../img/apple-icon.svg); + background-size: contain; +} + +.main-menu li.nav-item ul.dropdown li:nth-child(2) a span.downicon { + background-image: url(../img/playstore-icon.svg); + background-size: contain; +} + +.main-menu li.nav-item ul.dropdown li:nth-child(3) a span.downicon { + background-image: url(../img/android-icon.svg); + background-size: contain; +} + +.main-menu li.nav-item ul.dropdown li:nth-child(4) a span.downicon { + background-image: url(../img/fdroid-icon.svg); + background-size: contain; +} + +.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 { + position: absolute; + top: 99%; + width: 100%; + transition: all ease .6s; + background-color: #F7F7F7; + 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 4px 5px rgba(0,0,0,0.25); + padding: 1rem 0; + } + + .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: flex; + position: inherit; + opacity: 1; + visibility: visible; + box-shadow: none; + } + + .slide-nav .mob-item { + padding: 0 1.5rem; + } + + .slide-nav .mob-item > a, .slide-nav .mob-item > label { + 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; + border-top: 1px solid #CFCFCF; + } + + .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; + right: 1rem; + 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: #232323; + } + + /*.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: #232323; + } + + .slide-nav .mob-item .dropdown-content.row { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + flex-wrap: wrap; + margin-bottom: 1rem; + } + + .slide-nav .mob-item .dropdown-content li.systemlink { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + padding: 0; + } + + .slide-nav .mob-item .dropdown-content li a { + padding: 1rem 1rem 1rem 3rem; + border-radius: 8px; + position: relative; + display: flex; + 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; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + text-decoration: none; + } + + .slide-nav .mob-item .dropdown-content li a:hover, .slide-nav .mob-item .dropdown-content li a:active, .slide-nav .mob-item .dropdown-content li a:focus { + background-color: rgba(35,35,35,.05); + } + + .slide-nav .mob-item .dropdown-content li a svg, .slide-nav .mob-item .dropdown-content li a img { + width: 1.5rem; + position: absolute; + top: 1rem; + left: 1rem; + } + + .slide-nav .mob-item .dropdown-content li a .systext p.system-title { + font-size: 1rem; + border-bottom: 2px solid rgba(0,0,0,0); + display: inline-block; + line-height: 1.3; + font-weight: 700; + } + + .slide-nav .mob-item .dropdown-content li .systext p.system-about { + font-weight: 400; + font-size: 0.8rem; + margin-top: 0.25rem; + line-height: 1.5; + } + + .logo-mobile img { + width: 11rem; + } + +} + +@media only screen and (max-width: 48rem) { + + header .container { + padding: 0; + } + +} + +@media only screen and (max-width: 32rem) { + + .slide-nav .mob-item .dropdown-content li.systemlink { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + 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: 3rem; + line-height: 1.3; +} + +#intro .intro-info h1 + p { + width: 35rem; + font-size: 1.2rem; + margin-top: 1rem; + line-height: 1.5; +} + +#intro .download-btn a { + display: inline-block; + text-decoration: none; + font-size: 1rem; + font-weight: 700; + color: #ffffff; + background-color: #232323; + border-radius: 4rem; + padding: 1rem 2rem; + line-height: 1.5; + margin-top: 2rem; + letter-spacing: 0.5px; + -webkit-transition: all ease-out .3s; + -moz-transition: all ease-out .3s; + -o-transition: all ease-out .3s; + transition: all ease-out .3s; +} + +#intro .download-btn a svg { + vertical-align: middle; + margin-left: 1rem; +} + +#intro .download-btn a + +#intro .download-btn a:hover, #intro .download-btn a:active, #intro .download-btn a:focus { + background-color: #383838; +} + + +.download-badge { + width: 12rem; + height: 4rem; + display: block; + margin-top: 1rem; + margin-right: 1rem; +} + +.download-ios { + background: url(../img/app-store-badge.svg); + background-size: contain; + background-repeat: no-repeat; +} + +.download-playstore { + background: url(../img/google-play-badge.svg); + background-size: contain; + background-repeat: no-repeat; +} + +.download-android { + background: url(../img/android-apk-badge.svg); + background-size: contain; + background-repeat: no-repeat; +} + +.download-fdroid { + background: url(../img/fdroid-badge.svg); + background-size: contain; + background-repeat: no-repeat; +} + +@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; +} + +#intro .download-badge { + width: 10rem; + height: 3.375rem; +} + +} + +@media only screen and (max-width: 62rem) { + +#intro .intro-info h1 + p { + font-size: 1.1rem; +} + +#intro .download-badge { + width: 9rem; +} + +} + +@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 .download-btn { + display: block; + text-align: center; + } + + #intro .download-btn a { + margin: 2rem 3rem 0 3rem; + display: inline-block; + } + + #intro .download-badge { + width: 10rem; + margin: 0 0.5rem; + } + + #intro .intro-img img { + width: 70%; + } + +} + +@media only screen and (max-width: 30rem) { + +#intro .container > .row { + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; + height: 100%; + min-height: 60vh; + padding: 3rem 0; +} + +#intro .download-btn a span { + display: none; +} + +} + +/*downloads*/ + +#download .container { + position: relative; + padding-top: 10rem; + padding-bottom: 6rem; +} + +#download .container:before { + content: 'download'; + display; block; + color: gainsboro; + font-family: 'Noto Sans', sans-serif; + font-weight: 700; + font-size: 10rem; + position: absolute; + top: 0; + left: -12rem; + z-index: -1; + line-height: 1; + opacity: 0.5; +} + +#download .row.system-cards { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; + margin-top: 3rem; +} + +#download .row.system-cards .card { + -ms-flex-preferred-size: 32%; + flex-basis: 32%; + max-width: 22.5rem; + margin-bottom: 1.75rem; + background: #ffffff; + border-radius: 32px; + padding: 2rem; +} + +@media only screen and (max-width: 75rem) { + #download .row.system-cards .card { + -ms-flex-preferred-size: 32%; + flex-basis: 32%; + max-width: 19.33rem; + margin-bottom: 1.5rem; + } + + #download .card h3 { + font-size: 1.3rem; + } + + #download .card p { + height: 6rem; + } +} + +@media only screen and (max-width: 62rem) { + #download .row.system-cards .card { + -ms-flex-preferred-size: 48%; + flex-basis: 48%; + max-width: 48%; + margin-bottom: 1.5rem; + } +} + +@media only screen and (max-width: 40rem) { + #download .row.system-cards .card { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + margin-bottom: 1.5rem; + } +} + +#download .card.feature-icon img, #download .card.feature-icon svg { + width: 3rem; + margin-bottom: 2rem; +} + +#download .card h3, #download .card-long h3 { + font-size: 1.5rem; + font-family: 'Noto Sans', sans-serif; + font-weight: 700; + line-height: 1.2; +} + +#download .card p { + font-size: 1rem; + font-family: 'Noto Sans', sans-serif; + font-weight: 400; + margin-top: 0.75rem; + line-height: 1.6; +} + +#download .card a { + text-decoration: none; + color: #3030D0; + font-weight: 700; + margin-top: 2rem; + display: inline-block; + line-height: 1.3; + -webkit-transition: all ease-out .3s; + -moz-transition: all ease-out .3s; + -o-transition: all ease-out .3s; + transition: all ease-out .3s; +} + +#download .card.feature-icon a svg { + margin: 0 0 0 0.25rem; + width: 1.125rem; + vertical-align: middle; +} + +#download .card a:hover, #download .card a:active, #download .card a:focus { + color: #5959d9; +} + +@media only screen and (max-width: 75rem) { + + #download .card h3 { + font-size: 1.3rem; + } + + #download .card p { + height: 4rem; + } + + #download .card a { + margin-top: 1rem; + } +} + +@media only screen and (max-width: 48rem) { + + #download .card h3 { + font-size: 1.2rem; + } + + #download .card p { + height: 5rem; + } +} + +@media only screen and (max-width: 40rem) { + + #download .card p { + height: auto; + } + +} + + +/*features*/ + +#features .container { + position: relative; + padding-top: 10rem; +} + +#features .container:before { + content: 'features'; + display; block; + color: gainsboro; + font-family: 'Noto Sans', sans-serif; + font-weight: 700; + font-size: 10rem; + position: absolute; + top: 0; + left: -12rem; + z-index: -1; + line-height: 1; + opacity: 0.5; +} + +#feature .container { + position: relative; + padding-top: 8rem; +} + +@media only screen and (max-width: 100rem) { + + #features .container:before, #download .container:before { + left: -2rem; + } + + #feature .container:before { + right: 0; + } + +} + +@media only screen and (max-width: 62rem) { + + #feature .container:before { + display: none; + } + + #features .container:before, #download .container:before { + font-size: 8rem; + } + + #features .container, #download .container { + padding-top: 8rem; + } + + #feature .container { + padding-top: 6rem; + } +} + +@media only screen and (max-width: 48rem) { + + #features .container:before, #download .container:before { + font-size: 8rem; + left: 1.5rem; + } + + #features .container, .download .container { + padding-top: 8rem; + } + + #feature .container { + padding-top: 4rem; + } +} + +@media only screen and (max-width: 37rem) { + + #features .container:before, #download .container:before { + font-size: 4rem; + right: 1.5rem; + } + + #features .container, #download .container { + padding-top: 4rem; + } + + #feature .container { + padding-top: 2rem; + } +} + +#feature .row.feature-cards { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; +} + +#feature .row.feature-cards .card { + -ms-flex-preferred-size: 32%; + flex-basis: 32%; + max-width: 22.5rem; + margin-bottom: 1.75rem; + background: #ffffff; + border-radius: 32px; + padding: 2rem; +} + +@media only screen and (max-width: 75rem) { + #feature .row.feature-cards .card { + -ms-flex-preferred-size: 32%; + flex-basis: 32%; + max-width: 19.33rem; + margin-bottom: 1.5rem; + } +} + +@media only screen and (max-width: 62rem) { + #feature .row.feature-cards .card { + -ms-flex-preferred-size: 48%; + flex-basis: 48%; + max-width: 48%; + margin-bottom: 1.5rem; + } +} + +@media only screen and (max-width: 37rem) { + #feature .row.feature-cards .card { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + margin-bottom: 1.5rem; + } +} + +#feature .card img.feature-icon, #feature .card-long img.feature-icon { + width: 7rem; + margin-bottom: 2rem; +} + +#feature .card h3, #feature .card-long h3 { + font-size: 1.5rem; + font-family: 'Noto Sans', sans-serif; + font-weight: 700; + line-height: 1.2; +} + +#feature .card p { + font-size: 1rem; + font-family: 'Noto Sans', sans-serif; + font-weight: 400; + margin-top: 0.75rem; + line-height: 1.6; +} + +#feature .row.feature-cards .card-long { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + margin-bottom: 1.75rem; + background: #ffffff; + border-radius: 32px; + padding: 2rem; +} + +#feature .row.feature-cards .card-long .row { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; +} + +#feature .row.feature-cards .card-long .col { + margin-top: 0.75rem; + -ms-flex-preferred-size: 45%; + flex-basis: 45%; + max-width: 45%; + padding: 1rem 0 0 0; +} + +#feature .row.feature-cards .card-long .col p { + position: relative; + padding-left: 2rem; +} + +#feature .row.feature-cards .card-long .col p:before { + content: '☑️'; + position: absolute; + left: 0; +} + +@media only screen and (max-width: 37rem) { + + #feature .row.feature-cards .card-long .col { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + +} + +/*support*/ + +#support .container { + position: relative; + padding-top: 15rem; + padding-bottom: 10rem; + margin-top: 8rem; +} + +#support .container:before { + content: 'support'; + display; block; + color: gainsboro; + font-family: 'Noto Sans', sans-serif; + font-weight: 700; + font-size: 10rem; + position: absolute; + top: 0; + left: -12rem; + z-index: -1; + line-height: 1; + opacity: 0.5; +} + +#support.sup-page .container { + padding-top: 0 !important; + margin-top: 0; +} + +#support.sup-page .container:before { + display: none; +} + +@media only screen and (max-width: 100rem) { + + #support .container:before { + left: -2rem; + } + +} + +#support .container > .row { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; +} + +.social-support { + background-color: #ffffff; + border-radius: 16px; + max-width: 22.5rem; + padding: 2rem; +} + +.social-support h3 { + font-size: 1.1rem; + margin-bottom: 1rem; +} + +.social-support p span { + font-weight: 800; +} + +.social-support p span span.ignore { + display: none; +} + +.social-support .social-links { + margin-top: 1rem; +} + +.social-support .social-links li { + display: block; + margin-top: 1rem; +} + +.social-support .social-links li i { + display: block; + font-size: 1.7rem; + color: #3030D0; + -webkit-transition: all ease-out .2s; + -moz-transition: all ease-out .2s; + -o-transition: all ease-out .2s; + transition: all ease-out .2s; + line-height: 1; + margin-right: 0.5rem; +} + +.social-support .social-links i.icon-session { + background-image: url(../img/session-icon.svg); + background-repeat: no-repeat; + display: inline-block; + width: 1.7rem; + height: 1.7rem; + background-size: 1.7rem 1.7rem; +} + +.social-support .social-links li:hover i { + color: #3030D0; +} + +.social-support .social-links li i, .social-support .social-links li span { + display: inline; + vertical-align: middle; +} + +.social-support .social-links li a { + text-decoration: none; + display: inline-block; + color: #3030D0; +} + +.social-support .social-links li span { + font-weight: 800; +} + +.accordion { + padding: 0; + z-index: 1; + max-width: 47rem; +} + +@media only screen and (max-width: 75rem) { + + .social-support { + max-width: 19.33rem; + } + + .accordion { + max-width: 40.17rem; + } + +} + +@media only screen and (max-width: 62rem) { + + .social-support, .accordion { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .accordion { + margin-bottom: 1.5rem; + } + + #support .container:before { + font-size: 8rem; + } + + #support .container { + padding-top: 12rem; + margin-top: 6rem; + } + +} + +@media only screen and (max-width: 48rem) { + + #support .container:before { + left: 1.5rem; + } + + #support .container { + margin-top: 4rem; + padding-bottom: 6rem; + } + +} + +@media only screen and (max-width: 37rem) { + + #support .container:before { + font-size: 4rem; + right: 1.5rem; + } + + #support .container { + padding-top: 8rem; + } +} + + + +.accordion h3 { + font-size: 1.5rem; + font-family: 'Noto Sans', sans-serif; + font-weight: 700; + line-height: 1.2; +} + + .accordion__item { + display: block; + padding: 1.5rem 2rem; + cursor: pointer; + border-radius: 12px; + overflow: hidden; + transition: all 150ms ease; + margin-bottom: 1rem; + background: #ffffff; + } + .accordion__item:not(:last-child) { + border-bottom: 1px solid #fafafa; + } + + .accordion__item:last-child { + margin-bottom: 0; + } + + .accordion__title { + font-size: 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: #737577; + font-size: 0.9rem; + 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(45deg); + } + .accordion__item [type=radio]:checked + .accordion__title::before, .accordion__item [type=checkbox]:checked + .accordion__title::before { + transform: rotate(-45deg); + } + .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; + } + + + +/*intro facts*/ + +#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%; +} + +#intro-info h3, #intro-info h3 + p { + margin-bottom: 1rem; +} + +@media only screen and (max-width: 62rem) { + +.block-facts .col img, .block-facts .col div, .block-facts .col > h4 { + display: block; +} + +.block-facts .col img { + margin-bottom: 0.5rem; + width: 3rem; +} + +#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: 38rem) { + +#intro-info.section { + padding: 4rem 0; +} + + +#intro-info .col-img { + -ms-flex-preferred-size: 70%; + flex-basis: 70%; + max-width: 70%; +} + +} + +@media only screen and (max-width: 30rem) { + +#intro-info .row:first-of-type .col { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + padding-right: 0.5rem; +} + +#intro-info .row:first-of-type .col:nth-of-type(3), #intro-info .row:first-of-type .col:nth-of-type(2) { + margin-top: 1rem; +} + +} + +@media only screen and (max-width: 26rem) { + + + +} + +@media only screen and (max-width: 23.75rem) { + +#intro-info .row:first-of-type .col { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; +} + +#intro-info .row:first-of-type .col { + margin-top: 2rem; +} + +#intro-info .row:first-of-type .col:first-of-type { + margin-top: 0; +} + +} + +/* 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 { + padding-top: 3rem; + 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; +} + +} + +/* donate */ + +.page-hero { + padding: 6rem 0; +} + +.page-hero .row { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.page-hero .col { + -ms-flex-preferred-size: 70%; + flex-basis: 70%; + max-width: 70%; +} + +.page-hero h1 { + font-size: 3rem; + line-height: 1.3; + text-align: center; +} + +.page-hero p.page-hero-sub { + font-size: 1.2rem; + margin-top: 1rem; + line-height: 1.5; + text-align: center; +} + +@media only screen and (max-width: 62rem) { + +.page-hero .col { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; +} + +.page-hero p.page-hero-sub { + font-size: 1.1rem; +} + +} + +.row.doncoins { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; + padding: 0 1rem; +} + +.donate-coin { + -ms-flex-preferred-size: 48%; + flex-basis: 48%; + max-width: 48%; + margin-bottom: 2.5rem; + background: #ffffff; + border-radius: 32px; + padding: 2rem; +} + +@media only screen and (max-width: 62rem) { + +.donate-coin { + margin-bottom: 1.75rem; +} + +} + +@media only screen and (max-width: 48rem) { + +.donate-coin { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; +} + +} + +.donate-coin .row { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; +} + +.donate-coin .row .col { + padding: 0; +} + +.donate-coin .row .col:nth-child(2) img { + float: right; +} + +.donate-coin img.coin-icon { + width: 3rem; + margin-bottom: 2rem; +} + +.donate-coin img.donqr { + width: 4rem; + border-radius: 0.5rem; +} + +.donate-coin h3 { + font-size: 1.5rem; + font-family: 'Noto Sans', sans-serif; + font-weight: 700; + line-height: 1.2; +} + +.donate-coin p { + word-wrap: break-word; + user-select: all; + font-size: 1rem; + font-family: 'Noto Sans', sans-serif; + font-weight: 400; + margin-top: 0.75rem; + line-height: 1.6; +} + +/*blog*/ + +.page-intro { + padding: 6rem 0 2rem 0; +} + +.page-intro h1 { + text-align: center; + font-size: 3rem; + font-family: "Noto Sans", sans-serif; + font-weight: 800; +} + +.faq-nav .row { + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; +} + +.faq-nav ul li { + margin-right: 1rem; +} + +.faq-nav ul li:last-of-type { + margin-right: 0; +} + +.faq-nav ul li a { + padding: 0.5rem 1rem; + display: block; + text-decoration: none; + font-size: 1rem; + -webkit-transition: all ease-out .2s; + -moz-transition: all ease-out .2s; + -o-transition: all ease-out .2s; + transition: all ease-out .2s; + background-color: #E0E3E3; + border-radius: 100px; + min-width: 4rem; +} + +.faq-nav ul li a:hover, .faq-nav ul li a:focus, .faq-nav ul li a:active { + background-color: #CDCFD2; +} + +@media only screen and (max-width: 62rem) { + +.faq-nav ul li a { + font-size: 1rem; +} + +} + +@media only screen and (max-width: 48rem) { + +.page-intro h1 { + font-size: 2.5rem; +} + +} + +@media only screen and (max-width: 45rem) { + +.faq-nav { + display: none; +} + +.faq-nav.disclaimer { + display: block; +} + +} + +@media only screen and (max-width: 30rem) { + +} + +.blog-section { + padding-top: 4rem; +} + +.blog-section:last-of-type { + padding-bottom: 6rem; +} + +@media only screen and (max-width: 38rem) { + +.blog-section { + padding-top: 4rem; +} + +.blog-section:last-of-type { + padding-bottom: 4rem; +} + +} + +.blog-section .container { + width: 43rem; +} + +.blog-section .col.post-section { + background-color: #ffffff; + margin-top: 2rem; + border-radius: 32px; + padding: 2rem; +} + +.blog-section .col.post-section .post-meta { + margin-bottom: 1rem; +} + +.blog-section .col.post-section .post-meta p, .blog-section .col.post-page .post-meta p { + color: #A9ACAC; +} + +.blog-section .col.post-section a.post-link { + text-decoration: none; +} + +.blog-section .col.post-section a.post-link h2 { + font-size: 1.8rem; + line-height: 1.3; +} + +.blog-section .col.post-section a.post-link p, .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 .col.post-section .post-tag { + margin-top: 2rem; +} + +.blog-section .col.post-section .post-tag a { + text-decoration: none; + color: #232323; + background-color: #E0E3E3; + border-radius: 32px; + padding: 0.5rem 1rem; + margin-right: 0.5rem; + -webkit-transition: all ease-out .2s; + -moz-transition: all ease-out .2s; + -o-transition: all ease-out .2s; + transition: all ease-out .2s; +} + +.blog-section .col.post-section .post-tag a:hover, .blog-section .col.post-section .post-tag a:active, .blog-section .col.post-section .post-tag a:focus { + background-color: #CDCFD2; +} + +.blog-section .pagination { + text-align: center; + font-size: 1.2rem; +} + +.blog-section .pagination .page-button { + text-decoration: none; + color: #fff; + background-color: #232323; + padding: 0.5rem 1rem; + min-width: 4rem; + border-radius: 100px; + 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; +} + +.blog-section .pagination .page-button:hover, .blog-section .pagination .page-button:active, .blog-section .pagination .page-button:focus { + background-color: #454545; +} + +.blog-section .col.post-page .post-meta { + margin-top: 1rem; +} + +.blog-section .post-page h1 { + font-size: 1.8rem; + line-height: 1.3; + margin-top: 2rem; +} + +.blog-section .col.post-page .post-body img { + max-width: 100%; + width: auto; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15)); +} + +.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: "Noto Sans", 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: "Noto Sans", 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; +} + +.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: #DFEBF2; +} + +.blog-section .col.post-page .post-body table tr { + border-bottom: 1px solid #fff; +} + +.blog-section .col.post-page .post-body p a { + text-decoration: none; + color: #9b1c2e; + border-bottom: 1px solid #9b1c2e; +} + +.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 ol, .guide-section ol { + list-style: decimal; + margin-left: 1.5rem; + margin-top: 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: #9b1c2e; + text-decoration: none; + border-bottom: 1px solid #9b1c2e; +} + +.blog-section .col.post-page .post-body ul p, .blog-section .col.post-page .post-body ol p { + display: block; +} + +.blog-section .col.post-page .post-body code { + background-color: blue; + display: block; + overflow: auto; + padding: 1rem; + white-space: pre; + background-color: #DFEBF2; + font: 0.9rem andale mono,Courier,courier new,monospace; + margin-top: 1rem; +} + +.blog-section h2.tag-blog { + font-size: 2.5rem; + text-align: center; +} + +@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: #EEEFF1; +} + +footer .pre-footer { + padding: 3rem 0; +} + +footer .pre-footer .row { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; +} + +footer .pre-footer .col:first-child { + -ms-flex-preferred-size: 30%; + flex-basis: 30%; + max-width: 30%; +} + +footer .pre-footer .col:last-child { + -ms-flex-preferred-size: 65%; + flex-basis: 65%; + max-width: 65%; +} + +footer .pre-footer img.logo-foot { + width: 10rem; +} + +footer .social { + margin-top: 1rem; +} + +footer .social li { + display: inline-block; + margin-right: 0.5rem; + margin-top: 0.5rem; +} + +footer .social li i { + display: block; + font-size: 1.5rem; + color: #A9ACAC; + -webkit-transition: all ease-out .2s; + -moz-transition: all ease-out .2s; + -o-transition: all ease-out .2s; + transition: all ease-out .2s; + line-height: 1; +} + +footer .social li:hover i { + color: #3030D0; +} + +footer .pre-footer .about-foot p { + font-size: 0.8rem; + color: #4f4f4f; + padding-top: 1rem; +} + +footer .pre-footer .about-foot p:first-child { + padding-top: 0; +} + +footer .bottom-row { + background-color: #232323; + padding: 1rem 0; +} + +footer .bottom-row .col:last-child { + text-align: right; +} + +footer .bottom-row p { + font-size: 0.9rem; + color: white; + display: inline-block; +} + +footer .bottom-row p a { + margin-right: 1rem; + text-decoration: none; + font-size: 0.9rem; + color: white; + display: block; +} + +@media only screen and (max-width: 62rem) { + + footer .pre-footer .col:first-child { + -ms-flex-preferred-size: 40%; + flex-basis: 40%; + max-width: 40%; + } + + footer .pre-footer .col:last-child { + -ms-flex-preferred-size: 60%; + flex-basis: 60%; + max-width: 60%; + } + +} + +@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; +} + +}