.tippy-box[data-animation=fade][data-state=hidden] {
    opacity: 0
}

[data-tippy-root] {
    max-width: calc(100vw - 10px)
}

.tippy-box {
    position: relative;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    outline: 0;
    transition-property: transform, visibility, opacity
}

.tippy-box[data-placement^=top]>.tippy-arrow {
    bottom: 0
}

.tippy-box[data-placement^=top]>.tippy-arrow:before {
    bottom: -7px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: initial;
    transform-origin: center top
}

.tippy-box[data-placement^=bottom]>.tippy-arrow {
    top: 0
}

.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
    top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
    transform-origin: center bottom
}

.tippy-box[data-placement^=left]>.tippy-arrow {
    right: 0
}

.tippy-box[data-placement^=left]>.tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
    right: -7px;
    transform-origin: center left
}

.tippy-box[data-placement^=right]>.tippy-arrow {
    left: 0
}

.tippy-box[data-placement^=right]>.tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
    transform-origin: center right
}

.tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
}

.tippy-arrow {
    width: 16px;
    height: 16px;
    color: #333
}

.tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid
}

.tippy-content {
    position: relative;
    padding: 5px 9px;
    z-index: 1
}

:root {
    --padded-content-padding: 50px
}

html {
    width: 100vw;
    overflow-x: hidden
}

body {
    background-color: #fff !important
}

body {
    margin: 0;
    color: #444;
    line-height: normal;
    max-width: 100vw
}

h1,
h2,
h3 {
    margin: 10px 0;
    font-weight: 300;
    line-height: 1.2
}

h1 {
    font-size: 2em
}

h2 {
    font-size: 1.8em
}

p {
    margin: 10px 0;
    font-weight: 400;
    line-height: 1.5
}

ul {
    font-weight: 400
}

a {
    position: relative;
    cursor: pointer;
    color: #2c7b6e
}

a:hover,
a:visited {
    color: #2c7b6e
}

a:focus,
a:hover {
    -webkit-text-decoration: none;
    text-decoration: none
}

a.arrow::after {
    content: " ";
    display: inline-block;
    position: relative;
    height: 17px;
    width: 17px;
    top: 3px;
    background-image: url("files/arrow.488071f05b7a8e2c4c82.png");
    background-size: 100%;
    margin-left: 5px
}

