.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: .6 } .footer-dark ul a:hover { opacity: .8 } .footer-dark .item.text { margin-bottom: 36px } .footer-dark .item.text p { opacity: .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, .4); margin: 0 8px; color: #fff; opacity: .75 } .footer-dark .item.social>a:hover { opacity: .9 } .footer-dark .copyright { text-align: center; padding-top: 24px; opacity: .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: .9; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .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, .7); border-radius: 6px; color: #ebeff1; box-shadow: none; text-shadow: none; padding: 14px 24px; background: 0 0; transition: background-color .25s } .navigation-clean-button, .navigation-clean-search { background: #fff; padding-top: .75rem; padding-bottom: .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, .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: .5rem 1rem; transition: background-color .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 .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 .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 .3s ease-in-out, -webkit-transform .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 .3s ease-in-out, -webkit-transform .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 .3s linear; background-color: #000; opacity: 0; z-index: 99999999999 } body.drawer-open>div.drawer-fade { width: 100%; opacity: .6 } body { font-family: Poppins, sans-serif; background: #fafafa; 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: .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: .6em } a[aria-expanded=true]::before { content: '' } ul.CTAs { padding: 20px } ul.CTAs a { text-align: center; font-size: .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: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s } #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0; height: 100%; margin-left: -250px; overflow-y: auto; background: #000; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .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, .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: .3s } .navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(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: .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] { color: #fff; background: #6d7fcc } a[data-toggle=collapse] { position: relative } ul ul a { font-size: .9em !important; padding-left: 30px !important; background: #6d7fcc } #content { padding: 20px; min-height: 100vh; transition: .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: .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 } }