@font-face { font-family: 'Inter'; font-weight: 300; src: url("../fonts/Inter-Light.woff"); }

@font-face { font-family: 'Inter'; font-weight: 400; src: url("../fonts/Inter-Regular.woff"); }

@font-face { font-family: 'Inter'; font-weight: 700; src: url("../fonts/Inter-Medium.woff"); }

.btn { background: none; border: 1px solid #00b140; color: #00b140; border-radius: 3px; font-weight: 400; }

.btn:hover { background-color: #00b140; color: #fff; }

.carousel-control { color: #00b140; }

.carousel-control:hover { color: #00b140; }

.carousel-control.left, .carousel-control.right { background: none; }

/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font-family: "Inter", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.5; font-weight: 400; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 7.5px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption > img { text-align: center; font-size: 13.5px; }

/** Lists */
ul, ol { margin-left: 15px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.35; }

/** Links */
a { color: #00b140; transition: color .3s; text-decoration: none; }

a:hover { color: #111; text-decoration: none; }

/** Blockquotes */
blockquote { color: #898d97; border-left: 4px solid #ccd6dd; padding-left: 7.5px; font-size: 18px; font-style: italic; }

blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
pre, code { color: #1e1e1e; font-size: 15px; border: 1px solid #ddd; border-radius: 3px; background-color: #f8f8f8; }

code { padding: 2px 7px; }

pre { padding: 8px 12px; overflow-x: scroll; }

pre > code { border: 0; padding-right: 0; padding-left: 0; }

/** Wrapper */
.wrapper { max-width: -webkit-calc(1000px - (15px * 2)); max-width: calc(1000px - (15px * 2)); margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }

@media screen and (max-width: 768px) { .wrapper { max-width: -webkit-calc(700px - (15px)); max-width: calc(700px - (15px)); padding-right: 15px; padding-left: 15px; } }

.wrapper-navbar { max-width: 100vw; padding-right: 15px; padding-left: 15px; }

@media screen and (max-width: 768px) { .wrapper-navbar { max-width: 100vw; padding-right: 15px; padding-left: 15px; } }

/** Clearfix */
.footer-col-wrapper:after, .wrapper:after, .wrapper-navbar:after { content: ""; display: table; clear: both; }

/** Icons */
.icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }

.icon > svg path { fill: #898d97; }

/** Credits */
.credits { color: #898d97; font-style: italic; font-size: 15.75px; }

html, body { height: 100%; }

body { display: flex; flex-direction: column; min-height: 100%; }

/** Page content */
.page-content { flex: 1; padding: 15px 0; }

.page-heading { font-size: 36px; margin: 30px 0; }

/** Posts List */
.post-list, .archive-list { font-size: 18px; line-height: 1.5; list-style: none; margin-left: 0; }

.post-list > li, .archive-list > li { margin: 50px auto; padding-bottom: 50px; }

.post-list > li:not(:last-child), .archive-list > li:not(:last-child) { border-bottom: 1px solid #ccd6dd; }

.post-list > li:first-child, .archive-list > li:first-child { margin: 25px auto; }

.post-list .cover-photo, .archive-list .cover-photo { margin: 0 0 0 0; height: 50%; object-fit: fill; }

@media screen and (max-width: 768px) { .post-list .cover-photo, .archive-list .cover-photo { margin-bottom: 10px; height: 100%; } }

.post-list .large-cover-photo, .archive-list .large-cover-photo { margin: 0 0 0 0; width: 100%; height: 100%; }

.latest-post { border-bottom: 1px solid #ccd6dd; padding-bottom: 25px; }

.post-meta-container, .post-meta-text-container { display: inline-block; }

.post-meta { color: #898d97; display: block; font-weight: 300; text-align: left; padding-top: 15px; }

.post-cover-photo { width: 100%; margin-top: -15px; padding-bottom: 15px; }

.post-category { color: #898d97; display: inline; font-weight: 300; text-align: left; text-transform: uppercase; margin-bottom: 0px; }

.post-category:hover { color: #00b140; }

.post-tags { margin-top: 10px; }

.post-author-thumbnail-group { display: block; }

.post-author { display: block; font-size: 15.75px; padding-top: 5px; }

.post-author-large { display: block; font-size: 18px; padding-top: 5px; }

.post-date { color: #898d97; display: block; font-size: 13.5px; }

.post-date-large { color: #898d97; display: block; font-size: 18px; }

.post-link { display: block; font-size: 24px; }

.post-author-thumbnail { height: 48px; margin-right: 5px; width: 48px; vertical-align: top; }

.post-author-thumbnail-large { height: 58px; margin-right: 5px; width: 58px; }

.post-header { margin-bottom: 15px; }

.post-title { font-size: 36px; font-weight: 700; line-height: 1.2; }

@media screen and (max-width: 768px) { .post-title { font-size: 28px; } }

.post-title-small { font-size: 30px; font-weight: 700; line-height: 1.2; }

@media screen and (max-width: 768px) { .post-title-small { font-size: 28px; } }

.post-subtitle { font-size: 20px; font-weight: 400; line-height: 1.2; }

@media screen and (max-width: 768px) { .post-subtitle { font-size: 36px; } }

.post-image-section { text-align: center; }

.post-image-section img { display: block; margin: 30px auto; }

.post-image-section .post-image-caption { font-size: 13.5px; }

.post-quotations { text-align: center; font-size: 20px; font-weight: 700; line-height: 1.2; color: #ccd6dd; margin-top: 15px; margin-bottom: 15px; }

a.post-title, a.post-title-small { color: #000; }

a.post-title:hover, a.post-title-small:hover { color: #00b140; text-decoration: none; }

.column { display: inline-block; width: 40%; padding: 0px; margin: 0 10px; }

.column img { display: block; margin: 30px auto; }

.row::after { content: ""; clear: both; display: table; }

/** Single Post */
.post { margin-top: 30px; }

.post-content-container { max-width: -webkit-calc(700px - (15px * 2)); max-width: calc(700px - (15px * 2)); padding-right: 15px; padding-left: 15px; }

.post-content { color: rgba(0, 0, 0, 0.8); font-family: "Droid Serif", serif; font-size: 18px; font-weight: 400; line-height: 1.78; margin-bottom: 5px; }

@media screen and (max-width: 768px) { .post-content { font-size: 18px; } }

.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin-top: 30px; }

.post-content h2 { font-size: 32px; }

@media screen and (max-width: 768px) { .post-content h2 { font-size: 28px; } }

.post-content h3 { font-size: 26px; }

@media screen and (max-width: 768px) { .post-content h3 { font-size: 22px; } }

.post-content h4 { font-size: 20px; }

@media screen and (max-width: 768px) { .post-content h4 { font-size: 18px; } }

hr.section-divider { display: block; border: 0; text-align: center; margin-bottom: 42px; margin-top: 52px; }

hr.section-divider:before { color: rgba(0, 0, 0, 0.6); content: "..."; display: inline-block; font-family: "Droid Serif", serif; font-weight: 400; font-style: italic; font-size: 24px; letter-spacing: 0.6em; margin-left: 0.6em; position: relative; top: -30px; }

/** Posts List Summary */
.posts-summary-list-item { margin-bottom: 60px; }

.posts-summary-list-title { color: #00b140; font-size: 22.5px; font-weight: 400; }

.posts-summary-posts-list { margin-left: 0; }

.posts-summary-posts-list li { list-style: none; }

.posts-summary-posts-list .posts-summary-posts-list-item { margin-bottom: 30px; }

.posts-summary-posts-list .posts-summary-posts-list-item a { color: #000; font-weight: 700; }

.post-author-container { margin-bottom: 10px; }

.post-author-details { display: inline-block; }

.post-author-details .posts-summary-list-title { margin-bottom: 0; }

.post-author-link > a { margin-left: 57px; font-size: 15.75px; color: #565d6b; }

.posts-search-results { margin-top: 30px; }

/** Archive Page */
.archive .archive-heading-banner { background-color: #00b140; color: #fff; margin-top: -15px; margin-bottom: 50px; padding: 7.5px 0; }

.archive .page-heading { font-size: 36px; }

/** Site header */
.site-header { border-bottom: 1px solid #ccd6dd; position: relative; }

.site-header .social-media-list { margin-top: 10px; }

.site-header .social-media-list li { margin-left: 15px; margin-right: 0; }

.site-title-wrapper { height: 60px; margin: 10px auto 5px; }

.site-title-wrapper .site-title-wrapper-inner { height: 100%; }

@media screen and (max-width: 768px) { .site-title-wrapper { margin: 10px auto; } }

.site-title-container { align-items: center; }

.site-title { background-image: url("/https/engineering.grab.com/img/grab-logo.png"); background-position: center center; background-size: contain; background-repeat: no-repeat; display: inline-block; height: 50px; width: 96px; position: absolute; }

.site-subtitle { color: #898d97; display: inline-block; font-size: 20px; font-weight: 300; padding-top: 13px; vertical-align: top; width: 100px; position: absolute; margin-left: 100px; }

.site-nav { float: right; line-height: 56px; }

.site-nav .menu-icon { display: none; }

.site-nav .page-link { color: #111; line-height: 1.5; }

.site-nav .page-link:not(:first-child) { margin-left: 20px; }

@media screen and (max-width: 768px) { .site-nav { position: absolute; top: 9px; right: 30px; background-color: #fdfdfd; border: 1px solid #ccd6dd; border-radius: 5px; text-align: right; } .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; } .site-nav .menu-icon > svg { width: 18px; height: 15px; } .site-nav .menu-icon > svg path { fill: #565d6b; } .site-nav .trigger { clear: both; display: none; } .site-nav:hover .trigger { display: block; padding-bottom: 5px; } .site-nav .page-link { display: block; padding: 5px 10px; } }

.site-search { align-items: center; display: inline-block; height: 100%; }

.nav-category { margin: 0; display: inline-block; vertical-align: top; }

.nav-category li { display: inline-block; list-style: none; padding: 15px 15px; }

.nav-category li:first-child { padding-left: 0; }

@media screen and (max-width: 768px) { .nav-category li { font-size: 13.5px; } }

/** Search bar */
form { margin-left: -50px; }

.search-icon { position: absolute; z-index: 6; transition: z-index 0.8s, width 0.5s, border 0.3s; height: 45px; width: 0; margin: 4px 0 0 50px; padding: 5px 0 5px 40px; font-size: 16px; font-size: 1.5rem; cursor: pointer; pointer-events: none; border-radius: 30px; border: 1px solid transparent; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik01MDMuODY2LDQ3Ny45NzRMMzYwLjk1OCwzMzUuMDUyYzI4LjcyNS0zNC41NDQsNDYuMDE3LTc4LjkxMiw0Ni4wMTctMTI3LjMzNiAgYzAtMTEwLjA4NC04OS4yMjctMTk5LjMxMi0xOTkuMzEyLTE5OS4zMTJDOTcuNTk5LDguNDAzLDguMzUxLDk3LjYzMSw4LjM1MSwyMDcuNzE1YzAsMTEwLjA2NCw4OS4yNDgsMTk5LjMxMiwxOTkuMzEyLDE5OS4zMTIgIGM0OC40MzUsMCw5Mi43OTItMTcuMjkyLDEyNy4zMzYtNDYuMDE3bDE0Mi45MDgsMTQyLjkyMkw1MDMuODY2LDQ3Ny45NzR6IE0yOS4zMzEsMjA3LjcxNWMwLTk4LjMzNCw3OS45ODctMTc4LjMzMiwxNzguMzMyLTE3OC4zMzIgIGM5OC4zMjUsMCwxNzguMzMyLDc5Ljk5OCwxNzguMzMyLDE3OC4zMzJzLTgwLjAwNywxNzguMzMyLTE3OC4zMzIsMTc4LjMzMkMxMDkuMzE4LDM4Ni4wNDcsMjkuMzMxLDMwNi4wNSwyOS4zMzEsMjA3LjcxNXoiIGZpbGw9IiMzNzQwNEQiLz48L3N2Zz4=) no-repeat left 9px center transparent; background-size: 24px; }

input.search-text { color: #00b140; position: relative; z-index: 5; transition: z-index 0.8s, width 0.5s, border 0.3s; height: 45px; width: 0; margin: 5px 0 0 50px; padding: 5px 0 5px 40px; box-sizing: border-box; font-size: 16px; font-size: 1.5rem; cursor: pointer; border-radius: 30px; border: 1px solid transparent; }

input.search-text:focus { z-index: 3; width: 250px; border: 1px solid #00b140; background-color: white; outline: none; cursor: auto; padding-right: 10px; }

@media screen and (max-width: 768px) { input.search-text:focus { width: 160px; } }

input.search-text:focus:not(:placeholder-shown) ~ .search-submit { visibility: visible; }

@media screen and (max-width: 768px) { input.search-text:focus:not(:placeholder-shown) ~ .search-submit { display: none; } }

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; color: #00b140; }

input.search-icon { position: relative; z-index: 4; top: 8px; left: 49px; width: 45px; height: 45px; margin: 0; padding: 0; border: 0; outline: 0; border-radius: 30px; cursor: pointer; background: none; }

.search-submit { border: 0; position: absolute; width: 14px; transition: 0.2s; margin: 15px 0px 0px -35px; z-index: 10; visibility: hidden; background: transparent; color: #565d6b; }

/** Hamburger navigation */
.hamburger-nav { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 12px; padding: 0; padding-left: 5px; }

.menu-btn { display: inline-block; width: 28px; height: 4px; background: #00b140; border-radius: 5px; transition: all .5s ease-in-out; margin-left: 10px; }

.menu-btn::before, .menu-btn::after { content: ''; position: absolute; width: 28px; height: 4px; background: #00b140; border-radius: 5px; transition: all .5s ease-in-out; }

.menu-btn::before { transform: translateY(-12px); }

.menu-btn::after { transform: translateY(12px); }

.hamburger-nav.open .menu-btn { transform: translateX(-50px); background: transparent; box-shadow: none; }

.hamburger-nav.open .menu-btn::before { transform: rotate(45deg) translate(35px, -35px); }

.hamburger-nav.open .menu-btn::after { transform: rotate(-45deg) translate(35px, 35px); }

.mobile-menu-container { width: 100%; position: absolute; background: #00b140; z-index: 5; left: 0; transform: translateY(11px); visibility: hidden; opacity: 0; transition: opacity 500ms ease-in-out; }

.mobile-menu { display: flex; margin: 0; flex-direction: column; justify-content: center; align-items: center; }

.mobile-menu li { width: 100%; padding: 10px; font-size: 1.8rem; list-style: none; text-align: center; }

.mobile-menu li a { color: #fff; }

.mobile-menu li:first-child { padding-top: 15px; }

.mobile-menu li:hover { background-color: #D9FCDE; }

.mobile-menu li:hover a { color: #00b140; }

.mobile-menu-container.active { visibility: visible; opacity: 1; transition: opacity 500ms ease-in-out; }

/** Site footer */
.site-footer { background-color: #363a45; color: #fff; padding: 15px 0; }

.site-footer .social-media-list a { color: #fff; }

.site-footer .btn { color: #fff; border-color: #fff; }

.site-footer .hiring-section { text-align: right; }

@media screen and (max-width: 768px) { .site-footer .hiring-section { text-align: left; } }

.footer-heading { font-size: 18px; margin-bottom: 7.5px; }

.footer-col-wrapper { font-size: 15px; color: #898d97; margin-left: -7.5px; }

.footer-col { float: left; margin-bottom: 7.5px; padding-left: 7.5px; }

.footer-col-1 { width: -webkit-calc(35% - (15px / 2)); width: calc(35% - (15px / 2)); }

.footer-col-2 { width: -webkit-calc(20% - (15px / 2)); width: calc(20% - (15px / 2)); }

.footer-col-3 { width: -webkit-calc(45% - (15px / 2)); width: calc(45% - (15px / 2)); }

@media screen and (max-width: 768px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (15px / 2)); width: calc(50% - (15px / 2)); } .footer-col-3 { width: -webkit-calc(100% - (15px / 2)); width: calc(100% - (15px / 2)); } }

@media screen and (max-width: 768px) { .footer-col { float: none; width: -webkit-calc(100% - (15px / 2)); width: calc(100% - (15px / 2)); } }

.tags-page .tags-list { margin-bottom: 40px; }

.tags-page .tags-label { color: #898d97; border: none; font-weight: normal; font-size: 16px; padding: 0.5em 0.6em; min-height: 40px; line-height: 1.7rem; max-width: max-content; }

.tags-page .tags-label:hover { color: #00b140; background: none; }

.tags-page .heading-banner { background-color: #00b140; color: #fff; margin-top: -15px; padding: 7.5px 0; }

.tags-page .page-heading { font-size: 36px; }

.letters-navigation { width: 100%; text-align: center; }

.letters-navigation a { color: #898d97; font-size: 22.5px; margin: 0 6.4px; }

.letters-navigation a:hover { text-decoration: underline; }

.tags-label { padding: 0.3em 0.6em; max-width: 150px; overflow: auto; white-space: normal; text-align: left; background: none; border: 1px solid #488be4; color: #488be4; }

.tags-label:hover { background-color: #488be4; color: #fff; }

.letter-row { display: flex; align-items: center; border-bottom: 1px solid #ccd6dd; padding: 15px 0 15px 0; }

@media screen and (max-width: 768px) { .letter-row { display: block; } }

.tags-letter { color: #00b140; margin-left: 8px; }

.tags-col { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; }

@media screen and (max-width: 763px) { #tags-container { display: none; } }

#tags-container-mobile { display: none; }

@media screen and (max-width: 763px) { #tags-container-mobile { display: block; } }

.social-media-list { list-style: none; margin-left: 0; }

.social-media-list li { display: inline-block; margin-right: 10px; }

.social-media-list li a { color: #565d6b; }

.btn.btn-share { color: #fff; font-family: Helvetica, Arial, sans-serif; }

.btn.btn-share, .btn.btn-share:focus, .btn.btn-share:active { border: none; color: #fff; }

.btn.btn-share.btn-share-twitter { background-color: #55acee; }

.btn.btn-share.btn-share-twitter:hover { background-color: #2795e9; }

.btn.btn-share.btn-share-facebook { background-color: #3b5998; }

.btn.btn-share.btn-share-facebook:hover { background-color: #2d4373; }

.btn.btn-share.btn-share-linkedin { background-color: #0077b5; }

.btn.btn-share.btn-share-linkedin:hover { background-color: #005582; }

.hiring-panel .hiring-tagline { line-height: 34px; margin-bottom: 0; }

@media screen and (max-width: 768px) { .hiring-panel .hiring-tagline { text-align: center; } }

.hiring-panel .hiring-btn-container { text-align: right; }

@media screen and (max-width: 768px) { .hiring-panel .hiring-btn-container { text-align: center; } }

/** Syntax highlighting styles */
.highlight { background: #fff; }

.highlight .c { color: #998; font-style: italic; }

.highlight .err { color: #a61717; background-color: #e3d2d2; }

.highlight .k { font-weight: bold; }

.highlight .o { font-weight: bold; }

.highlight .cm { color: #998; font-style: italic; }

.highlight .cp { color: #999; font-weight: bold; }

.highlight .c1 { color: #998; font-style: italic; }

.highlight .cs { color: #999; font-weight: bold; font-style: italic; }

.highlight .gd { color: #000; background-color: #fdd; }

.highlight .gd .x { color: #000; background-color: #faa; }

.highlight .ge { font-style: italic; }

.highlight .gr { color: #a00; }

.highlight .gh { color: #999; }

.highlight .gi { color: #000; background-color: #dfd; }

.highlight .gi .x { color: #000; background-color: #afa; }

.highlight .go { color: #888; }

.highlight .gp { color: #555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #aaa; }

.highlight .gt { color: #a00; }

.highlight .kc { font-weight: bold; }

.highlight .kd { font-weight: bold; }

.highlight .kp { font-weight: bold; }

.highlight .kr { font-weight: bold; }

.highlight .kt { color: #458; font-weight: bold; }

.highlight .m { color: #099; }

.highlight .s { color: #d14; }

.highlight .na { color: #008080; }

.highlight .nb { color: #0086B3; }

.highlight .nc { color: #458; font-weight: bold; }

.highlight .no { color: #008080; }

.highlight .ni { color: #800080; }

.highlight .ne { color: #900; font-weight: bold; }

.highlight .nf { color: #900; font-weight: bold; }

.highlight .nn { color: #555; }

.highlight .nt { color: #000080; }

.highlight .nv { color: #008080; }

.highlight .ow { font-weight: bold; }

.highlight .w { color: #bbb; }

.highlight .mf { color: #099; }

.highlight .mh { color: #099; }

.highlight .mi { color: #099; }

.highlight .mo { color: #099; }

.highlight .sb { color: #d14; }

.highlight .sc { color: #d14; }

.highlight .sd { color: #d14; }

.highlight .s2 { color: #d14; }

.highlight .se { color: #d14; }

.highlight .sh { color: #d14; }

.highlight .si { color: #d14; }

.highlight .sx { color: #d14; }

.highlight .sr { color: #009926; }

.highlight .s1 { color: #d14; }

.highlight .ss { color: #990073; }

.highlight .bp { color: #999; }

.highlight .vc { color: #008080; }

.highlight .vg { color: #008080; }

.highlight .vi { color: #008080; }

.highlight .il { color: #099; }

.video-container { height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; width: 100%; }

.video-container .video-frame { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

@-webkit-keyframes border-transform { 0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; }
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; }
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; }
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; }
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } }

.progress-wrap { position: fixed; right: 20px; bottom: 20px; height: 50px; width: 50px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); z-index: 10000; opacity: 1; visibility: visible; transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear; }

.progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); }

.progress-wrap.active-progress:hover { background-color: #00b140; }

.progress-wrap.active-progress:hover .btt-btn { color: #fff; animation: spin-animation 0.3s 1; }

.progress-wrap.active-progress .btt-btn { visibility: visible; }

.progress-wrap:hover::after { opacity: 0; }

.progress-wrap:hover::before { opacity: 1; }

.progress-wrap svg path { fill: none; }

.progress-wrap svg.progress-circle path { stroke: #00b140; stroke-width: 4; box-sizing: border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; }

.btt-btn { position: absolute; font-size: 25px; left: 0px; margin: 10px 0 0 12px; color: #ccd6dd; visibility: hidden; color: #00b140; }

.btt-btn:hover { color: #fff; animation: spin-animation 0.3s 1; }

@keyframes spin-animation { 0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); } }

/*# sourceMappingURL=main.css.map */