a.silver {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

ol a:hover,
p a:hover,
span a:hover,
ul a:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.flex {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.float.left {
    float: left
}

.float.right {
    float: right
}

.float.clear {
    clear: both
}

.small {
    font-size: .8em
}

.box-shadow {
    box-shadow: 0 0 80px hsla(0, 0%, 0%, .12)
}

.grey {
    color: #999
}

.dark-grey {
    color: #666
}

.bold {
    font-weight: 600
}

.padded-content {
    padding: 50px;
    padding: var(--padded-content-padding)
}

.clear-float {
    clear: both
}

::selection {
    background-color: hsla(31, 84%, 60%, .3)
}

.center {
    text-align: center
}

.button,
button {
    padding: 5px 12px;
    font-family: inherit;
    font-size: .7em;
    background-color: #fff;
    color: #444;
    line-height: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: 0
}

.button:active,
button:active {
    background-color: #f9f9f9;
    border-color: #bababa
}

.button.green,
button.green {
    color: #fff;
    background-color: #4ebfac;
    border-color: #3c9e8c
}

.button.green:hover,
button.green:hover {
    background-color: #61c6b5
}

.button.green:active,
button.green:active {
    background-color: #40b3a0
}

.button.black-current-value,
button.black-current-value {
    color: #333;
    background-color: transparent;
    border-color: #878787
}

.silver {
    color: #fff !important
}

.silver {
    opacity: .8
}

.silver:hover {
    opacity: 1
}

.silver.bold {
    font-weight: 600
}

.main {
    width: calc(100% - 200px - 20px);
    margin: 0 auto
}

.app-main {
    padding: 0 !important
}

.app-main {
    max-width: none;
    min-width: 0
}

.header {
    display: none
}

.portico-landing {
    position: relative;
    padding-top: 120px;
    z-index: 1
}

.portico-landing.show {
    opacity: 1
}

.portico-landing.case-studies-page .padded-content,
.portico-landing.why-page .padded-content {
    padding-top: 0
}

.portico-landing.case-studies-page .inner-content,
.portico-landing.why-page .inner-content {
    padding-top: 50px;
    padding-top: var(--padded-content-padding)
}

.portico-landing :target {
    scroll-margin-top: 60px
}

.portico-landing.features-app {
    position: relative;
    overflow-x: hidden;
    padding-top: 0;
    z-index: 2
}

.portico-landing.features-app .gradients {
    z-index: -1
}

.portico-landing.features-app section {
    max-width: 1440px;
    display: flex;
    flex: 1 1 auto;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 40px auto;
    padding: 0 30px;
    color: #2a3240
}

.portico-landing.features-app section.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    padding: 100px 100px 50px;
    margin: 0;
    max-width: none;
    color: #fff;
    background-color: hsla(0, 0%, 0%, .1)
}

.portico-landing.features-app section.hero .copy {
    max-width: 800px;
    margin: 0 auto;
    text-align: center
}

.portico-landing.features-app section.hero h1 {
    margin: 0;
    font-size: 3.7em
}

.portico-landing.features-app section.hero h2 {
    font-size: 1.8em;
    margin: 30px auto 0;
    max-width: 600px;
    line-height: 1.3
}

.portico-landing.features-app section.hero .image {
    height: 400px;
    width: 40%;
    background-color: hsla(0, 0%, 0%, .05)
}

.portico-landing.features-app section.keyboard-shortcuts {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: none;
    padding: 50px;
    margin-top: 0;
    background-color: #2a3240;
    color: #dfe9fa
}

.portico-landing.features-app section.keyboard-shortcuts img.overflow-wave {
    width: 685px;
    right: 0;
    top: -168px;
    position: absolute
}

.portico-landing.features-app section.keyboard-shortcuts img.image {
    width: 600px;
    margin-left: 100px
}

.portico-landing.features-app section.keyboard-shortcuts h3 {
    font-size: 3em
}

.portico-landing.features-app section.keyboard-shortcuts .feature-block {
    width: 50%
}

.portico-landing.features-app section.keyboard-shortcuts p {
    font-size: 1.2em
}

.portico-landing.features-app section.keyboard-shortcuts a.cta {
    font-size: 1em;
    color: #8adacd
}

.portico-landing.features-app section.messages {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    padding: 0 50px
}

.portico-landing.features-app section.messages .image {
    width: calc(100% - 500px - 100px);
    margin: 50px 0 50px 50px;
    max-width: 500px
}

.portico-landing.features-app section.messages .features {
    max-width: 500px
}

.portico-landing.features-app section.messages .features h2 {
    margin: 0
}

.portico-landing.features-app section.messages .features .feature-block {
    display: block;
    margin: 30px 0
}

.portico-landing.features-app section.notifications {
    position: relative;
    padding: 50px 100px;
    max-width: calc(1000px);
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 10px 20px 80px hsla(0, 0%, 0%, .15);
    margin: 100px auto 150px;
    text-align: center
}

.portico-landing.features-app section.notifications .envelope {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 40vw
}

.portico-landing.features-app section.notifications h2 {
    position: relative;
    margin-bottom: 120px;
    top: 0
}

.portico-landing.features-app section.notifications .feature-list {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: 35px 0 0 20px;
    z-index: 1
}

.portico-landing.features-app section.notifications .feature-list h3 {
    position: relative;
    margin: 15px 0 15px 50px;
    font-size: 1.2em;
    font-weight: 400;
    color: #878787
}

.portico-landing.features-app section.notifications .feature-list h3::before {
    content: " ";
    display: block;
    position: absolute;
    left: -35px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-image: url("files/checkbox-green.1f4d72ab6f6dd39e2d70.svg");
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat
}

.portico-landing.features-app section.notifications .image-block {
    width: 400px;
    height: 280px;
    background: linear-gradient(135deg, hsla(0, 0%, 0%, .05), hsla(0, 0%, 0%, .2));
    border-radius: 4px;
    background-image: url("files/notifications.66e67b464b1a67604766.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block
}

.portico-landing.features-app section .feature-block {
    display: inline-block;
    vertical-align: top
}

.portico-landing.features-app section h2 {
    font-size: 2.5em;
    text-align: center;
    margin: 0 10px;
    line-height: 1.6;
    flex: 1 0 100%
}

.portico-landing.features-app section>.feature-block {
    padding: 10px 20px;
    flex: 1 1 320px;
    color: inherit
}

.portico-landing.features-app section a.feature-block:hover {
    box-shadow: 0 3px 10px #bfbfbf
}

.portico-landing.features-app section a.feature-block:active {
    box-shadow: 0 3px 10px #7f7f7f
}

.portico-landing.features-app .cta::after {
    content: "\2192";
    margin-left: 5px;
    transform: scaleX(2);
    transition: all .3s ease
}

.portico-landing.features-app .cta:hover::after {
    margin-left: 10px
}

.portico-landing.features-app .feature-block h3 {
    font-size: 1.2em;
    font-weight: 600
}

.portico-landing.features-app .feature-block p {
    margin: 0;
    opacity: .8
}

.portico-landing.hello {
    background-color: transparent;
    color: #404e67
}

.portico-landing.hello .hero-buttons {
    margin-top: 40px
}

.portico-landing.hello .hero {
    position: relative;
    padding: 60px 50px 30px;
    color: #fff;
    overflow: hidden
}

.portico-landing.hello .hero .content {
    position: relative;
    z-index: 1;
    text-align: center
}

.portico-landing.hello .hero .content p {
    font-weight: 400;
    opacity: .85
}

.portico-landing.hello .hero header {
    width: 850px;
    display: inline-block;
    text-align: left
}

.portico-landing.hello .hero header h1 {
    font-size: 3em;
    font-weight: 400;
    text-shadow: 0 0 20px hsla(0, 0%, 100%, .2)
}

.portico-landing.hello .hero header p {
    margin: 30px 0;
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.4;
    text-shadow: 0 0 5px hsla(164, 74%, 15%, .3), 0 0 20px hsla(0, 0%, 100%, .2)
}

.portico-landing.hello .hero header a {
    display: block;
    margin: 20px auto 0;
    text-align: center
}

.portico-landing.hello .hero header button {
    margin-top: 0;
    padding: 12px 20px;
    background-color: #fff;
    border: 2px solid #fff;
    font-size: 1.2em;
    font-weight: 500;
    color: #659e80;
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, .2);
    transition: all .2s ease
}

.portico-landing.hello .hero header button:hover {
    box-shadow: 0 3px 10px hsla(0, 0%, 100%, .2)
}

.portico-landing.hello .hero header button:active {
    box-shadow: 0 3px 20px hsla(0, 0%, 100%, .5)
}

.portico-landing.hello .gradients .gradient {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1100px
}

.portico-landing.hello .gradients .gradient.dark-blue {
    background: linear-gradient(10deg, hsla(196, 58%, 14%, 0) 50%, hsla(196, 58%, 14%, .7))
}

.portico-landing.hello .gradients .gradient.green {
    background: linear-gradient(-25deg, hsla(156, 47%, 47%, 0) 40%, #3fb083)
}

.portico-landing.hello .gradients .gradient.blue {
    background: linear-gradient(25deg, hsla(196, 38%, 51%, 0) 40%, #5298b1)
}

.portico-landing.hello .gradients .gradient.sunburst {
    background: linear-gradient(5deg, hsla(49, 71%, 68%, 0) 20%, #e7d273)
}

.portico-landing.hello .gradients .gradient.white-fade {
    background: linear-gradient(0deg, #f9f9f9 0, hsla(0, 0%, 98%, 0) 40%)
}

@keyframes waves {
    0% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(180deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes wavesBackward {
    0% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(-180deg)
    }

    100% {
        transform: rotate(-360deg)
    }
}

.compare,
.compare-education {
    background: linear-gradient(198deg, #4fa093, #79b894);
    color: #fff
}

.compare .table-container,
.compare-education .table-container {
    overflow-x: auto
}

.compare .gradients .gradient.white-fade,
.compare-education .gradients .gradient.white-fade {
    background: 0 0
}

.compare .text-header .text-content h1,
.compare-education .text-header .text-content h1 {
    margin-top: 0
}

.compare .padded-content,
.compare-education .padded-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.compare table,
.compare-education table {
    min-width: 550px;
    padding: 33px;
    border: 20px solid transparent;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    font-weight: 400;
    color: hsla(0, 0%, 100%, .8)
}

.compare table thead th:last-of-type,
.compare-education table thead th:last-of-type {
    width: 120px
}

.compare table thead th.uniform,
.compare-education table thead th.uniform {
    width: 20%
}

.compare table td:not(:first-of-type),
.compare table th:not(:first-of-type),
.compare-education table td:not(:first-of-type),
.compare-education table th:not(:first-of-type) {
    text-align: center
}

.compare thead,
.compare-education thead {
    border-bottom: 3px solid hsla(0, 0%, 0%, .1)
}

.compare thead th,
.compare-education thead th {
    font-weight: 600;
    padding: 15px 0;
    font-size: 18px;
    color: #fff
}

.compare thead th.normal,
.compare-education thead th.normal {
    font-weight: 400;
    color: inherit
}

.compare thead th:first-of-type,
.compare-education thead th:first-of-type {
    width: 28%;
    background-color: #3c4762
}

.compare thead th:nth-of-type(2),
.compare-education thead th:nth-of-type(2) {
    width: 18%;
    background-color: #035762
}

.compare thead th:nth-of-type(3),
.compare thead th:nth-of-type(4),
.compare thead th:nth-of-type(5),
.compare thead th:nth-of-type(6),
.compare-education thead th:nth-of-type(3),
.compare-education thead th:nth-of-type(4),
.compare-education thead th:nth-of-type(5),
.compare-education thead th:nth-of-type(6) {
    width: 18%;
    background-color: #156a50
}

.compare .gradients,
.compare-education .gradients {
    position: static
}

.compare tbody tr,
.compare-education tbody tr {
    border-bottom: 1px solid hsla(360, 0%, 100%, .03)
}

.compare tbody tr td,
.compare-education tbody tr td {
    padding: 10px 0
}

.compare tbody tr td:first-of-type,
.compare-education tbody tr td:first-of-type {
    background-color: #515d7a
}

.compare tbody tr td:nth-of-type(2),
.compare-education tbody tr td:nth-of-type(2) {
    background-color: hsl(186.9, 90.3%, 28.4%)
}

.compare tbody tr td:nth-of-type(3),
.compare tbody tr td:nth-of-type(4),
.compare tbody tr td:nth-of-type(5),
.compare tbody tr td:nth-of-type(6),
.compare-education tbody tr td:nth-of-type(3),
.compare-education tbody tr td:nth-of-type(4),
.compare-education tbody tr td:nth-of-type(5),
.compare-education tbody tr td:nth-of-type(6) {
    background-color: #368b71
}

.compare tbody tr td.no,
.compare-education tbody tr td.no {
    text-align: center
}

.compare tbody tr td.yes::before,
.compare-education tbody tr td.yes::before {
    content: " ";
    display: inline-block;
    width: 27px;
    height: 27px;
    background-image: url("files/checkmark.14a40be3f3ba11947e8a.png");
    background-size: 100% auto
}

.compare tbody tr td.no::before,
.compare-education tbody tr td.no::before {
    content: "\d7";
    position: relative;
    display: inline-block;
    top: 3px;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: .9;
    opacity: .4
}

.compare tbody tr td a,
.compare-education tbody tr td a {
    font-size: .9rem;
    font-weight: 400;
    text-transform: uppercase
}

.compare p,
.compare-education p {
    font-weight: 300
}

.compare .terms,
.compare-education .terms {
    margin-top: 30px;
    font-weight: 400;
    font-size: .7em;
    line-height: 1.2;
    color: #482c2c
}

.compare .terms a,
.compare-education .terms a {
    color: #99dacf
}

.compare-education {
    color: #000;
    background: 0 0
}

.compare-education table {
    min-width: 650px
}

.compare-education table .number {
    font-weight: 800
}

.compare-education table .number.one {
    color: hsla(0, 0%, 100%, .4)
}

.compare-education table td:first-of-type {
    padding: 10px 10px 10px 0
}

.faqs {
    position: relative;
    background-color: #f9f9f9
}

.faqs .padded-content {
    position: relative;
    z-index: 1
}

.faqs header {
    max-width: 700px;
    margin: 0 auto
}

.faqs header h1 span {
    vertical-align: top
}

.faqs .faq {
    margin: 50px auto;
    max-width: 700px;
    font-size: 1.2em;
    color: #3b3e43
}

.faqs .faq .question {
    font-weight: 600;
    color: #515d7a;
    font-size: 1.1em
}

.faqs .faq .answer {
    margin: 20px 0 0;
    font-weight: 400
}

.faqs .faq-box div:last-of-type {
    margin-bottom: 10px
}

.faqs .faq-header-link {
    color: #000
}

.faqs .faq-header-link:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.screen .line {
    width: 100%;
    height: 6px;
    margin: 8px 0;
    background-color: #ededed;
    border-radius: 3px
}

.screen .line.small {
    width: 60%
}

.screen .line.micro {
    display: inline-block;
    vertical-align: top;
    width: 15%
}

.screen .line.nano {
    display: inline-block;
    vertical-align: top;
    width: 10%
}

.screen .line.med {
    width: 80%
}

.screen .line.red {
    background-color: #dcabb3
}

.screen .line.blue {
    background-color: #abd2dc
}

.screen .line.green {
    background-color: #acdcab
}

.screen .line.orange {
    background-color: #dcc4ab
}

.screen .top .avatar {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    background-color: #bababa;
    border-radius: 4px
}

.screen .top .top-line {
    display: inline-block;
    vertical-align: top;
    width: 50px;
    margin-top: 0;
    background-color: #bababa
}

.screen .navbar {
    background-color: #51c2af;
    padding: 10px
}

.screen .center-page {
    height: 100%;
    position: relative;
    overflow: hidden
}

.screen .center-page .message-feed {
    height: calc(100% - 20px);
    margin-top: 20px;
    transition: all .1s ease
}

.screen .message-feed .message .content {
    margin-left: 24px;
    position: relative;
    top: -15px
}

.screen .message-feed .stream {
    padding: 3px 5px 0;
    margin: 0 5px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 15px hsla(0, 0%, 0%, .01)
}

.portico-landing.hello .screen {
    position: relative;
    margin: -300px auto 0;
    width: 600px;
    height: 350px;
    padding: 10px 30px;
    border-radius: 12px;
    box-shadow: 0 0 50px hsla(0, 0%, 0%, .2);
    background-color: #444;
    z-index: 1
}

.portico-landing.hello .screen::before {
    content: " ";
    position: absolute;
    top: calc(50% - 5px);
    left: 20px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #212121
}

.portico-landing.hello .screen::after {
    content: " ";
    position: absolute;
    top: calc(50% - 12.5px);
    right: 8px;
    width: 25px;
    height: 25px;
    border-radius: 13px;
    background-color: #bababa
}

.portico-landing.hello .screen .main-page {
    display: inline-block;
    height: calc(100% - 30px);
    width: calc(100% - 30px);
    margin: 10px;
    border: 5px solid #212121;
    border-radius: 4px;
    background-color: #f9f9f9
}

.portico-landing.hello .features {
    padding: 50px 0 100px;
    background-color: #fff
}

.portico-landing.hello .open-source {
    text-align: center;
    position: relative;
    z-index: 1;
    background-color: #e9ecf1
}

.portico-landing.hello .open-source .flex {
    min-height: 0;
    padding: 50px 0
}

.portico-landing.hello .open-source img {
    margin: 0 2%;
    width: 28%;
    max-width: 500px;
    display: inline-block
}

.portico-landing.hello .open-source .il-block {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    max-width: 700px;
    text-align: left
}

.portico-landing.hello .open-source h2 {
    font-weight: 400
}

.carousel.carousel-fade .carousel-inner .item {
    display: block;
    opacity: 0;
    height: 0;
    transition: opacity .4s ease;
    visibility: hidden
}

.carousel.carousel-fade .carousel-inner .item.active {
    opacity: 1;
    height: auto;
    visibility: visible
}

.carousel.carousel-fade .carousel-inner .item.active.left,
.carousel.carousel-fade .carousel-inner .item.active.right {
    left: 0;
    opacity: 0;
    z-index: 2
}

.carousel.carousel-fade .carousel-inner .item.next.left,
.carousel.carousel-fade .carousel-inner .item.prev.right {
    opacity: 1;
    z-index: 1
}

.carousel.carousel-fade .carousel-inner .item-inner {
    position: relative
}

.carousel.carousel-fade .carousel-inner .next.left .item-inner,
.carousel.carousel-fade .carousel-inner .prev.right .item-inner {
    padding: 30px 20px
}

.portico-landing .tour {
    color: #000;
    width: 1200px;
    max-width: 100%;
    margin: 0 auto
}

.tour .carousel-inner .item-container {
    width: 80%;
    height: 520px;
    margin: 20px auto;
    padding: 30px 20px;
    background: linear-gradient(hsla(220, 20%, 97%, .4), hsla(220, 20%, 97%, .9));
    border-radius: 12px;
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, .02);
    position: relative
}

.tour .carousel-inner .start-button {
    padding: 11px 25px;
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
    background: linear-gradient(145deg, #4bb4cc, #25b097);
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, .2);
    border: 0;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -25px;
    width: 200px;
    height: 50px;
    z-index: 10
}

.tour .carousel-inner .start-button:hover {
    background-color: #25b097;
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, .3)
}

.tour .carousel-inner .start-image {
    position: relative;
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 100%;
    border: 1px solid #ddd;
    opacity: .4
}

.tour .carousel-inner .tour-item-header {
    margin: 0 0 30px 54px;
    max-width: 700px;
    font-size: 1.3em;
    text-align: left
}

.tour .carousel-inner .tour-item-header-top-push {
    margin-top: 40px
}

.tour .carousel-inner .tour-item-header-centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

.tour .carousel-inner .zulip-slack-comparison {
    display: flex;
    text-align: left;
    width: 850px;
    max-width: 100%;
    margin: 20px auto 0;
    position: relative
}

.tour .carousel-inner .zulip-slack-comparison .comparison-zulip {
    width: 500px
}

.tour .carousel-inner .zulip-slack-comparison .comparison-slack {
    width: 300px
}

.tour .carousel-inner .zulip-slack-comparison img {
    max-width: 100%
}

.tour .carousel-inner .zulip-slack-comparison img.zulip-streams-selected {
    width: 320px;
    border: 0
}

.tour .carousel-inner .zulip-slack-comparison img.slack-streams-selected {
    width: 200px
}

.tour .carousel-inner .zulip-slack-comparison img.zulip-unreads-arrows {
    width: 406px;
    border: 0
}

.tour .carousel-inner .zulip-slack-comparison img.slack-stream-unreads {
    width: 200px
}

.tour .carousel-inner .zulip-slack-comparison .caption {
    text-align: left;
    font-weight: 700;
    margin-bottom: 10px
}

.tour .carousel-inner img {
    border: 1px solid #f1f2f3
}

.tour .carousel-inner img.centered-image {
    display: block;
    margin: 0 auto
}

.tour .carousel-inner img.zulip-streams {
    width: 200px
}

.tour .carousel-inner img.slack-streams {
    width: 200px
}

.tour .carousel-inner img.zulip-topic {
    margin: -10px 0 0 50px;
    width: 800px
}

.tour .carousel-inner img.slack-overwhelming {
    border: none;
    width: 750px;
    margin: -30px 0 0 50px
}

.tour .carousel-inner img.zulip-easy {
    border: none;
    width: 700px;
    margin-left: 50px
}

.tour .carousel-inner .mobile-hide,
.tour .carousel-inner img.centered-image.mobile-hide,
.tour .carousel-inner img.mobile-hide {
    display: block
}

.tour .carousel-inner .mobile-show,
.tour .carousel-inner img.centered-image.mobile-show,
.tour .carousel-inner img.mobile-show {
    display: none
}

.tour .carousel-inner .comparison-slack img {
    margin: 0
}

.tour .carousel-inner .other-resources {
    text-align: left;
    margin: 30px auto;
    max-width: 600px
}

.tour .carousel-inner .other-resources .other-resources-section {
    display: inline-block;
    width: 48%;
    text-align: center;
    vertical-align: top
}

.tour .carousel-inner .other-resources .other-resources-section img {
    border: 0;
    display: block;
    margin: 0 auto
}

.tour .carousel-inner .call-to-action {
    display: inline-block;
    margin: 40px auto;
    padding: 11px 25px;
    font-size: 1.2rem;
    line-height: 20px;
    font-weight: 400;
    color: #fff;
    background: linear-gradient(145deg, #4bb4cc, #25b097);
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, .2);
    border-radius: 4px
}

.tour .carousel-inner .call-to-action:hover {
    background-color: #25b097;
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, .3)
}

.tour .carousel-control {
    background: 0;
    border: 0;
    color: #747d94;
    font-size: 2em;
    top: 50%;
    font-weight: 400;
    opacity: 1;
    border-radius: 0
}

.tour .carousel-control:hover {
    color: #404d67
}

.tour .carousel-control.right {
    right: 40px
}

.tour .carousel-control.left {
    left: 40px
}

.carousel-indicators {
    margin: 20px 0 0;
    display: flex;
    justify-content: center;
    padding-left: 0;
    list-style: none;
    position: relative;
    top: auto;
    right: auto
}

.carousel-indicators li {
    position: relative;
    flex: 0 1 auto;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin-right: 10px;
    margin-left: 10px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #9da4b2;
    transition: background .1s ease
}

.carousel-indicators li::before {
    position: absolute;
    top: -10px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 10px;
    content: ""
}

.carousel-indicators li::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 10px;
    content: ""
}

.carousel-indicators li.active {
    background-color: #404d67
}

.portico-landing .testimonials {
    color: #fff;
    background-color: #22574c
}

.portico-landing .testimonials .text-header .text-content {
    float: left
}

.portico-landing .testimonials .quote-container {
    width: 98%;
    margin: 30px auto 20px;
    padding-left: 2%;
    font-size: 1.2rem
}

.portico-landing .testimonials .carousel {
    min-height: 250px
}

.portico-landing .testimonials .carousel-quotes {
    width: 60%;
    margin: auto
}

.portico-landing .testimonials .carousel-inner {
    width: 100%;
    left: -2%
}

.portico-landing .testimonials .fa-chevron-left,
.portico-landing .testimonials .fa-chevron-right {
    color: #fff;
    opacity: .5;
    position: absolute;
    font-size: 36px;
    top: 40%
}

.portico-landing .testimonials .fa-chevron-right {
    right: 10%
}

.portico-landing .testimonials .fa-chevron-left {
    left: 10%
}

.portico-landing .testimonials .fa-chevron-left:hover,
.portico-landing .testimonials .fa-chevron-right:hover {
    opacity: 1
}

.portico-landing .testimonials blockquote::before {
    content: "“";
    margin-left: -10px;
    margin-right: -3px
}

.portico-landing .testimonials blockquote::after {
    content: "”"
}

.portico-landing .testimonials blockquote+cite {
    display: block;
    margin-top: 5px;
    margin-bottom: 30px;
    color: #fff;
    opacity: .7;
    font-weight: 400;
    font-style: normal
}

.portico-landing .testimonials blockquote {
    padding: 0;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    border: none;
    opacity: .8
}

.portico-landing .testimonials hr {
    width: 60%;
    margin: 0 auto;
    border: none;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2)
}

.portico-landing .testimonials .company-container {
    width: 60%;
    margin: 30px auto;
    text-align: left
}

.portico-landing .testimonials .company-box {
    margin-top: 20px
}

.portico-landing .testimonials .company-container header h2 {
    font-weight: 400;
    font-size: 1.5em
}

.portico-landing .testimonials .company-container header .arrow {
    margin-top: 12px;
    font-weight: 400
}

.portico-landing .testimonials .company-box .company {
    display: inline-block;
    margin: 10px 20px;
    height: 60px;
    width: calc(25% - 44px);
    background-color: #aaa;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.portico-landing .testimonials .company-box .company.akamai {
    background-image: url("files/akamai.36405272b7e24c81e5bc.png");
    background-color: transparent
}

.portico-landing .testimonials .company-box .company.doctorondemand {
    background-image: url("files/doctorondemand.0a380a456118ade76394.png");
    background-color: transparent
}

.portico-landing .testimonials .company-box .company.layershift {
    background-image: url("files/layershift.9a447b16f23366949ca4.png");
    background-color: transparent
}

.portico-landing .testimonials .company-box .company.recurse {
    background-image: url("files/recurse.9f902d1b5eb22d5a5c91.png");
    background-color: transparent
}

.portico-landing .testimonials .company-box .company.panjiva {
    background-image: url("files/panjiva.b47d471cb5d49858b2ad.png");
    background-color: transparent
}

.portico-landing .testimonials .company-box .company.cmt {
    background-image: url("files/cambridge-mobile-telematics.1ea687829f0b5b7673ae.png");
    background-color: transparent
}

.portico-landing .testimonials .company-box .company.levelup {
    background-image: url("files/levelup.f929dd666d1821c4a240.png");
    background-color: transparent
}

.portico-landing .testimonials .company-box .company.mariadb {
    background-image: url("files/mariadb.22e0a68197d38ee933d1.png");
    background-color: transparent
}

.portico-landing .testimonials .company-box .company.wikimedia-outreach {
    background-image: url("files/wikimedia-outreach.e763190f6dab74992229.png");
    background-color: transparent
}

.portico-landing .testimonials .company-box .company.mixxx {
    background-image: url("files/mixxx.32b25e636c5456641129.png");
    background-color: transparent;
    height: 45px
}

.portico-landing.hello .apps {
    position: relative;
    padding: 200px 80px 100px;
    margin-top: -50px;
    background: linear-gradient(145deg, #4bb4cc, #25b097);
    color: #fff
}

.portico-landing.hello .apps .triangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 150px 100vw 0 0;
    border-color: #f9f9f9 transparent transparent transparent
}

.portico-landing.hello .apps .arrow {
    color: #fff;
    font-weight: 400
}

.portico-landing.hello .apps .arrow::before {
    background-color: #fff
}

.portico-landing.hello .apps .left-side,
.portico-landing.hello .apps .right-side {
    display: inline-block;
    vertical-align: top
}

.portico-landing.hello .apps .left-side {
    width: calc(60% - 4px)
}

.portico-landing.hello .apps .right-side {
    width: calc(40% - 4px);
    text-align: center
}

.portico-landing.hello .apps .left-side .content {
    width: 650px;
    margin: 50px auto
}

.portico-landing.hello .apps .left-side .platform-icons {
    text-align: center
}

.portico-landing.hello .apps .left-side .platform-icons .group h2 {
    font-size: 1.5em
}

.portico-landing.hello .apps .left-side .platform-icons .group {
    display: inline-block;
    vertical-align: top;
    margin: 0 30px;
    text-align: center
}

.portico-landing.hello .apps .left-side .platform-icons .group a {
    color: inherit
}

.portico-landing.hello .apps .left-side .platform-icons .group i {
    display: inline-block;
    width: 80px;
    font-size: 3.5em;
    opacity: .8
}

.portico-landing.hello .apps .left-side .platform-icons .group i:hover {
    opacity: 1
}

.portico-landing.hello .apps .arrow::after {
    filter: brightness(4) saturate(0)
}

.portico-landing.hello .integrations {
    padding: 80px
}

.portico-landing.hello .integrations .content {
    margin-left: 50px
}

.portico-landing.hello .integrations .integration-icons {
    width: 100%;
    margin: 20px 0;
    text-align: center
}

.portico-landing.hello .integrations .integration-icons .group {
    display: inline-block;
    vertical-align: top;
    width: 155px;
    height: 220px;
    padding: 0 5px;
    transition: all .3s ease;
    margin: 10px 5px;
    color: #404e67;
    border-radius: 5px;
    border: 1px solid #e5eef5
}

.portico-landing.hello .integrations .integration-icons .group:hover {
    border: 1px solid #4ebfac
}

.portico-landing.hello .integrations .integration-logo {
    margin-top: 20px;
    width: 80px
}

.portico-landing.hello .integrations .integration-name {
    margin-top: 20px;
    font-size: 22px;
    font-weight: 400
}

.portico-landing.hello .integrations .integration-description {
    width: 120px;
    margin: 0 auto 20px;
    font-weight: 400;
    font-size: 14px
}

.portico-landing.hello .call-to-action-bottom {
    position: relative;
    padding: 50px 100px 0;
    margin-top: 0
}

@media (max-width:768px) {
    .portico-landing.hello .call-to-action-bottom {
        padding: 50px 10px 0
    }
}

.portico-landing.hello .call-to-action-bottom .styled-button {
    display: table;
    margin: 20px auto 0;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 600
}

.portico-landing.hello .call-to-action-bottom h1 {
    text-align: center;
    margin-top: 20px
}

.portico-landing.hello .call-to-action-bottom .zulip-octopus {
    margin: 15px auto 50px;
    width: 32px;
    height: 30px;
    background-image: url("files/zulip-octopus.564449be533deb2244f0.png");
    background-size: cover;
    filter: invert(.9)
}

.portico-landing.apps {
    padding-top: 0
}

.portico-landing.apps .main,
.portico-landing.features-app .main {
    background-color: #fff
}

.portico-landing.apps .hero {
    position: relative;
    padding: 100px 50px 50px;
    background: linear-gradient(35deg, #003a51, #44b59a);
    height: 600px;
    color: #fff;
    overflow: hidden
}

.portico-landing.apps .hero .inner-content {
    max-width: 1600px;
    margin: 0 auto
}

.portico-landing.apps .hero h1 {
    font-size: 3em;
    margin-bottom: 0;
    margin-top: 0
}

.portico-landing.apps .hero #waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("files/waves.fff7ae65e423a855e94d.svg");
    background-size: cover;
    background-repeat: no-repeat
}

.portico-landing.apps .hero .image,
.portico-landing.apps .hero .info {
    position: relative;
    width: 50%;
    float: left;
    height: 100%;
    z-index: 1
}

.portico-landing.apps .hero .image img {
    border-radius: 4px 4px 0 0
}

.portico-landing.apps .hero .info .cta {
    text-shadow: 0 0 60px hsla(0, 0%, 0%, .3);
    max-width: 600px
}

.portico-landing.apps .hero .image img.app-screenshot-mobile {
    height: 85%
}

.portico-landing.apps .hero .image .flex,
.portico-landing.apps .hero .info .flex {
    height: 500px;
    min-height: 0
}

.portico-landing.apps .hero .info .flex {
    width: 90%
}

.portico-landing.apps .hero .info .button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 600
}

.portico-landing.apps .other-apps {
    background-color: #fff;
    padding: 50px 50px 120px;
    text-align: center
}

.portico-landing.apps .other-apps h2 {
    width: 600px;
    margin: 0 auto;
    text-align: center
}

.portico-landing.apps .other-apps .apps {
    display: inline-block;
    margin: 50px 0 0
}

.portico-landing.apps .other-apps .apps .icon {
    vertical-align: top;
    width: 50px;
    padding: 18px 30px;
    border-radius: 70px;
    color: #444;
    font-size: 3em;
    text-align: center;
    transition: all .2s ease
}

.portico-landing.apps .other-apps .apps .icon:hover {
    background: linear-gradient(-45deg, #d3d3d3, #f9f9f9)
}

.portico-landing.apps .other-apps .apps .icon.fa-mobile-phone {
    font-size: 4em;
    padding: 14px 30px
}

.portico-landing.apps .other-apps .apps .icon.fa-terminal {
    padding: 12px 30px
}

.portico-landing.apps .other-apps .apps .icon.fa-mobile-phone::after {
    margin-top: 1px
}

.portico-landing.apps .other-apps .apps .icon::after {
    content: attr(data-label);
    display: block;
    font-size: .8rem;
    font-weight: 600;
    font-family: "Source Sans 3", sans-serif;
    margin-top: 10px
}

.download-from-google-play-store img {
    height: 42px;
    padding: 15px 0
}

.download-from-apple-app-store img {
    height: 42px;
    padding: 15px 0
}

.portico-landing.why-page {
    padding-top: 0;
    color: #3b3e43
}

.portico-landing.why-page .main {
    max-width: 800px
}

.portico-landing.why-page .hero {
    padding: 200px 50px 100px;
    background-color: #67b08f;
    color: #fff
}

@media (max-width:899.98px) {
    .portico-landing.why-page .hero {
        padding: 200px 0 100px
    }
}

.portico-landing.why-page .hero.empty-hero {
    padding: 50px 50px 70px
}

.portico-landing.why-page .hero.small-hero {
    padding: 120px 50px 30px
}

.portico-landing.why-page .hero h1 {
    position: relative;
    margin: 0 0 20px;
    font-size: 3.5em;
    font-weight: 300
}

.portico-landing.why-page .hero p {
    width: 70%;
    margin: 0 auto;
    font-size: 1.3em;
    text-align: center;
    opacity: .9
}

.portico-landing.why-page .markdown {
    font-size: 1.1rem
}

.portico-landing.why-page .main blockquote {
    background-color: #fff;
    border-color: #64a094;
    padding: 20px 30px;
    margin-top: 20px;
    font-size: 1.05em
}

.portico-landing.why-page .main blockquote p {
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
    color: #404d67
}

.portico-landing.why-page .main blockquote p:last-child {
    margin-top: 10px
}

.portico-landing.why-page .main img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    box-shadow: none;
    border: none
}

.portico-landing.why-page .main .slack-image {
    width: 500px
}

.portico-landing.why-page .main .zulip-topics-image {
    width: 300px
}

.portico-landing.why-page .main .zulip-reply-later-image {
    width: 600px
}

.portico-landing.why-page .photo-description {
    position: relative;
    top: 10px;
    height: 0;
    font-size: .8em;
    font-weight: 400;
    line-height: 100%;
    color: #878787
}

.portico-landing.why-page .team h2 {
    margin-top: 20px
}

.portico-landing.why-page .bg-events {
    position: relative;
    background-image: url("files/for-events.8c908956131bfe8191dd.jpg");
    background-size: cover;
    background-position: center
}

.portico-landing.why-page .bg-education {
    position: relative;
    background-image: url("files/for-education-cover.a422c57de5f4662f7d43.jpg");
    background-size: cover;
    background-position: center
}

.portico-landing.why-page .bg-companies {
    position: relative;
    background-image: url("files/companies-laptop.73fc1ae3cae91cc1e97c.jpg");
    background-size: cover;
    background-position: center
}

.portico-landing.why-page .bg-companies .bg-dimmer {
    background-color: hsla(224, 52%, 12%, .75)
}

.portico-landing.why-page .bg-pycon {
    position: relative;
    background-image: url("files/pycon.06078201e43e80f6800d.jpg");
    background-size: cover;
    background-position: center
}

.portico-landing.why-page .bg-pycon.drone {
    background-image: url("files/pycon-drone.6b90ac2ecdd56cb11741.jpg")
}

.portico-landing.why-page .bg-pycon.mit {
    background-image: url("files/mit-lobby-7.6d752ac3178c277a3eec.jpg")
}

.portico-landing.why-page .bg-pycon.security {
    background-image: url("files/security.4f0b7621ab49b40d482b.jpg")
}

.portico-landing.why-page .bg-pycon.why-zulip {
    background-image: url("files/why-zulip-threads.7f0a3ccbdddb4e5861f5.jpg")
}

.portico-landing.why-page .bg-dimmer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: hsla(224, 52%, 12%, .7);
    z-index: 0
}

