.article-clean, .article-dual-column { color: #56585b; background-color: #fff; font-family: Lora, serif; font-size: 14px; } .article-clean .intro, .article-dual-column .intro { font-size: 16px; margin: 0 auto 30px; } .article-clean .intro h1 { font-size: 32px; margin-bottom: 15px; padding-top: 20px; line-height: 1.5; color: inherit; margin-top: 20px; } .article-clean .intro p, .article-dual-column .intro p { color: #929292; font-size: 12px; } .article-clean .intro p .by, .article-dual-column .intro p .by { font-style: italic; } .article-clean .intro p .date, .article-dual-column .intro p .date { text-transform: uppercase; padding: 4px 0 4px 10px; margin-left: 10px; border-left: 1px solid #ddd; } .article-clean .intro p a, .article-dual-column .intro p a { color: #333; text-transform: uppercase; padding-left: 3px; } .article-clean .intro img { margin-top: 20px; } .article-clean .text p, .article-dual-column .text p { margin-bottom: 20px; line-height: 1.45; } .article-clean .text h2, .article-dual-column .text h2 { margin-top: 28px; margin-bottom: 20px; line-height: 1.45; font-size: 16px; font-weight: 700; color: #333; } .article-clean .text figure, .article-dual-column .text figure { text-align: center; margin-top: 30px; margin-bottom: 20px; } .article-clean .text figure img, .article-dual-column .text figure img { margin-bottom: 12px; max-width: 100%; } .article-dual-column .intro h1 { font-size: 32px; margin-bottom: 15px; padding-top: 20px; line-height: 1.5; color: inherit; margin-top: 25px; } .article-dual-column .intro img { margin-top: 25px; } .article-dual-column .toc p { text-transform: uppercase; font-size: 12px; font-weight: 700; } .article-dual-column .toc ul { padding-left: 20px; font-size: 13px; margin-bottom: 0; } .article-dual-column .toc li { padding: 2px 0; } .article-dual-column .toc a { color: inherit; } .faqHeader { font-size: 27px; margin: 20px; } .panel-heading [data-toggle="collapse"]:after { font-family: FontAwesome; content: "\f078"; float: right; color: #f58723; font-size: 18px; line-height: 22px; } .panel-heading [data-toggle="collapse"].collapsed:after { color: #454444; } .footer-dark { padding: 50px 0; color: #f0f9ff; background-color: #282d32; } .footer-dark h3 { margin-top: 0; margin-bottom: 12px; font-weight: 700; font-size: 16px; } .footer-dark ul { padding: 0; list-style: none; line-height: 1.6; font-size: 14px; margin-bottom: 0; } .footer-dark ul a { color: inherit; text-decoration: none; opacity: 0.6; } .footer-dark ul a:hover { opacity: 0.8; } .footer-dark .item.text { margin-bottom: 36px; } .footer-dark .item.text p { opacity: 0.6; margin-bottom: 0; } .footer-dark .item.social, .highlight-blue .buttons { text-align: center; } @media (max-width: 991px) { .footer-dark .item.social { text-align: center; margin-top: 20px; } } .footer-dark .item.social > a { font-size: 20px; width: 36px; height: 36px; line-height: 36px; display: inline-block; text-align: center; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); margin: 0 8px; color: #fff; opacity: 0.75; } .footer-dark .item.social > a:hover { opacity: 0.9; } .footer-dark .copyright { text-align: center; padding-top: 24px; opacity: 0.3; font-size: 13px; margin-bottom: 0; } .highlight-blue { color: #fff; background-color: #1e6add; padding: 50px 0; } .highlight-blue p { color: #c4d5ef; line-height: 1.5; } .highlight-blue h2 { font-weight: 400; margin-bottom: 25px; line-height: 1.5; padding-top: 0; margin-top: 0; color: inherit; } .highlight-blue .intro { font-size: 16px; max-width: 500px; margin: 0 auto 25px; } .highlight-blue .buttons .btn { padding: 16px 32px; margin: 6px; border: none; background: 0 0; box-shadow: none; text-shadow: none; opacity: 0.9; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: 0.4px; line-height: 1; } .highlight-blue .buttons .btn:hover { opacity: 1; } .highlight-blue .buttons .btn:active { transform: translateY(1px); } .highlight-blue .buttons .btn-primary, .highlight-blue .buttons .btn-primary:active { border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 6px; color: #ebeff1; box-shadow: none; text-shadow: none; padding: 14px 24px; background: 0 0; transition: background-color 0.25s; } .navigation-clean-button, .navigation-clean-search { background: transparent !important; padding-top: 0.75rem; padding-bottom: 0.75rem; color: #333; border-radius: 0; box-shadow: none; border: none; margin-bottom: 0; } .navigation-clean-button .navbar-brand, .navigation-clean-search .navbar-brand { font-weight: 700; color: inherit; } .navigation-clean-button .navbar-brand:hover, .navigation-clean-search .navbar-brand:hover { color: #222; } .navigation-clean-button.navbar-dark .navbar-brand:hover { color: #f0f0f0; } .navigation-clean-button .navbar-brand img { height: 100%; display: inline-block; margin-right: 10px; width: auto; } .navigation-clean-button .navbar-toggler, .navigation-clean-search .navbar-toggler { border-color: #ddd; color: #888; } .navigation-clean-button .navbar-toggler:focus, .navigation-clean-button .navbar-toggler:hover, .navigation-clean-search .navbar-toggler:focus, .navigation-clean-search .navbar-toggler:hover { background: 0 0; } .navigation-clean-button.navbar-dark .navbar-toggler { border-color: #555; color: #eee; } .navigation-clean-button .form-inline, .navigation-clean-button .navbar-collapse, .navigation-clean-search .form-inline, .navigation-clean-search .navbar-collapse { border-top-color: #ddd; } .navigation-clean-button.navbar-dark .form-inline, .navigation-clean-button.navbar-dark .navbar-collapse { border-top-color: #333; } .navigation-clean-button .navbar-nav a.active, .navigation-clean-button .navbar-nav > .show > a, .navigation-clean-search .navbar-nav a.active, .navigation-clean-search .navbar-nav > .show > a { background: 0 0; box-shadow: none; } .navigation-clean-button.navbar-dark .navbar-nav a.active, .navigation-clean-button.navbar-dark .navbar-nav a.active:focus, .navigation-clean-button.navbar-dark .navbar-nav a.active:hover, .navigation-clean-button.navbar-light .navbar-nav a.active, .navigation-clean-button.navbar-light .navbar-nav a.active:focus, .navigation-clean-button.navbar-light .navbar-nav a.active:hover, .navigation-clean-search.navbar-light .navbar-nav a.active, .navigation-clean-search.navbar-light .navbar-nav a.active:focus, .navigation-clean-search.navbar-light .navbar-nav a.active:hover { color: #8f8f8f; box-shadow: none; background: 0 0; pointer-events: none; } .navigation-clean-button.navbar .navbar-nav .nav-link, .navigation-clean-search.navbar .navbar-nav .nav-link { padding-left: 18px; padding-right: 18px; } .navigation-clean-button.navbar-light .navbar-nav .nav-link, .navigation-clean-search.navbar-light .navbar-nav .nav-link { color: #465765; } .navigation-clean-button.navbar-light .navbar-nav .nav-link:focus, .navigation-clean-button.navbar-light .navbar-nav .nav-link:hover, .navigation-clean-search.navbar-light .navbar-nav .nav-link:focus, .navigation-clean-search.navbar-light .navbar-nav .nav-link:hover { color: #37434d !important; background-color: transparent; } .navigation-clean-button .navbar-nav > li > .dropdown-menu { margin-top: -5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #fff; border-radius: 2px; } .navigation-clean-button .dropdown-menu .dropdown-item, .navigation-clean-button .dropdown-menu .dropdown-item:focus { line-height: 2; font-size: 14px; color: #37434d; } .navigation-clean-button .dropdown-menu .dropdown-item:focus, .navigation-clean-button .dropdown-menu .dropdown-item:hover { background: #eee; color: inherit; } .navigation-clean-button.navbar-dark { background-color: #1f2021; color: #fff; } .navigation-clean-button.navbar-dark .actions .login, .navigation-clean-button.navbar-dark .navbar-nav .nav-link { color: #dfe8ee; } .navigation-clean-button.navbar-dark .navbar-nav .nav-link:focus, .navigation-clean-button.navbar-dark .navbar-nav .nav-link:hover { color: #fff !important; background-color: transparent; } .navigation-clean-button.navbar-dark .navbar-nav > li > .dropdown-menu { background-color: #1f2021; } .navigation-clean-button.navbar-dark .dropdown-menu .dropdown-item, .navigation-clean-button.navbar-dark .dropdown-menu .dropdown-item:focus { color: #f2f5f8; } .navigation-clean-button.navbar-dark .dropdown-menu .dropdown-item:focus, .navigation-clean-button.navbar-dark .dropdown-menu .dropdown-item:hover { background: #363739; } .navigation-clean-button .actions .login { margin-right: 1rem; text-decoration: none; color: #465765; } .navigation-clean-button.navbar-dark .actions .login:hover { color: #fff; } .navigation-clean-button .navbar-text .action-button, .navigation-clean-button .navbar-text .action-button:active, .navigation-clean-button .navbar-text .action-button:hover { background: #56c6c6; border-radius: 20px; font-size: inherit; color: #fff; box-shadow: none; border: none; text-shadow: none; padding: 0.5rem 1rem; transition: background-color 0.25s; font-size: inherit; } .navigation-clean-button .navbar-text .action-button:hover, .navigation-clean-search .action-button:focus, .navigation-clean-search .action-button:hover { background: #66d7d7; } .navigation-clean-button.navbar-dark .action-button, .navigation-clean-button.navbar-dark .action-button:active { background: #208f8f; } .navigation-clean-button.navbar-dark .action-button:hover { background: #269d9d; } .navigation-clean-button .action-button:active, .navigation-clean-search .action-button { background: #56c6c6; border-radius: 20px; font-size: inherit; color: #fff !important; box-shadow: none; border: none; text-shadow: none; padding: 8px 20px; transition: background-color 0.25s; } .navigation-clean-search .form-inline label { color: #ccc; } .navigation-clean-search .form-inline .search-field { background: 0 0; border: none; border-bottom: 1px solid transparent; border-radius: 0; color: #ccc; box-shadow: none; color: inherit; transition: border-bottom-color 0.3s; } @media (max-width: 767px) { .article-dual-column .toc { border: 1px solid #d3d3d3; padding: 20px 0 15px; margin-bottom: 20px; border-width: 1px 0; } .footer-dark .item:not(.social) { text-align: center; padding-bottom: 20px; } .footer-dark .item.text { margin-bottom: 0; } .navigation-clean-button .navbar-nav .show .dropdown-menu { box-shadow: none; } .navigation-clean-button .navbar-nav .show .dropdown-menu .dropdown-item { color: #37434d; padding-top: 12px; padding-bottom: 12px; line-height: 1; } .navigation-clean-button.navbar-dark .navbar-nav .show .dropdown-menu .dropdown-item { color: #fff; } .navigation-clean-search .form-inline .search-field { display: inline-block; width: 80%; } } .navigation-clean-search .form-inline .search-field:focus { border-bottom: 1px solid #ccc; } .navbar.fixed-top.off-canvas { bottom: 0; right: auto; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 999999999999; width: 100%; } .navbar.fixed-top.off-canvas .brand-line, .navbar.fixed-top.off-canvas .nav { width: 100%; } .nav.navbar-nav.drawer-menu { overflow-y: auto; flex: 1 1 auto; height: 0; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .navbar.fixed-top.off-canvas > div[class*="container-"] { -ms-flex-wrap: wrap; flex-wrap: wrap; padding-right: 0; padding-left: 0; height: 100%; align-content: space-between; } .navbar.fixed-top.off-canvas .navbar-nav .nav-link { padding-right: 0; padding-left: 0; } .navbar.fixed-top.off-canvas.right-drawer, .navbar.fixed-top.off-canvas[data-right-drawer="1"] { right: 0; left: auto; -webkit-transform: translateX(100%); transform: translateX(100%); } .navbar.fixed-top.off-canvas.navbar-expand, .navbar.fixed-top.off-canvas.open, .navbar.fixed-top.off-canvas[data-open-drawer="1"] { -webkit-transform: translateX(0); transform: translateX(0); } #sidebar.active .CTAs, #sidebar.active .sidebar-header h3, .navbar.fixed-top.off-canvas.navbar-expand .drawer-knob, .navbar.fixed-top.off-canvas.navbar-expand button[data-dismiss="drawer"], .navbar.fixed-top.off-canvas.open .drawer-knob, .navbar.fixed-top.off-canvas[data-open-drawer="1"] .drawer-knob { display: none; } .navbar.fixed-top.off-canvas .drawer-knob { position: absolute; top: 10px; right: -36px; } @media (min-width: 576px) { .navbar.fixed-top.off-canvas.navbar-expand-sm { -webkit-transform: translateX(0); transform: translateX(0); } .navbar.fixed-top.off-canvas.navbar-expand-sm .drawer-knob, .navbar.fixed-top.off-canvas.navbar-expand-sm button[data-dismiss="drawer"] { display: none; } .navbar.fixed-top.off-canvas { width: 280px; } } @media (min-width: 768px) { .article-clean .text p, .article-dual-column .text p { font-size: 16px; } .article-clean .text h2, .article-dual-column .text h2 { font-size: 20px; } .navigation-clean-button, .navigation-clean-search { padding-top: 1rem; padding-bottom: 1rem; } .navbar.fixed-top.off-canvas.navbar-expand-md { -webkit-transform: translateX(0); transform: translateX(0); } .navbar.fixed-top.off-canvas.navbar-expand-md .drawer-knob, .navbar.fixed-top.off-canvas.navbar-expand-md button[data-dismiss="drawer"] { display: none; } .navbar.fixed-top.off-canvas { width: 220px; } } .drawer-push.drawer-expand > .drawer-site, .drawer-push.open > .drawer-site { margin-left: 100%; } @media (min-width: 576px) { .drawer-push.drawer-expand-sm > .drawer-site, .drawer-push.drawer-expand > .drawer-site, .drawer-push.open > .drawer-site { margin-left: 280px; } } @media (min-width: 768px) { .drawer-push.drawer-expand-md > .drawer-site, .drawer-push.drawer-expand-sm > .drawer-site, .drawer-push.drawer-expand > .drawer-site, .drawer-push.open > .drawer-site { margin-left: 220px; } } .drawer-slide { position: relative; overflow-x: hidden; } .drawer-slide > .drawer-site { transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .drawer-slide.open > .drawer-site { -webkit-transform: translateX(100%); transform: translateX(100%); } @media (min-width: 576px) { .drawer-slide.open > .drawer-site { -webkit-transform: translateX(280px); transform: translateX(280px); } } @media (min-width: 768px) { .drawer-slide.open > .drawer-site { -webkit-transform: translateX(220px); transform: translateX(220px); } } @media (min-width: 992px) { .navbar.fixed-top.off-canvas.navbar-expand-lg { -webkit-transform: translateX(0); transform: translateX(0); } .navbar.fixed-top.off-canvas.navbar-expand-lg .drawer-knob, .navbar.fixed-top.off-canvas.navbar-expand-lg button[data-dismiss="drawer"] { display: none; } .navbar.fixed-top.off-canvas { width: 220px; } .drawer-push.drawer-expand-lg > .drawer-site, .drawer-push.drawer-expand-md > .drawer-site, .drawer-push.drawer-expand-sm > .drawer-site, .drawer-push.drawer-expand > .drawer-site, .drawer-push.open > .drawer-site { margin-left: 220px; } .drawer-slide.open > .drawer-site { -webkit-transform: translateX(220px); transform: translateX(220px); } } @media (min-width: 1200px) { .navbar.fixed-top.off-canvas.navbar-expand-xl { -webkit-transform: translateX(0); transform: translateX(0); } .navbar.fixed-top.off-canvas.navbar-expand-xl .drawer-knob, .navbar.fixed-top.off-canvas.navbar-expand-xl button[data-dismiss="drawer"] { display: none; } .navbar.fixed-top.off-canvas { width: 260px; } .drawer-push.drawer-expand-lg > .drawer-site, .drawer-push.drawer-expand-md > .drawer-site, .drawer-push.drawer-expand-sm > .drawer-site, .drawer-push.drawer-expand-xl > .drawer-site, .drawer-push.drawer-expand > .drawer-site, .drawer-push.open > .drawer-site { margin-left: 260px; } .drawer-slide.open > .drawer-site { -webkit-transform: translateX(260px); transform: translateX(260px); } } body > div.drawer-fade { position: absolute; top: 0; left: 0; bottom: 0; width: 0; transition: opacity 0.3s linear; background-color: #000; opacity: 0; z-index: 99999999999; } body.drawer-open > div.drawer-fade { width: 100%; opacity: 0.6; } body { font-family: Poppins, sans-serif; background: #f8f9fa; overflow-x: hidden; } p { font-family: Poppins, sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 40px 0; } #sidebar.active { min-width: 80px; max-width: 80px; text-align: center; } #sidebar.active .sidebar-header strong { display: block; } #sidebar.active ul li a { padding: 20px 10px; text-align: center; font-size: 0.85em; } #sidebar.active ul li a i { margin-right: 0; display: block; font-size: 1.8em; margin-bottom: 5px; } #sidebar.active ul ul a { padding: 10px !important; } #sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before { top: auto; bottom: 5px; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } a[aria-expanded="false"]::before, a[aria-expanded="true"]::before { content: ; display: block; position: absolute; right: 20px; font-family: "Glyphicons Halflings"; font-size: 0.6em; } a[aria-expanded="true"]::before { content: ""; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: #fff; color: #7386d5; } a.article, a.article:hover { background: #6d7fcc !important; color: #fff !important; } #wrapper.toggled { padding-left: 250px; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { width: 100%; position: absolute; padding: 15px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px; } #wrapper { padding-left: 0; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0; height: 100%; margin-left: -250px; overflow-y: auto; background: #000; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 18px; line-height: 60px; } .sidebar-nav > .sidebar-brand a { color: #999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: 0 0; } @media (min-width: 768px) { #wrapper.toggled { padding-left: 0; } #wrapper.toggled #sidebar-wrapper { width: 0; } #page-content-wrapper { padding: 20px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } #wrapper { padding-left: 250px; } #sidebar-wrapper { width: 250px; } } a, a:focus, a:hover { color: inherit; text-decoration: none; transition: 0.3s; } .navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: 0 !important; border: none; } i, span { display: inline-block; } .wrapper { display: flex; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; background: #7386d5; color: #fff; transition: 0.3s; } #sidebar ul li a { text-align: left; padding: 10px; font-size: 1.1em; display: block; } #sidebar .sidebar-header { padding: 20px; background: #6d7fcc; } #sidebar .sidebar-header strong { display: none; font-size: 1.8em; } #sidebar ul.components { padding: 20px 0; border-bottom: 1px solid #47748b; } #sidebar ul li a:hover { color: #7386d5; background: #fff; } #sidebar ul li a i { margin-right: 10px; } #sidebar ul li.active > a, a[aria-expanded="true"] { background: #6d7fcc; } a[data-toggle="collapse"] { position: relative; } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #6d7fcc; } #content { padding: 20px; min-height: 100vh; transition: 0.3s; } @media (max-width: 768px) { a[aria-expanded="false"]::before, a[aria-expanded="true"]::before { top: auto; bottom: 5px; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } #sidebar.active { margin-left: 0 !important; } #sidebar ul li a span { font-size: 0.85em; } #sidebar { min-width: 80px; max-width: 80px; text-align: center; margin-left: -80px !important; } #sidebar .CTAs, #sidebar .sidebar-header h3, #sidebarCollapse span { display: none; } #sidebar .sidebar-header strong { display: block; } #sidebar ul li a { padding: 20px 10px; } #sidebar ul li a i { margin-right: 0; display: block; font-size: 1.3em; } #sidebar ul ul a { padding: 10px !important; } } #particles-js canvas { display: block; vertical-align: bottom; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition: opacity 0.8s ease, -webkit-transform 1.4s ease; transition: opacity 0.8s ease, transform 1.4s ease; } #particles-js { width: 100%; height: 100%; position: absolute; z-index: -10; top: 0; left: 0; }