.portico-landing.why-page .bg-pycon .content {
    position: relative;
    z-index: 1
}

.portico-landing.why-page .testimonials {
    background-color: #22574c;
    color: #fff;
    margin-bottom: 40px
}

.portico-landing.why-page .testimonials .quote-container {
    width: 98%;
    margin: 30px auto 20px;
    padding-left: 2%;
    font-size: 1.2rem
}

.portico-landing.why-page .testimonials .carousel-quotes {
    width: 60%;
    margin: auto
}

.portico-landing.why-page .testimonials .carousel-inner {
    width: 100%;
    left: -2%
}

.portico-landing.why-page .testimonials blockquote::before {
    content: "“";
    margin-left: -10px;
    margin-right: -3px
}

.portico-landing.why-page .testimonials blockquote::after {
    content: "”"
}

.portico-landing.why-page .testimonials blockquote+cite {
    display: block;
    margin-top: 5px;
    margin-bottom: 30px;
    color: #fff;
    opacity: .7;
    font-weight: 400;
    line-height: 140%
}

.portico-landing.why-page .testimonials blockquote {
    padding: 0;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    border: none;
    opacity: .8
}

.portico-landing.hello .apps .screen {
    display: inline-block;
    margin: 0 10px;
    text-align: left
}

.portico-landing.hello .apps .screen.ios {
    width: 200px;
    height: 350px;
    padding: 30px 0;
    border-radius: 20px;
    transform: translateY(50px);
    background-color: #fff
}

.portico-landing.hello .apps .screen.android {
    width: 200px;
    height: 370px;
    padding: 10px 0 30px;
    border-radius: 20px;
    transform: translateY(-110px);
    background: linear-gradient(90deg, #444 0, #545454 8%, #545454 92%, #444 100%)
}

.portico-landing.hello .apps .screen .center-page {
    height: calc(100% - 20px)
}

.portico-landing.hello .apps .screen .center-page .message-feed {
    margin-top: 10px
}

.portico-landing.hello .apps .screen.ios::before {
    top: 17px;
    left: calc(50% - 20px);
    width: 40px;
    height: 5px;
    background-color: #ccc
}

.portico-landing.hello .apps .screen.ios::after {
    top: auto;
    bottom: 7px;
    left: calc(50% - 12.5px);
    background-color: #ccc
}

.portico-landing.hello .apps .screen.android::before {
    content: none
}

.portico-landing.hello .apps .screen.android::after {
    top: auto;
    bottom: 10px;
    left: calc(50% - 17.5px);
    border-radius: 8px;
    background-color: #212121;
    width: 35px;
    height: 20px
}

.portico-landing.hello .apps .screen.ios .main-page {
    border-color: #ddd
}

.portico-landing.hello .apps .screen.android .main-page {
    border-color: #212121
}

.gradients {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1
}

.gradients .gradient {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1100px
}

.gradients .gradient.dark-blue {
    background: linear-gradient(10deg, hsla(196, 58%, 14%, 0) 50%, hsla(196, 58%, 14%, .7))
}

.gradients .gradient.green {
    background: linear-gradient(-25deg, hsla(156, 47%, 47%, 0) 40%, #3fb083)
}

.gradients .gradient.blue {
    background: linear-gradient(25deg, hsla(196, 38%, 51%, 0) 40%, #5298b1)
}

.gradients .gradient.sunburst {
    background: linear-gradient(5deg, hsla(49, 71%, 68%, 0) 20%, #e7d273)
}

.gradients .gradient.white-fade {
    background: linear-gradient(0deg, #fff 0, hsla(0, 0%, 98%, 0) 40%)
}

.portico-landing.plans .main {
    width: 100%
}

.portico-landing.plans .main .padded-content>h1 {
    text-align: center;
    font-size: 2.5em;
    margin: 0;
    color: #fff
}

.portico-landing.plans .main .padded-content>h2 {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 50px;
    color: #fff
}

.pricing-model .pricing-container {
    text-align: center
}

.pricing-model .pricing-container .block {
    display: inline-block;
    margin: 40px 20px 20px
}

.pricing-model .pricing-container .block .plan-title {
    padding: 10px;
    margin-bottom: 3px;
    color: #fff;
    font-size: 2em;
    font-weight: 300
}

.pricing-model .pricing-container .price-box {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    margin: 0;
    width: 300px;
    height: 500px;
    box-shadow: 0 0 10px hsla(0, 0%, 0%, .1);
    text-align: left;
    background-color: #fff;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease
}

.pricing-model .pricing-container .text-content {
    margin: 18px
}

.pricing-model .padded-content .text-header .text-content h1 {
    margin-top: 0
}

.pricing-model .pricing-container .text-content h2 {
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 0;
    text-align: left
}

.pricing-model .pricing-container hr {
    border: none;
    border-bottom: 2px solid #4ebfac;
    margin: 15px 0
}

.pricing-model .pricing-container .text-content .description {
    font-size: .9em;
    font-weight: 400;
    color: #878787
}

.pricing-model .pricing-container ul.feature-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.pricing-model .pricing-container ul.feature-list li {
    position: relative;
    padding: 10px 0 10px 25px;
    font-size: .9em;
    font-weight: 500
}

.pricing-model .pricing-container ul.feature-list li::before {
    content: " ";
    position: absolute;
    top: 10px;
    left: 0;
    width: 20px;
    height: 18px;
    background-image: url("files/checkbox-green.1f4d72ab6f6dd39e2d70.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(.3)
}

.pricing-model .pricing-container .bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
    background-color: #ededed
}

.pricing-model .pricing-container .text-content .price::before {
    content: "$";
    position: relative;
    vertical-align: top;
    top: 7px;
    left: -3px;
    font-size: 2rem;
    font-weight: 300;
    color: #878787
}

.pricing-model .pricing-container .text-content .price {
    display: inline-block;
    margin-right: 2px;
    font-size: 3.5em;
    font-weight: 600;
    line-height: .8;
    margin-top: 4px
}

.pricing-model .pricing-container .bottom .details {
    display: inline-block;
    vertical-align: top;
    margin-left: 8px;
    margin-top: 4px;
    font-size: .9em;
    font-weight: 400;
    color: #878787;
    text-align: left;
    white-space: nowrap
}

.pricing-model .pricing-container .bottom .button {
    margin-top: 24px;
    display: block;
    text-align: center;
    font-size: .9em;
    transition: all .3s ease
}

.pricing-model .pricing-container .price-box:focus {
    outline: 0
}

.pricing-model .pricing-container .price-box:focus .button {
    box-shadow: 0 0 25px #68c9b8;
    animation: box-shadow-pulse 2s infinite
}

.pricing-model .pricing-container .text-content .standard-price-box {
    display: flex;
    height: 55px
}

.pricing-model .pricing-container .text-content .standard-price-box .pricing-period {
    color: #444
}

.pricing-model .pricing-container .text-content .price .price-cents {
    font-size: .4em;
    vertical-align: top;
    position: relative;
    top: 6px
}

.plans_faq_questions {
    background: 0 0;
    padding: 20px 0;
    margin: auto
}

.plans_faq_questions.plans_top_faq {
    font-size: 17px;
    font-weight: 400;
    color: #878787;
    padding-top: 0
}

.plans_faq_questions.plans_top_faq p {
    padding: 10px
}

.plans_faq_questions.plans_top_faq p:first-child {
    margin-top: -20px
}

.plans_faq_questions.plans_top_faq p:last-child {
    margin-bottom: 30px
}

.plans_faq_questions p {
    width: 80%;
    margin: auto;
    text-align: center
}

@media (max-width:1100px) {
    .plans_faq_questions p {
        text-align: left
    }
}

.text-content .pricing-details {
    padding: 15px 0;
    height: 25px;
    font-weight: 400;
    color: #878787;
    font-style: italic;
    text-align: center
}

.text-content .pricing-details.multi-line {
    padding: 5px 0 25px
}

.portico-landing.jobs h2 {
    line-height: 1.4;
    margin: 20px 0 5px
}

.portico-landing.jobs h3 {
    line-height: 1.4;
    margin: 20px 0 7px
}

.portico-landing.jobs .how-we-work {
    padding-top: 25px
}

.portico-landing.jobs .what-were-building {
    background-color: #e9ecf1
}

@keyframes box-shadow-pulse {
    0% {
        box-shadow: 0 0 0 #69c8b8
    }

    50% {
        box-shadow: 0 0 25px hsla(170, 47%, 60%, .8)
    }

    100% {
        box-shadow: 0 0 0 #69c8b8
    }
}

@media (max-width:1426px) {
    .portico-landing.hello .integrations .integration-icons .hide-1 {
        display: none
    }

    .portico-landing.integrations .integration-categories-sidebar {
        padding-left: 30px
    }

    .portico-landing.integrations .integration-lozenge {
        width: 135px
    }
}

@media (max-width:1390px) {
    .portico-landing.plans .pricing-container .block:not(:first-child) .responsive-title {
        color: inherit
    }
}

@media (max-width:1376px) {
    .portico-landing.plans .price-box {
        margin: 20px
    }
}

@media (min-width:1296px),
(min-width:687px) and (max-width:985px) {
    .portico-landing .testimonials .company-box>div:last-of-type {
        display: none
    }
}

@media (max-width:1295px) {
    .portico-landing.hello .apps .right-side {
        display: none
    }

    .portico-landing.hello .apps .left-side {
        width: 100%
    }

    .portico-landing.hello .integrations .content {
        max-width: 750px;
        margin: 0 auto
    }

    .portico-landing.hello .integrations .integration-icons {
        max-width: 600px;
        margin: 0 auto
    }

    .portico-landing.hello .apps .left-side .content {
        margin: 0 auto 50px
    }

    .portico-landing .testimonials .company-box .company {
        width: calc(33% - 44px)
    }
}

@media (max-width:1100px) {

    .tour .carousel-inner img.slack-overwhelming,
    .tour .carousel-inner img.zulip-easy,
    .tour .carousel-inner img.zulip-topic {
        width: 85%;
        left: 0;
        margin-left: auto;
        margin-right: auto
    }

    .tour .carousel-inner .tour-item-header {
        margin: 0 0 30px
    }

    .tour .carousel-control.right {
        right: 20px
    }

    .tour .carousel-control.left {
        left: 20px
    }

    .tour .carousel-inner .zulip-slack-comparison {
        width: 650px;
        max-width: 100%
    }

    .tour .carousel-inner .zulip-slack-comparison .comparison-zulip {
        width: 450px
    }

    .tour .carousel-inner .zulip-slack-comparison .comparison-slack {
        width: 200px
    }
}

@media (max-width:1024px) {
    .portico-landing.hello .gradients .gradient {
        height: 1400px
    }

    .portico-landing {
        padding-top: 170px
    }

    .portico-landing.features-app section.messages {
        display: block;
        text-align: center
    }

    .portico-landing.features-app section.messages>* {
        display: inline-block;
        text-align: left
    }

    .portico-landing.features-app section.messages .image {
        width: 100%;
        margin: 0
    }

    .portico-landing.plans .compare .padded-content {
        width: auto
    }
}

@media (max-width:985px) {
    .features .feature-box .text-content {
        width: 100%;
        height: auto;
        margin-bottom: 20px
    }

    .features .feature-box .image {
        float: none;
        width: 100%;
        margin: 0
    }

    .features .text-content .flex {
        display: block
    }

    .portico-landing.apps .main {
        width: 100%;
        margin: 0
    }

    .portico-landing .testimonials .carousel-quotes {
        width: 100%
    }

    .portico-landing .testimonials .fa-chevron-right {
        right: -40px
    }

    .portico-landing .testimonials .fa-chevron-left {
        left: -40px
    }

    .screen .message-feed .message .content {
        top: -12px
    }

    .portico-landing.hello .apps,
    .portico-landing.hello .integrations {
        padding: 200px 50px 80px
    }

    .portico-landing.hello .apps .left-side .content {
        width: 100%;
        text-align: center
    }

    .portico-landing.hello .integrations {
        width: 100%;
        padding: 80px 0
    }

    .portico-landing.hello .integrations .content {
        padding: 0 50px
    }

    .portico-landing .testimonials .company-container,
    .portico-landing .testimonials hr {
        width: 100%
    }

    .portico-landing .testimonials .company-box .company {
        width: calc(25% - 44px)
    }

    .tour .carousel-inner img.slack-overwhelming,
    .tour .carousel-inner img.zulip-easy {
        width: 80%;
        left: 0
    }

    .portico-landing.hello .hero header {
        width: calc(100% - 50px)
    }
}

@media (max-width:906px) {
    .portico-landing.features-app section.notifications {
        padding: 50px 10px
    }

    .portico-landing.features-app section.notifications .image-block {
        display: none
    }

    .portico-landing .testimonials .quote-container {
        width: 96%;
        padding-left: 4%
    }

    .portico-landing .testimonials .carousel-inner {
        left: -4%
    }
}

@media (max-width:830px) {
    .portico-landing.hello .apps .left-side .platform-icons .group {
        margin: 50px 30px;
        display: block
    }

    .portico-landing.hello .tour .carousel-inner .item-container {
        width: 85%
    }

    .tour .carousel-control {
        font-size: 1.2em
    }

    .tour .carousel-control.right {
        right: -10px
    }

    .tour .carousel-control.left {
        left: -10px
    }

    .tour .carousel-inner .zulip-slack-comparison {
        width: 100%
    }

    .tour .carousel-inner .zulip-slack-comparison .comparison-zulip {
        width: 65%
    }

    .tour .carousel-inner .zulip-slack-comparison .comparison-slack {
        width: 35%
    }

    .tour .carousel-inner .tour-item-header {
        font-size: 1.1em
    }
}

@media (max-width:768px) {
    .portico-landing.hello .open-source .flex {
        display: block
    }

    .portico-landing.hello .open-source img {
        display: block;
        width: 300px;
        margin: 0 auto
    }

    .portico-landing.hello .open-source .il-block {
        width: 75%
    }

    .main {
        width: auto
    }

    .portico-landing.why-page .main {
        width: auto;
        margin: 0
    }

    .portico-landing.why-page .hero {
        padding-left: 20px;
        padding-right: 20px;
        font-size: .6em
    }

    .portico-landing.why-page .hero p {
        font-size: 2em;
        width: 100%
    }

    .portico-landing.why-page .padded-content {
        padding: 50px 20px
    }

    .portico-landing.why-page .testimonials .padded-content {
        padding: 50px
    }

    .portico-landing.why-page .testimonials .carousel-quotes {
        width: 90%
    }

    .portico-landing.why-page .testimonials .quote-container {
        padding-left: 4%;
        font-size: 1em
    }

    .platform.image {
        display: none !important
    }

    .platform.description {
        width: 100% !important
    }

    .portico-landing.hello .hero header {
        width: 600px
    }

    .portico-landing.hello .apps .left-side .content {
        width: auto
    }

    .portico-landing.features-app section {
        padding: 0 20px
    }

    .portico-landing.features-app section.hero {
        padding: 50px
    }

    .portico-landing.features-app section.hero h1 {
        font-size: 3em
    }

    .billing-upgrade-page .nav-tabs,
    .billing-upgrade-page .tab-content {
        font-size: 1em
    }
}

@media (max-width:1024px) {
    .portico-landing {
        padding-top: 120px
    }

    .portico-landing.apps .hero {
        height: 350px
    }

    .portico-landing.apps .hero h1 {
        font-size: 1.9em;
        font-weight: 400
    }

    .portico-landing.apps .hero .image .flex,
    .portico-landing.apps .hero .info .flex {
        height: 200px;
        min-height: 0;
        width: 100%
    }

    .portico-landing.apps .other-apps {
        padding: 50px 5px 120px
    }

    .portico-landing.apps .other-apps h2 {
        font-size: 1.5em;
        width: 100%
    }

    .portico-landing.apps .other-apps .apps .icon {
        padding: 0 14px;
        width: 30px;
        padding-top: 8px;
        padding-bottom: 0;
        font-size: 2.3em
    }

    .portico-landing.apps .other-apps .apps .icon.fa-mobile-phone {
        padding: 7px 10px 5px;
        width: 35px;
        font-size: 2.5em
    }

    .portico-landing.apps .other-apps .apps .icon.fa-windows {
        padding: 10px 13px 2px !important
    }

    .portico-landing.apps .other-apps .apps .icon.fa-windows {
        font-size: 2em
    }

    .portico-landing.apps .other-apps .apps .icon::after {
        content: ""
    }

    .portico-landing.apps .hero .image {
        display: none
    }

    .portico-landing.apps .hero .info {
        width: 100%
    }

    .main {
        width: calc(100% - 50px);
        margin: 0 auto
    }

    .portico-landing.hello .hero {
        padding-bottom: 100px
    }

    .portico-landing.hello .hero .waves {
        height: 450px
    }

    .portico-landing.hello .hero header {
        width: auto
    }

    .portico-header .content>ul::before {
        content: "Zulip";
        display: block;
        margin-top: 25px;
        padding-top: 5px;
        margin-left: 10px;
        width: 100px;
        height: 40px;
        font-size: 1.5rem;
        line-height: 30px;
        text-align: right;
        color: #444;
        background-size: 40px auto;
        background-image: url("files/zulip-logo.c2f7c79a6a6de7ba8726.svg");
        background-repeat: no-repeat
    }

    .portico-header .dropdown ul {
        width: 100%;
        height: auto;
        margin: 42px 0 0;
        font-size: .8em
    }

    .portico-landing.apps .main ul.sidebar {
        display: block;
        text-align: center;
        margin-bottom: 10px
    }

    .portico-landing.apps .main ul.sidebar li {
        display: inline-block;
        padding: 10px;
        width: 80px;
        text-align: center;
        border-radius: 4px
    }

    .portico-landing .testimonials .company-box .company {
        margin: 10px;
        width: calc(33% - 24px)
    }

    .tour .carousel-control {
        font-size: 1.1em
    }

    .tour .carousel-control .right {
        right: -30px
    }

    .tour .carousel-control .left {
        left: -30px
    }

    .tour .carousel-inner .zulip-slack-comparison img {
        max-width: 90%
    }

    .portico-landing.hello .tour .carousel-inner .item-container {
        height: 450px
    }

    .tour .carousel-inner .call-to-action {
        margin: 10px auto
    }
}

@media (max-width:640px) {
    .portico-landing.hello .integrations .integration-icons .group {
        margin: 10px 16px 0
    }

    .portico-landing.features-app section.keyboard-shortcuts img.overflow-wave {
        top: -100px
    }
}

@media (max-width:550px) {
    .portico-landing.features-app section.hero {
        padding: 50px 20px 20px
    }

    .portico-landing.features-app section.messages {
        padding: 0 20px
    }

    .portico-landing.features-app section.messages h2 {
        font-size: 2em
    }

    .portico-landing.features-app section.messages .features .feature-block {
        margin: 20px 0
    }

    .portico-landing .tour {
        max-width: 100%
    }

    .portico-landing.hello .tour .carousel-inner .item-container {
        height: 400px
    }

    .tour .carousel-control {
        top: 100%
    }

    .tour .carousel-inner .zulip-slack-comparison .comparison-zulip {
        width: 60%
    }

    .tour .carousel-inner .zulip-slack-comparison .comparison-slack {
        width: 38%
    }

    .tour .carousel-inner .zulip-slack-comparison .caption {
        font-size: 90%
    }

    .tour .carousel-inner .zulip-slack-comparison img {
        max-width: 100%
    }

    .tour .carousel-inner .zulip-slack-comparison img.zulip-streams {
        max-width: 140px
    }

    .tour .carousel-inner .zulip-slack-comparison img.zulip-streams-selected {
        max-width: 95%
    }

    .tour .carousel-inner .tour-explanation {
        opacity: .8;
        font-size: 90%;
        text-align: left
    }

    .billing-upgrade-page .payment-schedule .box {
        width: 100px;
        height: 80px
    }
}

@media (max-width:450px) {
    .portico-landing.plans .price-box {
        display: inline-flex;
        flex-direction: column;
        min-height: 500px;
        height: auto;
        max-width: 300px;
        width: auto;
        margin: 10px 0
    }

    .pricing-model .pricing-container .text-content {
        flex: 1
    }

    .pricing-model .pricing-container .bottom {
        position: static;
        height: auto
    }

    .portico-landing.hello .hero {
        padding: 60px 5px 40px
    }

    .portico-landing.hello header {
        padding: 0 45px
    }

    .portico-landing.hello .integrations .content header {
        padding: 0
    }

    .portico-landing.hello .integrations .integration-icons .group {
        margin: 4px 2px
    }

    .main {
        width: 100%
    }

    .portico-landing.plans .compare .padded-content {
        padding: 20px
    }

    .portico-landing.plans .pricing-container .block {
        margin: 0
    }

    .tour .carousel-inner .mobile-hide,
    .tour .carousel-inner img.centered-image.mobile-hide,
    .tour .carousel-inner img.mobile-hide {
        display: none
    }

    .tour .carousel-inner .mobile-show,
    .tour .carousel-inner img.centered-image.mobile-show,
    .tour .carousel-inner img.mobile-show {
        display: block
    }

    .main .padded-content {
        padding: 20px
    }

    .gradients .gradient.green {
        background: linear-gradient(-25deg, hsla(156, 47%, 47%, 0) 10%, #3fb083 80%)
    }

    .gradients .gradient.blue {
        background: linear-gradient(25deg, hsla(196, 38%, 51%, 0) 10%, #5298b1 80%)
    }

    .gradients .gradient.sunburst {
        background: linear-gradient(5deg, hsla(49, 71%, 68%, 0) 20%, #e7d273 80%)
    }

    .features-app .gradients .gradient {
        height: 700px
    }
}

@media (max-width:375px) {
    .portico-landing.hello .integrations .integration-icons .group {
        width: 130px;
        height: 215px
    }

    .portico-landing.hello .integrations .integration-icons .integration-logo {
        width: 60px
    }

    .portico-landing.integrations .integration-categories-dropdown {
        width: 323px
    }

    .portico-landing.features-app section.keyboard-shortcuts img.overflow-wave {
        top: -92px
    }
}

@media (max-width:360px) {
    .portico-landing.features-app section .keyboard-shortcuts img.overflow-wave {
        top: -88px
    }
}

@media (max-width:320px) {
    .portico-landing.features-app section .keyboard-shortcuts img.overflow-wave {
        top: -78px
    }
}

@media (max-width:313px) {
    .portico-landing .testimonials .quote-container {
        width: 93%;
        padding-left: 7%
    }

    .portico-landing .testimonials .carousel-inner {
        left: -7%
    }
}

#download-android-apk,
#download-from-microsoft-store,
#download-mac-arm64 {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    padding-left: 10px
}

.feature-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 50px 4vw 10px
}

.feature-container .feature-half {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.feature-container .md-hide {
    display: none
}

.feature-container .md-display {
    display: block
}

@media (max-width:768px) {
    .feature-container .feature-text {
        margin-bottom: 10px
    }

    .feature-container .twitter-tweet {
        margin: 30px auto !important
    }
}

@media (min-width:768px) {
    .feature-container {
        display: grid;
        grid-column-gap: 5%;
        grid-template-columns: 43% auto;
        max-width: 1300px;
        align-items: center;
        justify-items: center;
        margin: auto
    }

    .alternate-grid.feature-container {
        grid-template-columns: auto 43%
    }

    .feature-container .feature-half {
        display: block
    }

    .feature-container .md-display {
        display: none !important
    }
}

.feature-container .feature-text h1 {
    font-size: 30px;
    font-weight: 600
}

.feature-container .feature-text ul {
    list-style: none;
    margin-left: 0
}

.feature-container .feature-text ul li {
    margin-bottom: 15px
}

.feature-container .feature-text ul li::before {
    float: left;
    background-repeat: no-repeat;
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 5px;
    margin-top: 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 24 24\"><path d=\"M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z\"/></svg>")
}

.feature-container .feature-text ul li .list-content {
    margin-left: 22px;
    line-height: 1.6;
    font-size: 18px
}

.feature-container .feature-image div.quote,
.feature-container .feature-image img {
    width: 400px
}

@media (max-width:1023.98px) {
    .feature-container .feature-image div.quote {
        width: 300px
    }
}

@media (max-width:767.98px) {
    .feature-container .feature-image div.quote {
        width: auto
    }
}

.feature-container .feature-icon div.quote,
.feature-container .feature-icon img {
    width: 100px
}

.feature-container .topics-image {
    border: solid 2px #999
}

.twitter-tweet {
    margin: auto
}

.discounts-section {
    text-align: center
}

.discounts-section header b {
    font-weight: 600;
    color: #3c9e8c
}

.register-buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 20px
}

.register-now,
.register-now:visited {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 15px;
    margin: 10px 20px;
    float: left;
    width: 200px;
    border: 2px solid;
    border-radius: 4px;
    background: 0 0;
    color: #3c9e8c;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 2px;
    text-transform: uppercase;
    overflow: hidden;
    transition: border-color .3s, background-color .3s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    font-weight: 800;
    padding: 15px 5px
}

.register-now:focus,
.register-now:visited:focus {
    outline: 0
}

.register-now p,
.register-now:visited p {
    font-weight: 600;
    margin-bottom: 0
}

.register-now:hover,
.register-now:visited:hover {
    border-color: #3c9e8c;
    background-color: #4ebfac;
    color: #fff
}

.quote {
    background: #3b60a0;
    padding: 1em;
    border-radius: 1em;
    font-weight: 400;
    margin: 40px 5px;
    display: flex;
    flex-direction: column
}

.quote a {
    color: #fff
}

.quote a.case-study-link {
    margin-left: 20px;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.quote a:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.quote .author,
.quote blockquote {
    color: #fff;
    margin: 5px 20px 20px
}

.quote blockquote {
    font-size: 18px
}

.quote blockquote::before {
    font-size: 20px;
    font-weight: 800
}

.quote cite {
    font-style: normal
}

.intro_quote blockquote {
    font-size: 17px;
    font-weight: 400;
    color: #3b3e43;
    border-left: 6px solid #3b60a0;
    position: relative;
    background: #ededed;
    padding: 20px
}

.intro_quote blockquote::after {
    content: ""
}

.intro_quote .author {
    padding-top: 20px
}

.case-study-page .bottom-register-buttons.extra_margin_before_footer,
.solutions-page .bottom-register-buttons.extra_margin_before_footer {
    margin-bottom: 60px
}

.case-study-page .hero-text,
.solutions-page .hero-text {
    position: relative;
    width: 80%;
    max-width: 700px;
    margin: 40px auto;
    font-size: 20px;
    text-align: center;
    font-weight: bolder;
    opacity: .9
}

.case-study-page .hero a,
.solutions-page .hero a {
    color: #5de8d1
}

.case-study-page .hero-buttons,
.solutions-page .hero-buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: center
}

.case-study-page .hero-buttons a,
.solutions-page .hero-buttons a {
    color: #2c7b6e;
    font-weight: 600;
    font-size: 15px;
    margin: 10px
}

.case-study-page .hero-buttons a:hover,
.solutions-page .hero-buttons a:hover {
    color: #fff;
    background-color: #2c7b6e;
    border-color: #2c7b6e
}

@media (min-width:768px) {

    .case-study-page .feature-end,
    .solutions-page .feature-end {
        margin: 10px
    }
}

.case-study-page .feature-end h1,
.solutions-page .feature-end h1 {
    margin-top: 20px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 0
}

.case-study-page .feature-end ul,
.solutions-page .feature-end ul {
    margin: auto;
    max-width: 800px;
    padding: 30px
}

.case-study-page .feature-end p,
.solutions-page .feature-end p {
    margin: auto;
    max-width: 800px;
    padding: 30px
}

.case-study-page .price-asterisk,
.solutions-page .price-asterisk {
    margin-top: 0 !important;
    padding-top: 0 !important;
    max-width: 560px !important
}

.case-study-page .price-asterisk,
.solutions-page .price-asterisk {
    text-align: center;
    font-size: 15px;
    opacity: .8
}

.bottom-register-buttons {
    max-width: 800px;
    margin: auto
}

.bottom-register-buttons h1 {
    text-align: center;
    font-weight: 600;
    margin-bottom: 0;
    padding-bottom: 0
}

.bottom-register-buttons .hero-buttons {
    margin: 20px
}

.solutions-page .pricing-model .padded-content {
    padding-bottom: 10px
}

.solutions-page .pricing-model .pricing-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center
}

.solutions-page .pricing-model .price-box {
    margin: 10px
}

.for-education.pricing-model .pricing-details {
    color: inherit;
    font-style: inherit
}

.for-education.pricing-model .price-box {
    height: 625px
}

.for-education.pricing-model .price-box .bottom {
    height: 275px
}

.for-education.pricing-model .price-box .bottom .standard-register-button {
    margin-top: 10px
}

.for-education.pricing-model .price-box .bottom .free-text {
    margin-top: 90px
}

.for-education.pricing-model .price-box .bottom .free-text .pricing-details {
    font-size: 34px
}

.for-education.pricing-model .price-box .bottom .free-text a {
    margin-top: 76px
}

.for-education.pricing-model .price-box .bottom .standard-price-box {
    flex-flow: row wrap;
    height: 90px;
    font-size: 15px
}

.for-education.pricing-model .price-box .bottom .standard-price-box:first-child {
    padding-bottom: 10px
}

.for-education.pricing-model .price-box .bottom .standard-price-box p {
    padding: 0;
    margin: 0 0 -10px;
    width: 100%;
    text-align: center;
    font-weight: 550;
    color: #2d7a6c
}

.portico-landing.why-page.case-study-page .bg-dimmer {
    background-color: hsla(224, 52%, 12%, .86)
}

.feature-intro {
    max-width: 800px;
    margin: 50px auto 0;
    padding: 0 4vw
}

.feature-intro h1 {
    font-size: 36px;
    font-weight: 600
}

.for-companies .feature-end {
    margin-top: 50px
}

.for-companies .feature-end .description {
    margin: 0 10px
}

.for-companies .feature-end p {
    padding: 10px
}

.for-companies .feature-end .intro_quote {
    margin: 20px auto 0;
    max-width: 800px
}

@media (min-width:768px) {
    .for-companies .feature-end .pricing-model .price-box {
        margin: 10px
    }
}

.for-companies .feature-end .pricing-model .padded-content {
    padding: 20px
}

.for-companies .feature-end .pricing-model .plan-title {
    color: #000
}

.mirror-image {
    transform: scaleX(-1)
}

.why-zulip .discounts-section {
    margin: 30px
}

.why-zulip .discounts-section h1 {
    font-weight: 700 !important;
    font-size: 26px !important
}

.portico-landing.why-page .hero.why-zulip {
    padding-bottom: 120px
}

.portico-landing.why-page .hero.why-zulip .bg-dimmer {
    background-color: hsla(224, 52%, 12%, .85)
}

.portico-landing.why-page .hero.why-zulip .padded-content {
    padding-top: 0;
    padding-bottom: 10px
}

@media (max-width:768px) {
    .portico-landing.why-page .hero.why-zulip .register-buttons {
        display: none
    }
}

.portico-landing.why-page .hero.why-zulip .discounts-section .register-buttons a {
    color: #62e4cc
}

.portico-landing.why-page .hero.why-zulip .discounts-section .register-buttons a:hover {
    color: #fff
}

.hello .register-buttons,
.why-zulip .register-buttons {
    max-width: 800px;
    margin: auto;
    margin-top: 30px
}

.hello .register-buttons a,
.why-zulip .register-buttons a {
    min-height: 40px;
    padding: 7px 0
}

@media (max-width:768px) {

    .hello .register-buttons a,
    .why-zulip .register-buttons a {
        margin: 10px calc(5vw - 10px);
        width: max(130px, min(40vw, 200px));
        font-size: 13px
    }
}

.self-hosting-page p {
    font-size: 18px !important
}

.self-hosting-page .hero-buttons {
    margin-top: 30px
}

.self-hosting-page .alternative-features .feature-container {
    padding: 30px
}

.self-hosting-page .alternative-features .feature-container:nth-child(2n) {
    background: hsla(171, 49%, 39%, .21);
    border-radius: 10px
}

.self-hosting-page .alternative-features .feature-icon img {
    width: 100%
}

.self-hosting-page .triangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 150px 100vw 0 0;
    border-color: #fff transparent transparent transparent
}

.self-hosting-page .quote {
    position: relative;
    margin: 0;
    margin-top: 50px;
    padding: 50px;
    padding-top: 200px;
    border-radius: 0;
    background: linear-gradient(145deg, #4bb4cc, #25b097)
}

.self-hosting-page .quote blockquote {
    max-width: 700px;
    margin: auto;
    font-size: 24px
}

.self-hosting-page .quote blockquote .author {
    font-size: 18px
}

.self-hosting-page .feature-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    background: hsla(171, 49%, 39%, .21);
    padding: 50px 0
}

.self-hosting-page .feature-grid .feature-row {
    display: flex;
    flex-direction: row;
    max-width: 1000px;
    margin: auto;
    align-items: center;
    justify-content: center;
    gap: 20px
}

.self-hosting-page .feature-grid .feature-row .feature-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 40vw;
    height: 350px;
    box-shadow: 0 1px 1px 0 hsla(193, 100%, 7.1%, .3), 1px 1px 1px 0 hsla(193, 100%, 7.1%, .15), -1px 1px 1px 0 hsla(193, 100%, 7.1%, .15);
    background: #fff;
    text-align: left;
    margin: 10px 0;
    padding: 50px 30px 0;
    border-top: 5px solid #329485
}

@media (max-width:999.98px) {
    .self-hosting-page .feature-grid .feature-row .feature-box {
        height: 400px
    }
}

.self-hosting-page .feature-grid .feature-row .feature-box h1 {
    font-weight: 550;
    font-size: max(24px, min(2.5vw, 32px))
}

.self-hosting-page .feature-grid .feature-row .feature-box .feature-icon {
    align-self: center
}

.self-hosting-page .feature-grid .feature-row .feature-box .feature-icon img {
    max-width: 100px
}

@media (max-width:767.98px) {
    .self-hosting-page .feature-grid .feature-row {
        flex-direction: column
    }

    .self-hosting-page .feature-grid .feature-row .feature-box {
        width: 75vw !important
    }

    .self-hosting-page .feature-grid .feature-row .feature-box {
        height: calc(600px - 35vw)
    }
}

.self-hosting-page .for-education.pricing-model .pricing-container .price-box {
    height: 525px
}

.self-hosting-page .for-education.pricing-model .pricing-container .price-box .bottom {
    height: 150px
}

.self-hosting-page .feature-end {
    margin: 0
}

.self-hosting-page .feature-end .feature-pricing {
    padding: 50px;
    background: linear-gradient(180deg, #4bb4cc, #25b097)
}

@media (max-width:540px) {
    .self-hosting-page .feature-end .feature-pricing {
        padding: 50px 0
    }

    .self-hosting-page .feature-end .feature-pricing .price-box {
        padding-bottom: 50px
    }
}

.self-hosting-page .feature-end .feature-pricing h1 {
    color: #fff
}

.try-zulip-now-page .bottom-register-buttons {
    text-align: center;
    margin-bottom: 20px
}

.try-zulip-now-page .try-now-button {
    padding: 11px 25px;
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
    background: linear-gradient(145deg, #4bb4cc, #25b097);
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, .2);
    border: 0;
    width: 200px;
    height: 50px;
    outline: 0;
    border-radius: 4px
}

.try-zulip-now-page .try-now-button:visited {
    color: #fff
}

.try-zulip-now-page .try-now-button:hover {
    background-color: #25b097;
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, .3)
}

/*# sourceMappingURL=264.6dd868958646cb454405.css.map */