/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/*html {*/
/*    font-family: sans-serif;*/
/*    -ms-text-size-adjust: 100%;*/
/*    -webkit-text-size-adjust: 100%*/
/*}*/


article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block
}

audio,canvas,progress,video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],template {
    display: none
}

a {
    background-color: transparent
}

a:active,a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,kbd,pre,samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,input,optgroup,select,textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,select {
    text-transform: none
}

button,html input[type="button"],input[type="reset"],input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"],input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,th {
    padding: 0
}

* {
    box-sizing: border-box
}

*:before,*:after {
    box-sizing: border-box
}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: transparent
}

body {
/*    font-family: "Montserrat", Helvetica, Arial, sans-serif;*/
    font-size: 15px;
    line-height: 1.6;
    
    
    
}

input,button,select,textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
} 

.carousel {
    position: relative
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%
}

.carousel-inner>.item {
    display: none;
    position: relative;
    transition: 0.6s ease-in-out left
}

.carousel-inner>.item>img,.carousel-inner>.item>a>img {
    display: block;
    max-width: 100%;
    height: auto;
    line-height: 1
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-inner>.item {
        transition: transform .6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        perspective: 1000
    }

    .carousel-inner>.item.next,.carousel-inner>.item.active.right {
        transform: translate3d(100%, 0, 0);
        left: 0
    }

    .carousel-inner>.item.prev,.carousel-inner>.item.active.left {
        transform: translate3d(-100%, 0, 0);
        left: 0
    }

    .carousel-inner>.item.next.left,.carousel-inner>.item.prev.right,.carousel-inner>.item.active {
        transform: translate3d(0, 0, 0);
        left: 0
    }
}

.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev {
    display: block
}

.carousel-inner>.active {
    left: 0
}

.carousel-inner>.next,.carousel-inner>.prev {
    position: absolute;
    top: 0;
    width: 100%
}

.carousel-inner>.next {
    left: 100%
}

.carousel-inner>.prev {
    left: -100%
}

.carousel-inner>.next.left,.carousel-inner>.prev.right {
    left: 0
}

.carousel-inner>.active.left {
    left: -100%
}

.carousel-inner>.active.right {
    left: 100%
}

.carousel-control {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 15%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    font-size: 20px;
     
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6)
}

.carousel-control.left {
    background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0001) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)
}

.carousel-control.right {
    left: auto;
    right: 0;
    background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0%, rgba(0,0,0,0.5) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)
}

.carousel-control:hover,.carousel-control:focus {
    outline: 0;
    color: #fff;
    text-decoration: none;
    opacity: 0.9;
    filter: alpha(opacity=90)
}

.carousel-control .icon-prev,.carousel-control .icon-next,.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block
}

.carousel-control .icon-prev,.carousel-control .glyphicon-chevron-left {
    left: 50%;
    margin-left: -10px
}

.carousel-control .icon-next,.carousel-control .glyphicon-chevron-right {
    right: 50%;
    margin-right: -10px
}

.carousel-control .icon-prev,.carousel-control .icon-next {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    font-family: serif
}

.carousel-control .icon-prev:before {
    content: '\2039'
}

.carousel-control .icon-next:before {
    content: '\203a'
}

.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 15;
    width: 60%;
    margin-left: -30%;
    padding-left: 0;
    list-style: none;
    text-align: center
}

.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    border: 1px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: transparent
}

.carousel-indicators .active {
    margin: 0;
    width: 12px;
    height: 12px;
    background-color: #fff
}

.carousel-caption {
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 20px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6)
}

.carousel-caption .btn {
    text-shadow: none
}

@media screen and (min-width: 768px) {
    .carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-prev,.carousel-control .icon-next {
        width:30px;
        height: 30px;
        margin-top: -15px;
        font-size: 30px
    }

    .carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev {
        margin-left: -15px
    }

    .carousel-control .glyphicon-chevron-right,.carousel-control .icon-next {
        margin-right: -15px
    }

    .carousel-caption {
        left: 20%;
        right: 20%;
        padding-bottom: 30px
    }

    .carousel-indicators {
        bottom: 20px
    }
}

.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.pull-right {
    float: right !important
}

.pull-left {
    float: left !important
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.invisible {
    visibility: hidden
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0
}

.hidden {
    display: none !important;
    visibility: hidden !important
}

.affix {
    position: fixed
}

@-ms-viewport {
    width: device-width
}

.visible-xs {
    display: none !important
}

.visible-sm {
    display: none !important
}

.visible-md {
    display: none !important
}

.visible-lg {
    display: none !important
}

.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block {
    display: none !important
}

@media (max-width: 767px) {
    .visible-xs {
        display:block !important
    }

    table.visible-xs {
        display: table
    }

    tr.visible-xs {
        display: table-row !important
    }

    th.visible-xs,td.visible-xs {
        display: table-cell !important
    }
}

@media (max-width: 767px) {
    .visible-xs-block {
        display:block !important
    }
}

@media (max-width: 767px) {
    .visible-xs-inline {
        display:inline !important
    }
}

@media (max-width: 767px) {
    .visible-xs-inline-block {
        display:inline-block !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm {
        display:block !important
    }

    table.visible-sm {
        display: table
    }

    tr.visible-sm {
        display: table-row !important
    }

    th.visible-sm,td.visible-sm {
        display: table-cell !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-block {
        display:block !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline {
        display:inline !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline-block {
        display:inline-block !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display:block !important
    }

    table.visible-md {
        display: table
    }

    tr.visible-md {
        display: table-row !important
    }

    th.visible-md,td.visible-md {
        display: table-cell !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-block {
        display:block !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline {
        display:inline !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline-block {
        display:inline-block !important
    }
}

@media (min-width: 1200px) {
    .visible-lg {
        display:block !important
    }

    table.visible-lg {
        display: table
    }

    tr.visible-lg {
        display: table-row !important
    }

    th.visible-lg,td.visible-lg {
        display: table-cell !important
    }
}

@media (min-width: 1200px) {
    .visible-lg-block {
        display:block !important
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline {
        display:inline !important
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline-block {
        display:inline-block !important
    }
}

@media (max-width: 767px) {
    .hidden-xs {
        display:none !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display:none !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display:none !important
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display:none !important
    }
}

.visible-print {
    display: none !important
}

@media print {
    .visible-print {
        display: block !important
    }

    table.visible-print {
        display: table
    }

    tr.visible-print {
        display: table-row !important
    }

    th.visible-print,td.visible-print {
        display: table-cell !important
    }
}

.visible-print-block {
    display: none !important
}

@media print {
    .visible-print-block {
        display: block !important
    }
}

.visible-print-inline {
    display: none !important
}

@media print {
    .visible-print-inline {
        display: inline !important
    }
}

.visible-print-inline-block {
    display: none !important
}

@media print {
    .visible-print-inline-block {
        display: inline-block !important
    }
}

@media print {
    .hidden-print {
        display: none !important
    }
}

.btn {
    padding: 0 20px;
    display: inline-block;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    line-height: 40px;
    border: none;
    box-sizing: border-box;
    position: relative;
    transition: background .2s, box-shadow .2s
}

.btn:hover,.btn:focus,.btn:active,.btn.active {
    outline: 0 !important;
    box-shadow: none;
    text-decoration: none
}

@media (max-width: 768px) {
    .btn {
        font-size:14px
    }
}

.btn .icon:before {
    position: relative;
    top: 2px
}

.btn-static-default {
    border: 2px solid #8994c6;
    color: #3e396b;
    background-color: transparent;
    line-height: 36px
}

.btn-static-default:hover,.btn-static-default:focus {
    color: #3e396b;
    background-color: rgba(137,148,198,0.3)
}

.btn-static-primary {
    border: none;
    color: #fff;
    background-image: linear-gradient(284deg, #1cc7d0, #2dde98)
}

.btn-static-primary:hover,.btn-static-primary:focus {
    color: white;
    background-image: linear-gradient(284deg, #1cc7d0, #2dde98)
}

.btn-static-primary:active,.btn-static-primary.active {
    background-image: linear-gradient(284deg, #1ab6be, #21d58e)
}

.btn-static-primary.btn-shadow {
    box-shadow: 0 2px 6px 0 rgba(45,222,152,0.4)
}

.btn-static-primary.btn-shadow:hover,.btn-static-primary.btn-shadow:focus {
    box-shadow: 0 4px 12px rgba(45,222,152,0.4)
}

.btn-static-secondary {
    border: none;
    color: #fff;
    background-image: linear-gradient(80deg, #00aeff, #3369e7)
}

.btn-static-secondary:hover,.btn-static-secondary:focus {
    color: white;
    background-image: linear-gradient(80deg, #00aeff, #3369e7)
}

.btn-static-secondary:active,.btn-static-secondary.active {
    background-image: linear-gradient(80deg, #00a0eb, #215ce5)
}

.btn-static-secondary.btn-shadow {
    box-shadow: 0 2px 6px 0 rgba(51,105,231,0.4)
}

.btn-static-secondary.btn-shadow:hover,.btn-static-secondary.btn-shadow:focus {
    box-shadow: 0 4px 12px rgba(51,105,231,0.4)
}

.btn-static-tertiary {
    border: none;
    color: #fff;
    background-image: linear-gradient(112deg, #ff4f81, #ff6c5f)
}

.btn-static-tertiary:hover,.btn-static-tertiary:focus {
    color: white;
    background-image: linear-gradient(112deg, #ff4f81, #ff6c5f)
}

.btn-static-tertiary:active,.btn-static-tertiary.active {
    background-image: linear-gradient(112deg, #ff3b72, #ff594b)
}

.btn-static-tertiary.btn-shadow {
    box-shadow: 0 2px 6px 0 rgba(255,108,95,0.4)
}

.btn-static-tertiary.btn-shadow:hover,.btn-static-tertiary.btn-shadow:focus {
    box-shadow: 0 4px 12px rgba(255,108,95,0.4)
}

.btn-static-inverse {
    color: white
}

.btn-static-inverse:hover,.btn-static-inverse:focus,.btn-static-inverse:active,.btn-static-inverse.active {
    color: white
}

.btn-static-dark {
    color: white;
    background-color: #050f2c;
    background-image: linear-gradient(283deg, #050f2c, #3e396b);
    border-color: #050f2c
}

.btn-static-dark:hover,.btn-static-dark:focus {
    color: white;
    background-color: #3e396b;
    border-color: #3e396b
}

.btn-static-dark.btn-shadow {
    box-shadow: 0 2px 6px 0 rgba(62,57,107,0.4)
}

.btn-static-dark.btn-shadow:hover,.btn-static-dark.btn-shadow:focus {
    box-shadow: 0 4px 12px rgba(62,57,107,0.4)
}

.btn-static-white {
    color: #3e396b;
    background-color: white;
    border-color: white
}

.btn-static-white:hover,.btn-static-white:focus {
    color: #3e396b
}

.btn-static-enterprise {
    color: white;
    background-color: #050f2c;
    border: solid 2px #2dde98;
    line-height: 36px
}

.btn-static-enterprise:hover,.btn-static-enterprise:focus {
    color: white;
    background-color: #2dde98;
    border-color: #2dde98
}

.btn-circle {
    width: 42px;
    height: 42px;
    padding: 0;
    line-height: 42px
}

.btn-static-shadow-dark {
    box-shadow: 0 2px 6px 0 rgba(5,15,44,0.5)
}

.btn-static-shadow-dark:hover,.btn-static-shadow-dark:focus {
    box-shadow: 0 4px 12px rgba(5,15,44,0.5)
}

.btn-static-default:active,.btn-static-default.active,.btn-static-default.btn-shadow:active,.btn-static-default .btn-shadow.active,.btn-static-default.btn-static-shadow-dark:active,.btn-static-default .btn-static-shadow-dark.active,.btn-static-primary:active,.btn-static-primary.active,.btn-static-primary.btn-shadow:active,.btn-static-primary .btn-shadow.active,.btn-static-primary.btn-static-shadow-dark:active,.btn-static-primary .btn-static-shadow-dark.active,.btn-static-secondary:active,.btn-static-secondary.active,.btn-static-secondary.btn-shadow:active,.btn-static-secondary .btn-shadow.active,.btn-static-secondary.btn-static-shadow-dark:active,.btn-static-secondary .btn-static-shadow-dark.active,.btn-static-tertiary:active,.btn-static-tertiary.active,.btn-static-tertiary.btn-shadow:active,.btn-static-tertiary .btn-shadow.active,.btn-static-tertiary.btn-static-shadow-dark:active,.btn-static-tertiary .btn-static-shadow-dark.active,.btn-static-inverse:active,.btn-static-inverse.active,.btn-static-inverse.btn-shadow:active,.btn-static-inverse .btn-shadow.active,.btn-static-inverse.btn-static-shadow-dark:active,.btn-static-inverse .btn-static-shadow-dark.active,.btn-static-dark:active,.btn-static-dark.active,.btn-static-dark.btn-shadow:active,.btn-static-dark .btn-shadow.active,.btn-static-dark.btn-static-shadow-dark:active,.btn-static-dark .btn-static-shadow-dark.active,.btn-static-enterprise:active,.btn-static-enterprise.active,.btn-static-enterprise.btn-shadow:active,.btn-static-enterprise .btn-shadow.active,.btn-static-enterprise.btn-static-shadow-dark:active,.btn-static-enterprise .btn-static-shadow-dark.active {
    box-shadow: inset 0 0 4px 2px rgba(5,15,44,0.3)
}

.btn-lg {
    min-width: 210px
}

.modal .modal-content {
    box-shadow: none;
    border: none
}

.modal .modal-title {
    font-size: 1.4em;
    margin: 0 0 12px !important
}

.modal.modal-wide .modal-dialog {
    width: 80%
}

.modal pre {
    max-height: 300px;
    overflow: auto
}

.modal pre.CodeMirror-line {
    overflow: visible;
    line-height: 15px
}

.modal-backdrop {
    position: fixed;
    will-change: transform
}

#home .hero {
    position: relative;
    top: calc(-80px - 0.5em);
  
    background-color: transparent
}

@media (min-width: 1200px) {
    #home .hero {
        background:url("https://www.algolia.com/static_assets/images/svg/hero-background-fc97695d.svg") no-repeat top 90px left -2px;
        background-size: 95%
    }
}

@media (min-width: 1600px) {
    #home .hero {
        background:url("https://www.algolia.com/static_assets/images/svg/hero-background-fc97695d.svg") no-repeat top 60px left -2px;
        background-size: 90%
    }
}

@media (min-width: 2000px) {
    #home .hero {
        background:url("https://www.algolia.com/static_assets/images/svg/hero-background-fc97695d.svg") no-repeat top 0 left -2px;
        background-size: 82%
    }
}

@media (max-width: 1200px) {
    #home .hero {
        background:url("https://www.algolia.com/static_assets/images/svg/hero-background-fc97695d.svg") no-repeat top 120px left -2px;
        background-size: 96%
    }
}

@media (max-width: 768px) {
    #home .hero {
        background:url("https://www.algolia.com/static_assets/images/svg/hero-background-fc97695d.svg") no-repeat top 60px left -2px;
        background-size: 86%;
        min-height: 840px;
        top: calc(-110px - 0.5em)
    }

    #home .hero .demo-input {
        -ms-transform: scale(0.8);
        transform: scale(0.8)
    }

    #home .hero .demo-input i {
        display: none
    }
}

@media (max-width: 640px) {
    #home .hero .container .cta-holder {
        text-align:center
    }

    #home .hero .container .btn {
        clear: both;
        margin-bottom: 1em;
        margin-right: 0
    }
}

@media (max-width: 768px) {
    #home .hero {
        background:transparent
    }

    #home .hero .demo-input {
        display: none
    }
}

#home .hero .btn {
    padding: 0 32px;
    height: 56px;
    line-height: 56px
}

#home .hero .customer-screens .col-sm-3 img {
    width: 100%;
    opacity: 0
}

#home .hero .customer-screens .col-sm-3:not(.loaded) {
    opacity: 0
}

#home .hero .customer-screens .col-sm-3:not(.loaded) img {
    opacity: 0
}

@media (max-width: 1200px) {
    #home .hero .customer-screens .col-sm-3 {
        margin-top:0;
        height: 600px
    }
}

#home .hero .customer-screens .col-sm-3 {
    overflow: hidden;
    position: relative
}

#home .hero .customer-screens .col-sm-3 img {
    width: 100%
}

@supports (mix-blend-mode: luminosity) {
    #home .hero .customer-screens .col-sm-3 img {
        animation-play-state: paused
    }
}

#home .hero .customer-screens .col-sm-3:nth-child(1) img {
    animation: popUp-a 2s ease 0.25s
}

@keyframes popUp-a {
    0% {
        transform: translateY(10px);
        opacity: 0
    }

    25% {
        transform: translateY(0);
        opacity: 1
    }
}

#home .hero .customer-screens .col-sm-3:nth-child(2) img {
    animation: popUp-b 2s ease 0.25s
}

@keyframes popUp-b {
    0% {
        transform: translateY(10px);
        opacity: 0
    }

    50% {
        transform: translateY(0);
        opacity: 1
    }
}

#home .hero .customer-screens .col-sm-3:nth-child(3) img {
    animation: popUp-c 2s ease 0.25s
}

@keyframes popUp-c {
    0% {
        transform: translateY(10px);
        opacity: 0
    }

    75% {
        transform: translateY(0);
        opacity: 1
    }
}

#home .hero .customer-screens .col-sm-3:nth-child(4) img {
    animation: popUp-d 2s ease 0.25s
}

@keyframes popUp-d {
    0% {
        transform: translateY(10px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@media (max-width: 992px) {
    #home .hero .customer-screens .col-sm-3 {
        margin:auto;
        float: none;
        width: 60%
    }

    #home .hero .customer-screens .col-sm-3 img {
        animation: none
    }
}

#home .hero .demo-input.text-center {
    max-width: 960px;
    width: 70vw;
    margin: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#home .hero .demo-input.text-center:after {
    content: '';
    display: block;
    position: absolute;
    width: 20%;
    background-color: #FFF;
    background-image: linear-gradient(to left, #FFF 60%, rgba(255,255,255,0) 100%);
    background-color: transparent;
    height: 90%;
    top: 0;
    right: 0;
    z-index: 5;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px
}

#home .hero .demo-input.text-center #home-input,#home .hero .demo-input.text-center .input-message {
    width: 100%;
    height: 128px;
    border-radius: 100px;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    box-shadow: 0 30px 40px 0 rgba(16,36,94,0.2),inset 0 -10px 0 0 rgba(103,117,161,0.06);
    font-size: 50px;
    outline: none;
    line-height: 122px
}

@media (max-width: 1200px) {
    #home .hero .demo-input.text-center #home-input,#home .hero .demo-input.text-center .input-message {
        font-size:44px
    }
}

@media (max-width: 992px) {
    #home .hero .demo-input.text-center #home-input,#home .hero .demo-input.text-center .input-message {
        font-size:32px
    }
}

#home .hero .demo-input.text-center #home-input .blink,#home .hero .demo-input.text-center .input-message .blink {
    color: #c4c8d8;
    animation: blinking 0.85s steps(5, start) infinite;
    margin-left: -18px
}

@media (max-width: 992px) {
    #home .hero .demo-input.text-center #home-input .blink,#home .hero .demo-input.text-center .input-message .blink {
        margin-left:-8px
    }
}

#home .hero .demo-input.text-center i.icon-search {
    right: 44px;
    font-size: 48px;
    z-index: 10
}

#home .hero .demo-input.text-center .input-message {
    transition: opacity 0.2s ease
}

#home .hero .demo-input.text-center .input-message h2 {
    vertical-align: middle;
    display: inline-block;
    margin: 0;
    font-size: 32px;
    font-weight: inherit
}

#home .hero .demo-input.text-center .input-message .btn {
    height: 40px;
    line-height: 40px
}

.hero {
    background-color: #182848;
    padding-top: 96px;
    overflow: hidden;
    background-image: linear-gradient(140deg, #1f74b5 10%, #3e396b 90%)
}

@media (max-width: 480px) {
    .hero h1 {
        text-align:center
    }
}

.hero-actions {
    text-align: left
}

.hero-actions input {
    width: 100%;
    max-width: 240px;
    min-width: 180px
}

@media (max-width: 768px) {
    .hero-actions {
        text-align:center
    }

    .hero-actions input {
        border-radius: 50px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        margin-right: 0;
        height: 42px;
        line-height: 42px
    }

    .hero-actions button {
        border-radius: 100px;
        margin-left: -4px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding: 0;
        height: 42px;
        width: 160px;
        box-shadow: none
    }
}

@media (max-width: 480px) {
    .hero-actions input,.hero-actions button {
        border-radius:50px
    }
}

@keyframes blinking {
    to {
        visibility: hidden
    }
}
 

.spacer-header {
    height: 60px
}

.content-sidebar {
    display: table;
    border-bottom: 1px solid #d1d4d7;
    width: 100%;
    border-spacing: 0;
    table-layout: fixed
}

.content-sidebar .sidebar {
    border: 0 solid #d1d4d7;
    border-right-width: 1px
}

.main {
    zoom:1;overflow: hidden;
    min-height: 600px
}

.sidebar {
    display: table-cell;
    width: 200px;
    vertical-align: top
}

.sidebar-small {
    width: 160px
}

.sidebar-large {
    width: 300px
}

.main+.sidebar {
    border-right-width: 0;
    border-left-width: 1px
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

b,strong {
    font-weight: 600 !important
}

pre {
    margin: 16px 0;
    border: none !important
}

h1,.h1 {
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    line-height: 48px
}

h2,.h2 {
    font-weight: 300;
    line-height: 40px;
    position: relative
}

h2.underlined,.h2.underlined {
    text-align: center;
    margin-bottom: 32px
}

h2.underlined:after,.h2.underlined:after {
    content: '';
    position: absolute;
    bottom: -.5em;
    left: 50%;
    height: 2px;
    width: 30px;
    margin-left: -15px;
    display: block;
    background-color: #2dde98
}

h3,.h3 {
    font-weight: 500;
    line-height: 24px
}

h4,.h4 {
    font-weight: 600;
    margin: 1em 0;
    color: #9d9dbd;
    text-transform: uppercase;
    letter-spacing: .1em
}

h5,.h5,h6,.h6 {
    margin: 1em 0
}

.subtitle-white {
    font-size: 22px;
    line-height: 28px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 40px
}

.lead {
    opacity: .8;
    font-size: 18px;
    line-height: 24px
}

.spacer8 {
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    height: 8px
}

.spacer16 {
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    height: 16px
}

.spacer24 {
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    height: 24px
}

.spacer32 {
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    height: 32px
}

.spacer40 {
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    height: 40px
}

.spacer48 {
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    
}

.spacer56 {
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    height: 56px
}

.spacer64 {
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    height: 64px
}

.spacer80 {
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    height: 80px
}

.spacer120 {
    width: 100%;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    height: 120px
}

.w100 {
    width: 100px
}

.w150 {
    width: 150px
}

.w200 {
    width: 200px
}

.w100p {
    width: 100%
}

.m100 {
    max-width: 100px
}

.m200 {
    max-width: 200px
}

.m300 {
    max-width: 300px
}

.m400 {
    max-width: 400px
}

.m500 {
    max-width: 500px
}

.m600 {
    max-width: 600px
}

.m700 {
    max-width: 700px
}

.m800 {
    max-width: 800px
}

.m900 {
    max-width: 900px
}

.m1000 {
    max-width: 1000px
}

.m1200 {
    max-width: 1200px
}

.m100p {
    max-width: 100%
}

.h80 {
    height: 80px
}

.h100 {
    height: 100px
}

.h200 {
    height: 200px
}

.h300 {
    height: 300px
}

.h400 {
    height: 400px
}

.h500 {
    height: 500px
}

.h600 {
    height: 600px
}

.h700 {
    height: 700px
}

.h800 {
    height: 800px
}

.hfull {
    height: 100%
}

.pos-rel {
    position: relative
}

.pos-stc {
    position: static
}

.pos-abt {
    position: absolute
}

.z-1 {
    z-index: 1
}

.z-2 {
    z-index: 2
}

.z-3 {
    z-index: 3
}

.z-4 {
    z-index: 4
}

.z-5 {
    z-index: 5
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.z-100 {
    z-index: 100
}

.text-heading {
    font-size: 56px
}

.text-xxl {
    font-size: 40px
}

.text-xl {
    font-size: 32px
}

.text-lg {
    font-size: 24px
}

.text-regular {
    font-size: 15px
}

.text-sm {
    font-size: 12px
}

.text-xsm {
    font-size: 10px
}

.text-xs {
    font-size: 8px
}

.text-thin {
    font-weight: 300
}

.text-normal {
    font-weight: normal
}

.text-demi {
    font-weight: 500
}

.text-bold {
    font-weight: bold
}

.text-bolder {
    font-weight: bolder
}

.b-t {
    border-top: 1px solid #f8faff
}

.b-r {
    border-right: 1px solid #f8faff
}

.b-b {
    border-bottom: 1px solid #f8faff
}

.b-l {
    border-left: 1px solid #f8faff
}

.b-n {
    border: none !important
}

.radius6 {
    border-radius: 6px
}

.radius100p {
    border-radius: 100%
}

.padder {
    padding: 0 15px
}

.p-mini {
    padding: 5px
}

.p-small {
    padding: 10px
}

.p-large {
    padding: 20px
}

.p-xlarge {
    padding: 30px
}

.p-t-mini {
    padding-top: 5px
}

.p-t-small {
    padding-top: 10px
}

.p-t-large {
    padding-top: 20px
}

.p-t-xlarge {
    padding-top: 30px
}

.p-b-mini {
    padding-bottom: 5px
}

.p-b-small {
    padding-bottom: 10px
}

.p-b-large {
    padding-bottom: 20px
}

.p-b-xlarge {
    padding-bottom: 30px
}

.p-l-mini {
    padding-left: 5px
}

.p-l-small {
    padding-left: 10px
}

.p-l-large {
    padding-left: 20px
}

.p-l-xlarge {
    padding-left: 30px
}

.p-r-mini {
    padding-right: 5px
}

.p-r-small {
    padding-right: 10px
}

.p-r-large {
    padding-right: 20px
}

.p-r-xlarge {
    padding-right: 30px
}

.p-l-xxlarge {
    padding-left: 60px
}

.p-r-xxlarge {
    padding-right: 60px
}

.no-padding {
    padding: 0 !important
}

.no-p-l {
    padding-left: 0
}

.no-p-r {
    padding-right: 0
}

.no-p-t {
    padding-top: 0 !important
}

.no-p-b {
    padding-bottom: 0
}

.m-l-r-auto {
    margin-left: auto;
    margin-right: auto
}

.m-l {
    margin-left: 15px
}

.m-l-none {
    margin-left: 0
}

.m-l-mini {
    margin-left: 5px
}

.m-l-small {
    margin-left: 10px
}

.m-l-large {
    margin-left: 20px
}

.m-l-n {
    margin-left: -15px
}

.m-l-n-mini {
    margin-left: -5px
}

.m-l-n-small {
    margin-left: -10px
}

.m-l-n-large {
    margin-left: -20px
}

.m-t {
    margin-top: 15px
}

.m-t-none {
    margin-top: 0
}

.m-t-mini {
    margin-top: 5px
}

.m-t-small {
    margin-top: 10px
}

.m-t-large {
    margin-top: 20px
}

.m-t-n {
    margin-top: -15px
}

.m-t-n-xmini {
    margin-top: -1px
}

.m-t-n-mini {
    margin-top: -5px
}

.m-t-n-small {
    margin-top: -10px
}

.m-t-n-large {
    margin-top: -20px
}

.m-r {
    margin-right: 15px
}

.m-r-none {
    margin-right: 0
}

.m-r-mini {
    margin-right: 5px
}

.m-r-small {
    margin-right: 10px
}

.m-r-large {
    margin-right: 20px
}

.m-r-n {
    margin-right: -15px
}

.m-r-n-mini {
    margin-right: -5px
}

.m-r-n-small {
    margin-right: -10px
}

.m-r-n-large {
    margin-right: -20px
}

.m-b {
    margin-bottom: 15px
}

.m-b-none {
    margin-bottom: 0
}

.m-b-mini {
    margin-bottom: 5px
}

.m-b-small {
    margin-bottom: 10px
}

.m-b-large {
    margin-bottom: 20px
}

.m-b-xlarge {
    margin-bottom: 30px
}

.m-b-n {
    margin-bottom: -15px
}

.m-b-n-mini {
    margin-bottom: -5px
}

.m-b-n-small {
    margin-bottom: -10px
}

.m-b-n-large {
    margin-bottom: -20px
}

.no-margin {
    margin: 0 !important
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.vertical-align-middle {
    display: inline-block !important;
    vertical-align: middle !important
}

.vertical-align-bottom {
    display: inline-block !important;
    vertical-align: bottom !important
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis
}

.text-break-word {
    word-wrap: break-word
}

.nowrap {
    word-wrap: nowrap;
    white-space: nowrap
}

.lower-case {
    text-transform: lowercase
}

.upper-case {
    text-transform: uppercase
}

.capital-case {
    text-transform: capitalize
}

.hidden-text {
    text-indent: -9999px;
    color: transparent
}

.line-h-regular {
    line-height: 1.5
}

.line-h-small {
    line-height: 1.2
}

.line {
    width: 100%;
    height: 1px;
    margin: 10px 0;
    font-size: 0;
    overflow: hidden;
    border-width: 0;
    background-color: #f8faff
}

.line-dashed {
    border-style: dashed;
    background: transparent
}

.headline {
    border-bottom: 5px solid black;
    margin-top: 0;
    line-height: 45px
}

.no-line {
    border-width: 0
}

.no-border {
    border-color: transparent !important
}

.no-radius {
    border-radius: 0
}

.block {
    display: block
}

.inline {
    display: inline-block
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.pull-none {
    float: none
}

.pull-in {
    margin-right: -15px;
    margin-left: -15px
}

.line-v {
    border-left: 1px solid #dddddd;
    padding-left: 20px
}

.line-v-right {
    border-right: 1px solid #dddddd;
    padding-right: 20px
}

.flex-container {
    display: -ms-flexbox;
    display: flex
}

.flex-dir-col {
    -ms-flex-flow: column wrap;
    flex-flow: column wrap
}

.flex-dir-row {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.flex-space-around {
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.flex-space-between {
    -ms-flex-pack: justify;
    justify-content: space-between
}

.flex-align-center {
    -ms-flex-align: center;
    align-items: center
}

.flex-it-4 {
    -ms-flex: 0 1 25%;
    flex: 0 1 25%
}

_:-ms-input-placeholder,:root .flex-it-4 {
    -ms-flex-preferred-size: 21% !important
}

.flex-it-3 {
    -ms-flex: 0 1 33%;
    flex: 0 1 33%
}

_:-ms-input-placeholder,:root .flex-it-3 {
    -ms-flex-preferred-size: 29% !important
}

.flex-it-2 {
    -ms-flex: 0 1 50%;
    flex: 0 1 50%
}

_:-ms-input-placeholder,:root .flex-it-2 {
    -ms-flex-preferred-size: 48% !important
}

@supports not (mix-blend-mode: luminosity) {
    _:-ms-input-placeholder,:root .flex-it-2 {
        -ms-flex: 0 1 49.95%;
        flex: 0 1 49.95%
    }
}

.flex-it-1 {
    -ms-flex: 0 1 100%;
    flex: 0 1 100%
}

.unscroll {
    overflow: hidden !important
}

.clickable {
    cursor: pointer
}

.rotate-45 {
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.content-box {
    box-sizing: content-box
}

.faded {
    opacity: .3
}

.op0 {
    opacity: 0
}

.line-through {
    text-decoration: line-through
}

.no-decoration {
    text-decoration: none
}

.v-center {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.h-center {
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.vh-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media (max-width: 768px) {
    .hidden-sm {
        display:none !important
    }
}

@media (max-width: 768px) {
    .visible-sm {
        display:block !important
    }
}

.hidden {
    visibility: hidden
}

sub,sup {
    font-size: 50%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.7em
}

sub {
    bottom: -0.25em
}

[ng\:cloak],[ng-cloak],.ng-cloak {
    display: none !important
}

.list-none {
    list-style: none
}

.cf:before,.cf:after {
    content: " ";
    display: table
}

.cf:after {
    clear: both
}

.cf {
    *zoom:1}

.elevation0 {
    box-shadow: 0 5px 15px 0 rgba(112,128,175,0.2)
}

.elevation1 {
    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07),0 2px 9px 0 rgba(62,57,107,0.06)
}

.elevation2 {
    box-shadow: 0 16px 32px 0 rgba(62,57,107,0.2)
}

.apn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.otn {
    outline: none
}

.gradient-text {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.color-white {
    color: white !important
}

.color-titan {
    color: #f8faff !important
}

.color-primary {
    color: #00aeff !important
}

.color-secondary {
    color: #FA3870 !important
}

.color-purple-heart {
    color: #8e43e7 !important
}

.color-mulberry {
    color: #b84592 !important
}

.color-radical-red {
    color: #ff4f81 !important
}

.color-bittersweet {
    color: #ff6c5f !important
}

.color-koromiko {
    color: #ffc168 !important
}

.color-shamrock {
    color: #2dde98 !important
}

.color-java {
    color: #1cc7d0 !important
}

.color-algolia-blue {
    color: #00aeff !important
}

.color-royal-blue {
    color: #3369e7 !important
}

.color-bunting {
    color: #3e396b !important
}

.color-port-gore {
    color: #3a4570 !important
}

.color-east-bay {
    color: #495588 !important
}

.color-portage {
    color: #8994c6 !important
}

.color-blue-bell {
    color: #a6b0d8 !important
}

.color-ghost {
    color: #c4c8d8 !important
}

.color-athens-gray {
    color: #eef0f7 !important
}

.color-logan {
    color: #9d9dbd !important
}

.color-current {
    color: currentColor !important
}

.fill-dark {
    background-color: #3e396b !important
}

.fill-white {
    background-color: white !important
}

.fill-titan {
    background-color: #f8faff !important
}

.fill-purple-heart {
    background-color: #8e43e7 !important
}

.fill-mulberry {
    background-color: #b84592 !important
}

.fill-radical-red {
    background-color: #ff4f81 !important
}

.fill-bittersweet {
    background-color: #ff6c5f !important
}

.fill-koromiko {
    background-color: #ffc168 !important
}

.fill-shamrock {
    background-color: #2dde98 !important
}

.fill-java {
    background-color: #1cc7d0 !important
}

.fill-algolia-blue {
    background-color: #00aeff !important
}

.fill-royal-blue {
    background-color: #3369e7 !important
}

.fill-deep-cove {
    background-color: #050f2c !important
}

.fill-bunting {
    background-color: #3e396b !important
}

.fill-port-gore {
    background-color: #3a4570 !important
}

.fill-east-bay {
    background-color: #495588 !important
}

.fill-portage {
    background-color: #8994c6 !important
}

.fill-blue-bell {
    background-color: #a6b0d8 !important
}

.fill-ghost {
    background-color: #c4c8d8 !important
}

.fill-athens-gray {
    background-color: #eef0f7 !important
}

.fill-logan {
    background-color: #9d9dbd !important
}

.gradient-primary,.gradient-green {
    background-image: linear-gradient(320deg, #2dde98, #25d3b4) !important
}

.gradient-secondary,.gradient-blue {
    background-image: linear-gradient(256deg, #00aeff, #3369e7) !important
}

.gradient-tertiary,.gradient-pink {
    background-image: linear-gradient(256deg, #ff6c5f, #ff4f81) !important
}

.gradient-orange {
    background-image: linear-gradient(256deg, #ffc168, #ff6c5f)
}

.gradient-purple {
    background-image: linear-gradient(269deg, #8e43e6, #b84592)
}

.gradient-light-blue {
    background-image: linear-gradient(269deg, #00aeff, #1cc7d0)
}

.gradient-dark {
    background-image: linear-gradient(283deg, #050f2c, #3e396b)
}

.color-gradient-red {
    color: #E1271A;
    background-image: linear-gradient(to bottom, #E39290, #E1271A, #B91E14)
}

.alert {
    border-radius: 6px;
    padding: 16px 24px
}

.alert.alert-danger {
    background-color: rgba(255,79,129,0.1);
    border: solid 1px rgba(255,79,129,0.2);
    color: #ff4f81 !important
}

.alert.alert-danger p {
    color: #ff4f81 !important
}

.alert.alert-info {
    background-color: rgba(0,174,255,0.1);
    border: solid 1px rgba(0,174,255,0.2);
    color: #00aeff
}

.alert.alert-info a {
    color: #007ab3;
    text-decoration: underline
}

.alert.alert-warning {
    background-color: rgba(255,193,104,0.25);
    border: solid 1px rgba(255,193,104,0.4);
    color: #c57c14
}

.trust-us {
    margin: 24px 0;
    padding: 0;
    text-align: center
}

.trust-us a {
    color: #050f2c;
    font-size: 1.6em
}

.trust-us a:hover {
    text-decoration: none
}

.trust-us li {
    display: inline-block;
    margin-right: 26px;
    margin-bottom: 10px
}

.trust-us li:last-child {
    margin-right: 0
}

.list-brands {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.list-brands li {
    font-size: 1.8em;
    padding: 16px 32px
}

.footer-new-cta {
    background: url("https://www.algolia.com/static_assets/images/svg/algolia-fast-bg-fe918a67.svg") no-repeat center center/cover;
    margin-bottom: -90px;
    padding-bottom: 60px;
    height: 750px
}

.homepage .footer-new-cta {
    height: 940px
}

@media (max-width: 992px) {
    .footer-new-cta {
        height:860px;
        text-align: center
    }
}

@media (max-width: 768px) {
    .footer-new-cta {
        height:820px
    }

    .footer-new-cta .stellar-container {
        width: 100% !important
    }
}

@media (max-width: 480px) {
    .footer-new-cta {
        height:960px
    }
}

.footer-new-cta:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 280px;
    background: white;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -160px;
    z-index: 1
}

@media (min-width: 1200px) {
    .footer-new-cta:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

.footer-new-cta .card-border {
    max-width: 80%;
    margin: auto;
    float: none;
    background-image: url("https://www.algolia.com/static_assets/images/svg/card-background-left-7741afd4.svg"),url("https://www.algolia.com/static_assets/images/svg/card-background-right-28e60b79.svg");
    background-position: left -2px bottom -2px , right -2px bottom -2px;
    background-size: 340px;
    background-repeat: no-repeat, no-repeat
}

@media (max-width: 768px) {
    .footer-new-cta .card-border {
        background:#fff
    }

    .footer-new-cta .card-border h3 {
        line-height: normal
    }
}

.footer-new-cta .button-holder {
    background: url("https://www.algolia.com/static_assets/images/svg/light-speed-f2821fc3.svg") no-repeat center top/contain
}

.footer-new-cta .button-holder span.inline {
    float: right
}

@media (max-width: 1200px) {
    .footer-new-cta .button-holder span.inline {
        top:4%
    }
}

.footer-new-cta .button-holder span.inline i.icon-search {
    vertical-align: middle
}

@media (max-width: 1200px) {
    .footer-new-cta .button-holder {
        background:url("https://www.algolia.com/static_assets/images/svg/light-speed-f2821fc3.svg") no-repeat right top/92%
    }
}

@media (max-width: 992px) {
    .footer-new-cta .button-holder {
        background:transparent
    }

    .footer-new-cta .button-holder span.inline {
        width: 100%;
        text-align: center
    }

    .footer-new-cta .button-holder .btn {
        margin: auto
    }
}




@media (max-width: 1300px) {
    .tooltip-container {
        max-width:180px;
        right: calc(-180px - 12px)
    }
}

@media (max-width: 768px) {
    .tooltip-container {
        display:none
    }
}

.suggestions-hint {
    position: absolute;
    -ms-transform: translate(calc(100% + 12px), calc(-540px + 100%));
    transform: translate(calc(100% + 12px), calc(-540px + 100%));
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    will-change: opacity;
    max-width: 240px;
    width: 100%
}

@media (max-width: 1300px) {
    .suggestions-hint {
        max-width:180px
    }
}

@media (max-width: 768px) {
    .suggestions-hint {
        display:none
    }
}

.suggestions-hint span {
    font-size: 11px
}

.suggestions-hint span.color-radical-red {
    border-bottom: 1px dashed #ff4f81
}

.suggestions-hint #closeSuggestions {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1em
}

.suggestions-hint h3 {
    margin: 0
}

.demo-hint {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 200px
}

.demo-hint svg {
    max-height: 84px
}

.sbx-sffv__wrapper,.searchbox {
    overflow: visible !important
}

.demo-pulse {
    position: relative;
    outline: #ff4f81 1px solid;
    outline-offset: -1px
}

.demo-pulse:after {
    content: '';
    display: block;
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    animation: out 1.5s infinite ease-out;
    background: #ff4f81;
    top: 50%;
    right: 6%;
    -ms-transform: translate(-50%, -50%) scale(0.35);
    transform: translate(-50%, -50%) scale(0.35)
}

@media (max-width: 768px) {
    .tooltip-container {
        display:none
    }
}

.tooltip-container .demo-pulse {
    outline: none
}

.tooltip-container .demo-pulse:after {
    position: relative;
    top: 0;
    right: 0;
    -ms-transform: translate(0, 0) scale(0.35);
    transform: translate(0, 0) scale(0.35);
    animation: none;
    box-shadow: 0px 0px 0px 0px #ff4f81, 0 0 0 6px #fff, 0 0 0 12px #ff4f81, 0 0 0 18px #fff, 0 0 0 22px #ff4f81
}

.close-tooltip {
    top: 0;
    right: 0;
    margin: 1em
}

.tooltip-container {
    transition: opacity 0.2s ease
}

.tt-reveal {
    opacity: 1 !important
}

@keyframes appear {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes out {
    0% {
        box-shadow: 0px 0px 0px 0px #ff4f81, 0 0 0 6px #fff, 0 0 0 12px #ff4f81, 0 0 0 18px #fff, 0 0 0 22px #ff4f81
    }

    100% {
        box-shadow: 0px 0px 0px 100px rgba(255,79,129,0),0 0 0 6px #fff,0 0 0 12px #ff4f81,0 0 0 18px #fff,0 0 0 22px #ff4f81
    }
}

.cta-free-trial {
    margin-top: -16px;
    padding: 160px 0;
    width: 100%;
    color: white;
    background-image: url("../images/svg/algolia-fast-bg-fe918a67.svg");
    background-size: cover;
    position: relative
}

.cta-free-trial .container {
    z-index: 10
}

.cta-free-trial:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 150px;
    background: white;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -64px;
    left: 0;
    z-index: 0
}

@media (min-width: 1200px) {
    .cta-free-trial:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    .cta-free-trial:before {
        top:-70px
    }
}

@media (max-width: 768px) {
    .cta-free-trial:before {
        display:none
    }
}

.cta-free-trial h3 {
    font-size: 32px;
    color: white;
    font-weight: 300
}

.cta-free-trial p {
    font-size: 18px;
    line-height: 28px;
    color: white;
    font-weight: 400
}

.cta-free-trial .btn {
    float: right;
    clear: both
}

.cta-free-trial .spacer24,.cta-free-trial .spacer8 {
    display: inline-block
}

.cta-free-trial .link {
    clear: both;
    padding: 8px 0 0;
    float: right;
    color: rgba(248,250,255,0.8);
    border-bottom: 1px dashed rgba(255,255,255,0.6)
}

.cta-free-trial .link:hover {
    text-decoration: none;
    color: #f8faff
}

@media (max-width: 992px) {
    .cta-free-trial {
        text-align:center
    }

    .cta-free-trial .btn {
        float: none !important
    }

    .cta-free-trial .link {
        float: none !important
    }
}

.uptime-punchcards__inline #frame .month {
    width: calc((100% / 12) - 16px)
}

@media (max-width: 768px) {
    .uptime-punchcards__inline #frame .month {
        width:calc((100% / 6));
        top: -64px
    }
}

#frame {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 0
}

#frame .month-name {
    fill: #8994c6;
    text-transform: uppercase
}

#frame .month {
    width: calc((100% / 4) - 16px);
    margin-right: 16px;
    display: block;
    float: left;
    overflow: visible
}

@media (max-width: 768px) {
    #frame .month {
        width:40%;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 0;
        -ms-transform: none;
        transform: none
    }

    #frame .month:not(:last-of-type) {
        display: none
    }
}

#frame .dot {
    stroke-width: 2px;
    cursor: pointer
}

#frame .dot:hover {
    stroke: #3e396b;
    stroke-width: 4px
}

#frame .dot.operational {
    fill: #2dde98;
    opacity: 1
}

#frame .dot.degraded_performance {
    fill: #ffc168;
    opacity: 1
}

#frame .dot.partial_outage {
    fill: #ffc168;
    opacity: 1
}

#frame .dot.major_outage {
    fill: #ff4f81;
    opacity: 1
}

#frame .dot.display {
    stroke: 10px
}

.tooltip-uptime {
    position: absolute;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.85);
    padding: 8px 16px;
    color: white;
    width: auto;
    max-width: 220px;
    font-size: 16px;
    opacity: 0;
    transition: visibility 0s linear 0s, opacity 0.3s ease
}

.tooltip-uptime svg {
    margin-right: 5px;
    width: 16px !important
}

.tooltip-uptime span {
    opacity: 1;
    font-size: 14px;
    width: 100%;
    float: left
}

.tooltip-uptime span:first-of-type {
    opacity: 0.8;
    font-size: 12px;
    margin-bottom: 4px
}

.tooltip-uptime.display {
    opacity: 1;
    visibility: visible;
    transition: visibility 0s linear 0s, opacity 0.3s ease
}

#search-container {
    display: none
}

.cookies-eu {
    will-change: transform
}

 

#home section.video {
    position: relative;
    padding-top: 0
}

@media (max-width: 992px) {
    #home section.video {
        text-align:center
    }
}

#home section.video .icon-blocks-block {
    will-change: transform, opacity
}

#home section.video .col-md-12 {
    top: -90px
}

#home section.video .video-poster {
    background-size: cover;
    background-image: url("https://www.algolia.com/static_assets/images/svg/video-poster-eb1f06d4.svg")
}

#home section.video .video-play {
    width: 42px;
    height: 42px;
    border-radius: 100%;
    background-color: #fff
}

#home section.video .video-play:focus {
    outline: none
}

#home section.video .videowrapper {
    display: block;
    max-width: 560px;
    width: 100%;
    padding-bottom: 56%;
    box-shadow: 0 6px 16px rgba(62,57,107,0.3);
    will-change: transform;
    z-index: 1
}

@media (min-width: 480px) and (max-width: 1200px) {
    #home section.video .videowrapper {
        margin:30px auto 0 auto
    }
}

@media (max-width: 480px) {
    #home section.video .videowrapper {
        width:100%;
        padding-bottom: 56%
    }
}

#home section.video .videowrapper iframe {
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#home section.video:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 350px;
    background: white;
    -ms-transform: skewY(-6deg);
    transform:skewY(-6deg);
    z-index: 0;
    top: -170px;
    z-index: 1;
    box-shadow: rgba(112,128,175,0.2) 0 -16px 24px;
}

@media (min-width: 1200px) {
    #home section.video:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (max-width: 768px) {
    #home section.video {
        text-align:center
    }

    #home section.video header {
        text-align: center
    }
}

#home section.pillars {
    position: relative
}

#home section.pillars header svg {
    border-radius: 100%;
    overflow: hidden
}

#home section.pillars .col-md-3.elevation1 {
    margin: 0 15px;
    vertical-align: top;
    -ms-flex: 0 1 30%;
    flex: 0 1 30%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform, box-shadow
}

#home section.pillars .col-md-3.elevation1:hover {
    transform: translateY(-5px) translateZ(0);
    box-shadow: 0 16px 32px 0 rgba(62,57,107,0.28),0 0 0 transparent
}

@media (max-width: 992px) {
    #home section.pillars .col-md-3.elevation1 {
        -ms-flex:0 1 100%;
        flex: 0 1 100%;
        margin: 0 0 1em
    }
}

#home section.pillars .btn.fill-white {
    background: white !important
}

#home section.pillars:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 300px;
    background: #f8faff;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -150px;
    z-index: 1
}

@media (min-width: 1200px) {
    #home section.pillars:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (max-width: 768px) {
    #home section.pillars:before {
        box-shadow:rgba(112,128,175,0.2) 0 -16px 24px
    }
}

#home section.pillars _:-ms-input-placeholder,#home section.pillars :root .col-md-3.elevation1 {
    -ms-flex-preferred-size: 25% !important
}

#home .dot {
    width: 6px;
    height: 6px;
    border-radius: 6px
}

#home .customers {
    background-color: white
}

#home .customers:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 300px;
    background: white;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -50px;
    z-index: 1
}

@media (min-width: 1200px) {
    #home .customers:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

#home .customers .icon-testimonials .icon-testimonials-window {
    will-change: opacity
}

#home .customers .container-fluid {
    margin-top: -60px
}

@media (max-width: 540px) {
    #home .customers .container-fluid>.row {
        padding:0 0 40px 0
    }
}

#home .customers .container-fluid .row {
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: -100px
}

#home .customers .card-side {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

#home .customers .align-vertical {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between
}

#home .customers .main-center {
    min-width: 600px
}

@media (max-width: 1200px) {
    #home .customers .main-center {
        min-width:540px
    }
}

@media (max-width: 540px) {
    #home .customers .main-center {
        min-width:100%
    }
}

#home .customers .main-customer-holder {
    color: white;
    min-height: 280px;
    border-radius: 4px
}

@media (max-width: 1200px) {
    #home .customers .main-customer-holder {
        min-height:240px
    }
}

@media (max-width: 540px) {
    #home .customers .main-customer-holder {
        min-height:240px
    }
}

#home .customers .main-customer-holder h2 i {
    line-height: 1.2;
    font-size: 22px
}

@media (max-width: 1200px) {
    #home .customers .main-customer-holder h2 i {
        font-size:18px;
        padding: 0 20px
    }
}

@media (max-width: 768px) {
    #home .customers .main-customer-holder h2 i {
        font-size:18px;
        padding: 10px 15px
    }
}

#home .customers .self-right {
    -ms-flex-item-align: end;
    align-self: flex-end
}

#home .customers .column-lvl-1 {
    font-size: 1em;
    height: 280px
}

@media (min-width: 1200px) {
    #home .customers .column-lvl-1 {
        min-width:12%
    }
}

@media (max-width: 1200px) {
    #home .customers .column-lvl-1 {
        min-width:20%;
        height: 240px
    }
}

#home .customers .customer-lvl-1 {
    height: 45%
}

#home .customers .column-lvl-2 {
    min-width: 12%;
    height: 414px
}

@media (max-width: 1200px) {
    #home .customers .column-lvl-2 {
        height:312px;
        min-width: 16%;
        font-size: .8em
    }
}

#home .customers .column-lvl-3 {
    min-width: 10%;
    height: 530px
}

@media (max-width: 1200px) {
    #home .customers .column-lvl-3 {
        min-width:7%;
        font-size: .4em
    }
}

#home .customers .customer-lvl-2 {
    height: 29%
}

#home .customers .customer-lvl-3 {
    height: 15%
}

#home .customers .customer-lvl-4 {
    height: 15%;
    width: 70%
}

#home .customers .main-customer {
    overflow: hidden;
    height: 100%;
    color: white
}

#home .customers h2 {
    left: 0
}

#home .customers h2 i {
    font-weight: 300;
    font-size: 22px
}

#home .customers .card {
    border-radius: 4px;
    transition: all 900ms ease
}

#home .customers .card.active {
    color: white;
    background-color: #3e396b
}

#home .customers .customer {
    right: 0;
    bottom: 0;
    line-height: .8
}

@media (max-width: 1200px) {
    #home .customers .customer {
        font-size:1.4em
    }
}

#home .customers .customerinfo {
    width: 100%;
    left: 50%;
    bottom: -100px;
    -ms-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%)
}

#home .customers .customerinfo button {
    margin-left: auto;
    z-index: 50
}

#home .customers .customer-cta .row {
    overflow: visible;
    top: 0;
    left: 20px;
    width: 100%;
    opacity: 0;
    transition: 600ms cubic-bezier(0.23, 1, 0.32, 1)
}

@media (max-width: 768px) {
    #home .customers .customer-cta .row {
        display:block;
        text-align: center
    }
}

#home .customers .customer-cta .row .col-sm-6 {
    transition: 200ms cubic-bezier(0.23, 1, 0.32, 1)
}

@media (max-width: 768px) {
    #home .customers .customer-cta .row .col-sm-6 {
        padding:0 15px;
        display: block
    }
}

#home .customers .customer-cta .row .col-sm-6:first-child {
    -ms-transform: translate(3px, 0);
    transform: translate(3px, 0)
}

@media (max-width: 768px) {
    #home .customers .customer-cta .row .col-sm-6:first-child {
        -ms-transform:translate(0, 3px);
        transform: translate(0, 3px)
    }
}

#home .customers .customer-cta .row .col-sm-6:last-child {
    -ms-transform: translate(-3px, 0);
    transform: translate(-3px, 0);
    -ms-flex-pack: end;
    justify-content: flex-end
}

@media (max-width: 768px) {
    #home .customers .customer-cta .row .col-sm-6:last-child {
        text-align:center;
        margin-top: 16px;
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

#home .customers .customer-cta .button {
    -ms-transform: translate(0, -12px);
    transform: translate(0, -12px)
}

#home .customers .customer-cta .row.active {
    transition: 900ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 10;
    opacity: 1
}

#home .customers .customer-cta .row.active .col-sm-6 {
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    transition: all 900ms 350ms cubic-bezier(0.23, 1, 0.32, 1)
}

#home .customers .customer-cta .row.active button {
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media (min-width: 768px) {
    #home .customers .customer-cta .col-sm-6 {
        display:-ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center
    }
}

#home .customers .customer-controls {
    left: 15px;
    width: 100%;
    bottom: -200px
}

#home .customers .control-left {
    left: -13%
}

@media (max-width: 768px) {
    #home .customers .control-left {
        left:20px
    }
}

#home .customers .control-left:hover {
    -ms-transform: translate(-3px, -50%);
    transform: translate(-3px, -50%)
}

#home .customers .control-right {
    right: -13%
}

@media (max-width: 768px) {
    #home .customers .control-right {
        right:20px
    }
}

#home .customers .control-right:hover {
    -ms-transform: translate(3px, -50%);
    transform: translate(3px, -50%)
}

#home .customers .control {
    margin-top: -70px;
    line-height: 1;
    background-color: transparent;
    border: none;
    transition: 900ms cubic-bezier(0.23, 1, 0.32, 1);
    outline: none
}

#home .customers .control:hover {
    color: #3e396b
}

#home .customers .avatar {
    min-width: 50px;
    min-height: 50px;
    width: 50px;
    border-radius: 50px;
    background-color: #3e396b;
    background-size: cover;
    background-position: center
}

@media (max-width: 768px) {
    #home .customers .avatar {
        margin:0 auto
    }
}

#home .customers .customer-name {
    color: #3e396b
}

#home .customers .dot {
    border: none;
    pointer-events: none;
    background-color: #8994c6
}

#home .customers .dot.active {
    background-color: #3e396b
}

#home .nav-tabs.tab-codesnippets {
    border-top: 1px solid #8995C7
}

#home .nav-tabs.tab-codesnippets li {
    border: none !important;
    width: 16.667%
}

@media (max-width: 480px) {
    #home .nav-tabs.tab-codesnippets li {
        width:25%
    }
}

#home .nav-tabs.tab-codesnippets li.active.reactinstantsearch span.clickable.text-muted svg {
    opacity: 1;
    color: #00aeff !important
}

#home .nav-tabs.tab-codesnippets li.active.instantsearchjs span.clickable.text-muted svg {
    opacity: 1;
    color: #3e396b !important
}

#home .nav-tabs.tab-codesnippets li.active.android span.clickable.text-muted svg {
    opacity: 1;
    color: #A4C145 !important
}

#home .nav-tabs.tab-codesnippets li.active.swift span.clickable.text-muted svg {
    opacity: 1;
    color: #FE6C34 !important
}

#home .nav-tabs.tab-codesnippets li.active.csharp span.clickable.text-muted svg {
    opacity: 1;
    color: #00ADEF !important
}

#home .nav-tabs.tab-codesnippets li.active.scala span.clickable.text-muted svg {
    opacity: 1;
    color: #DC332D !important
}

#home .nav-tabs.tab-codesnippets li.active.javascript span.clickable.text-muted svg {
    opacity: 1;
    color: #FFD141 !important
}

#home .nav-tabs.tab-codesnippets li.active.python span.clickable.text-muted svg {
    opacity: 1;
    color: #3770A0 !important
}

#home .nav-tabs.tab-codesnippets li.active.python .fill-alt {
    fill: #FFD141
}

#home .nav-tabs.tab-codesnippets li.active.ruby span.clickable.text-muted svg {
    opacity: 1;
    color: #A62C46 !important
}

#home .nav-tabs.tab-codesnippets li.active.rails span.clickable.text-muted svg {
    opacity: 1;
    color: #D1405F !important
}

#home .nav-tabs.tab-codesnippets li.active.django span.clickable.text-muted svg {
    opacity: 1;
    color: #326543 !important
}

#home .nav-tabs.tab-codesnippets li.active.php span.clickable.text-muted svg {
    opacity: 1;
    color: #6C7EB7 !important
}

#home .nav-tabs.tab-codesnippets li.active.symfony span.clickable.text-muted svg {
    opacity: 1;
    color: #000 !important
}

#home .nav-tabs.tab-codesnippets li.active.java span.clickable.text-muted svg {
    opacity: 1;
    color: #3694D6 !important
}

#home .nav-tabs.tab-codesnippets li.active.go span.clickable.text-muted svg {
    opacity: 1;
    color: #3770A0 !important
}

#home .nav-tabs.tab-codesnippets li.active.vue span.clickable.text-muted svg {
    opacity: 1;
    color: #4DBA87 !important
}

#home .nav-tabs.tab-codesnippets li.active.angular span.clickable.text-muted svg {
    opacity: 1;
    color: #C5002F !important
}

#home .nav-tabs.tab-codesnippets li.active.apple span.clickable.text-muted svg {
    opacity: 1;
    color: #201C38 !important
}

#home .nav-tabs.tab-codesnippets li svg {
    width: 48px;
    height: 48px
}

#home .nav-tabs.tab-codesnippets li svg path {
    transition: all 500ms ease
}

#home .nav-tabs.tab-codesnippets li span.clickable.text-muted>.text-muted {
    padding: 0;
    opacity: .5;
    font-weight: 400;
    margin-bottom: 0
}

#home .nav-tabs.tab-codesnippets li img {
    margin-bottom: 0
}

#home .nav-tabs.tab-codesnippets li.active a {
    font-weight: 600
}

#home .nav-tabs.tab-codesnippets li.active a span {
    color: inherit
}

#home .code {
    background-color: white
}

@media (max-width: 768px) {
    #home .code .text-right {
        text-align:left
    }

    #home .code .backend-label,#home .code .frontend-label {
        float: right
    }
}

#home .code pre span {
    opacity: 0;
    transition: 330ms ease
}

#home .code pre span:nth-child(1) {
    transition-delay: 9ms
}

#home .code pre span:nth-child(2) {
    transition-delay: 18ms
}

#home .code pre span:nth-child(3) {
    transition-delay: 27ms
}

#home .code pre span:nth-child(4) {
    transition-delay: 36ms
}

#home .code pre span:nth-child(5) {
    transition-delay: 45ms
}

#home .code pre span:nth-child(6) {
    transition-delay: 54ms
}

#home .code pre span:nth-child(7) {
    transition-delay: 63ms
}

#home .code pre span:nth-child(8) {
    transition-delay: 72ms
}

#home .code pre span:nth-child(9) {
    transition-delay: 81ms
}

#home .code pre span:nth-child(10) {
    transition-delay: 90ms
}

#home .code pre span:nth-child(11) {
    transition-delay: 99ms
}

#home .code pre span:nth-child(12) {
    transition-delay: 108ms
}

#home .code pre span:nth-child(13) {
    transition-delay: 117ms
}

#home .code pre span:nth-child(14) {
    transition-delay: 126ms
}

#home .code pre span:nth-child(15) {
    transition-delay: 135ms
}

#home .code pre span:nth-child(16) {
    transition-delay: 144ms
}

#home .code pre span:nth-child(17) {
    transition-delay: 153ms
}

#home .code pre span:nth-child(18) {
    transition-delay: 162ms
}

#home .code pre span:nth-child(19) {
    transition-delay: 171ms
}

#home .code pre span:nth-child(20) {
    transition-delay: 180ms
}

#home .code pre span:nth-child(21) {
    transition-delay: 189ms
}

#home .code pre span:nth-child(22) {
    transition-delay: 198ms
}

#home .code pre span:nth-child(23) {
    transition-delay: 207ms
}

#home .code pre span:nth-child(24) {
    transition-delay: 216ms
}

#home .code pre span:nth-child(25) {
    transition-delay: 225ms
}

#home .code pre span:nth-child(26) {
    transition-delay: 234ms
}

#home .code pre span:nth-child(27) {
    transition-delay: 243ms
}

#home .code pre span:nth-child(28) {
    transition-delay: 252ms
}

#home .code pre span:nth-child(29) {
    transition-delay: 261ms
}

#home .code pre span:nth-child(30) {
    transition-delay: 270ms
}

#home .code pre span:nth-child(31) {
    transition-delay: 279ms
}

#home .code pre span:nth-child(32) {
    transition-delay: 288ms
}

#home .code pre span:nth-child(33) {
    transition-delay: 297ms
}

#home .code pre span:nth-child(34) {
    transition-delay: 306ms
}

#home .code pre span:nth-child(35) {
    transition-delay: 315ms
}

#home .code pre span:nth-child(36) {
    transition-delay: 324ms
}

#home .code pre span:nth-child(37) {
    transition-delay: 333ms
}

#home .code pre span:nth-child(38) {
    transition-delay: 342ms
}

#home .code pre span:nth-child(39) {
    transition-delay: 351ms
}

#home .code pre span:nth-child(40) {
    transition-delay: 360ms
}

#home .code pre span:nth-child(41) {
    transition-delay: 369ms
}

#home .code pre span:nth-child(42) {
    transition-delay: 378ms
}

#home .code pre span:nth-child(43) {
    transition-delay: 387ms
}

#home .code pre span:nth-child(44) {
    transition-delay: 396ms
}

#home .code pre span:nth-child(45) {
    transition-delay: 405ms
}

#home .code pre span:nth-child(46) {
    transition-delay: 414ms
}

#home .code pre span:nth-child(47) {
    transition-delay: 423ms
}

#home .code pre span:nth-child(48) {
    transition-delay: 432ms
}

#home .code pre span:nth-child(49) {
    transition-delay: 441ms
}

#home .code pre span:nth-child(50) {
    transition-delay: 450ms
}

#home .code pre span:nth-child(51) {
    transition-delay: 459ms
}

#home .code pre span:nth-child(52) {
    transition-delay: 468ms
}

#home .code pre span:nth-child(53) {
    transition-delay: 477ms
}

#home .code pre span:nth-child(54) {
    transition-delay: 486ms
}

#home .code pre span:nth-child(55) {
    transition-delay: 495ms
}

#home .code pre span:nth-child(56) {
    transition-delay: 504ms
}

#home .code pre span:nth-child(57) {
    transition-delay: 513ms
}

#home .code pre span:nth-child(58) {
    transition-delay: 522ms
}

#home .code pre span:nth-child(59) {
    transition-delay: 531ms
}

#home .code pre span:nth-child(60) {
    transition-delay: 540ms
}

#home .code pre span:nth-child(61) {
    transition-delay: 549ms
}

#home .code pre span:nth-child(62) {
    transition-delay: 558ms
}

#home .code pre span:nth-child(63) {
    transition-delay: 567ms
}

#home .code pre span:nth-child(64) {
    transition-delay: 576ms
}

#home .code pre span:nth-child(65) {
    transition-delay: 585ms
}

#home .code pre span:nth-child(66) {
    transition-delay: 594ms
}

#home .code pre span:nth-child(67) {
    transition-delay: 603ms
}

#home .code pre span:nth-child(68) {
    transition-delay: 612ms
}

#home .code pre span:nth-child(69) {
    transition-delay: 621ms
}

#home .code pre span:nth-child(70) {
    transition-delay: 630ms
}

#home .code pre.active span {
    opacity: 1
}

#home .code .icon-developers .icon-developer-code {
    will-change: transform, opacity
}

#home .code .gradient-left:before {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(40deg, transparent 0%, #3E366A 100%);
    content: "";
    border-radius: 6px;
    will-change: transform
}

#home .code .gradient-right:before {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(-40deg, #3E366A 0%, transparent 100%);
    content: "";
    border-radius: 6px;
    will-change: transform
}

#home .main-customer {
    border-radius: 4px;
    opacity: 0;
    transition: all 600ms ease;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    will-change: opacity
}

#home .main-customer .animatable {
    will-change: transform, opacity
}

#home .main-customer h2 {
    opacity: 0;
    transition: all 900ms 200ms cubic-bezier(0.19, 1, 0.22, 1)
}

#home .main-customer .customer {
    opacity: 0;
    transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1)
}

#home .main-customer .main-customer-background {
    width: 100%;
    min-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 4px;
    overflow: hidden
}

#home .main-customer .main-customer-background svg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -10px);
    transform: translate(-50%, -10px)
}

@media (max-width: 1200px) {
    #home .main-customer .main-customer-background svg {
        width:130%;
        height: 100%
    }
}

@media (max-width: 400px) {
    #home .main-customer .main-customer-background svg {
        width:220%;
        height: 220%;
        -ms-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%)
    }
}

#home .main-customer.main-customer-back {
    z-index: 0
}

#home .main-customer.main-customer-out {
    transition: 300ms 80ms ease;
    pointer-events: none;
    opacity: 0
}

#home .main-customer.main-customer-out .animatable {
    -ms-transform: translate(0, 15px) !important;
    transform: translate(0, 15px) !important;
    transition: 80ms ease;
    opacity: 0 !important
}

#home .main-customer.main-customer-in {
    z-index: 100;
    opacity: 1;
    will-change: transform, opacity
}

#home .main-customer.main-customer-in h2 {
    opacity: 1
}

#home .main-customer.main-customer-in .customer {
    opacity: 1
}

.code-container {
    border-radius: 6px;
    min-height: 300px;
    border-radius: 6px;
    position: relative;
    will-change: height
}

.code-container>div {
    z-index: 10
}

.code-container:after {
    top: 22%;
    width: 90%;
    height: 80%;
    left: 5%;
    content: "";
    position: absolute;
    background-color: rgba(62,57,107,0.5);
    z-index: -1;
    filter: blur(20px)
}

.code-container header {
    border-radius: 6px 6px 0 0;
    color: #8994c6
}

.code-container pre {
    border-radius: 0;
    background-color: transparent;
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    max-height: 100%;
    padding: 15px 15px 40px 15px
}

.code-container pre code {
    max-height: 205px;
    display: block
}

.code-container pre.active {
    opacity: 1;
    pointer-events: auto
}

.api-call-counter {
    text-align: center
}

.number-count {
    display: inline-block;
    margin: 0 5px;
    padding: 5px;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 20px;
    box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.08)
}

.number-count .number {
    display: inline-block;
    padding: 0 5px;
    line-height: 30px;
    border-radius: 3px;
    border: 1px solid #DDD;
    background: white;
    box-shadow: inset -2px -2px 0 0 rgba(0,0,0,0.05)
}

#integrate {
    background: #3e396b;
    border-bottom: none !important
}

@media (max-width: 768px) {
    #integrate {
        padding:15px 0 25px
    }
}

#integrate h2 {
    display: inline-block;
    width: 100%;
    color: #f8faff;
    -webkit-font-smoothing: antialiased
}

#integrate .section-heading {
    color: #f8faff;
    -webkit-font-smoothing: antialiased
}

#integrate h3 {
    font-weight: 400;
    font-size: 1.3em;
    padding-bottom: 8px;
    display: inline-block;
    text-transform: uppercase
}

#integrate h4 {
    color: #8994c6
}

#integrate pre {
    border: none;
    position: relative
}

#integrate pre .err {
    border: none !important
}

#integrate .panel-default {
    box-shadow: 0 1px 10px 1px rgba(0,0,0,0.4)
}

#integrate .tab-content {
    padding: 0 2em 2em;
    background-color: white
}

#integrate .sample-step {
    animation: .3s fadeInUp ease-in-out backwards
}

#integrate .sample-step:last-child {
    animation: .3s .3s fadeInUp ease-in-out backwards
}

ul.tab-codesnippets {
    border: none;
    background: white
}

ul.tab-codesnippets li {
    background: white;
    border-bottom: solid 2px #f8faff;
    width: 7.69231%;
    text-align: center;
    padding: 10px 0 0 0;
    margin: 0
}

@media (max-width: 768px) {
    ul.tab-codesnippets li {
        width:14.2428%
    }
}

ul.tab-codesnippets li a {
    display: block;
    padding: 0 5px;
    margin: .6em 0;
    border: none !important;
    color: #8994c6;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    background-color: white !important
}

ul.tab-codesnippets li img {
    opacity: .4;
    margin-bottom: .3em
}

ul.tab-codesnippets li.active {
    border-color: #3e396b
}

ul.tab-codesnippets li.active a,ul.tab-codesnippets li.active a:hover,ul.tab-codesnippets li.active a:focus {
    color: #3e396b
}

ul.tab-codesnippets li.active a img,ul.tab-codesnippets li.active a:hover img,ul.tab-codesnippets li.active a:focus img {
    opacity: 1
}

#modal-redeem {
    -ms-flex-align: center;
    align-items: center
}

#modal-redeem .modal-background {
    background-color: #f8faff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .4
}

#modal-redeem .modal-content {
    will-change: transform, opacity;
    opacity: 0;
    -ms-transform: translate(0, 16px);
    transform: translate(0, 16px);
    transition: 800ms cubic-bezier(0.55, 0, 0.1, 1)
}

#modal-redeem img {
    margin: 0 auto;
    width: 100%;
    max-width: 160px
}

#modal-redeem h3 {
    font-size: 2em
}

#modal-redeem input[type="text"] {
    line-height: 40px;
    border-radius: 40px;
    height: 40px;
    border-color: #66afe9
}

#modal-redeem .input-group input {
    height: 40px
}

#product section.demos:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 350px;
    background: #f8faff;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -140px;
    box-shadow: 0 -6px 32px rgba(62,57,107,0.1)
}

@media (min-width: 1200px) {
    #product section.demos:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

#product section.demos .container {
    max-width: 800px
}

#product section.demos .radius100p {
    width: 64px;
    height: 64px;
    line-height: 64px;
    background-image: url("https://www.algolia.com/static_assets/images/svg/button-background-c5bdb185.svg");
    background-position: top -1px left -1px;
    background-blend-mode: overlay
}

#product section.demos i.text-xl {
    line-height: 1.9 !important
}

#product .container-indicator .dot {
    height: 6px;
    width: 6px;
    background-color: #8994c6;
    display: inline-block
}

#product .container-indicator .dot.active {
    background-color: #3e396b
}

#product .container-indicator .dot:not(:last-child) {
    margin-right: 14px
}

@media (max-width: 768px) {
    #product .product-features {
        text-align:center
    }

    #product .product-features h3,#product .product-features p {
        max-width: 400px;
        margin: 0 auto
    }

    #product .product-features .p-r-xlarge {
        padding-right: 15px
    }
}

#product .product-features img {
    max-width: 100%
}

#product .product-features a {
    text-decoration: none
}

#product .input-hitscontainer {
    -ms-transform: translate(0, 12px);
    transform: translate(0, 12px);
    position: absolute;
    width: 100%;
    left: 0
}

#product .input-hitscontainer.loaded {
    z-index: 10
}

#product .input-hitscontainer.loaded .hit {
    opacity: 1;
    transition: all 1025ms cubic-bezier(0.165, 0.84, 0.44, 1)
}

#product .input-hitscontainer.loaded .ais-hits--item:nth-child(1) .hit {
    transition-delay: 160ms
}

#product .input-hitscontainer.loaded .ais-hits--item:nth-child(2) .hit {
    transition-delay: 230.4ms
}

#product .input-hitscontainer.loaded .ais-hits--item:nth-child(3) .hit {
    transition-delay: 265.6ms
}

#product .input-hitscontainer .ais-hits__empty {
    opacity: 0;
    transition: 300ms cubic-bezier(0.165, 0.84, 0.44, 1)
}

#product .input-hitscontainer .hit {
    margin-bottom: 8px;
    height: 72px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    box-shadow: 0 5px 15px 0 rgba(112,128,175,0.2);
    opacity: 0;
    transition: 300ms cubic-bezier(0.165, 0.84, 0.44, 1)
}

#product .input-hitscontainer .hit.hit-actors .hit-name {
    -ms-flex: 0 1 62%;
    flex: 0 1 62%
}

#product .input-hitscontainer .hit.hit-actors em {
    background-color: rgba(255,193,104,0.3);
    border-bottom: 2px solid #ffc168;
    text-decoration: none;
    font-style: normal
}

#product .input-hitscontainer .hit.hit-soda .name {
    line-height: 1;
    font-size: 22px;
    min-width: 100%
}

#product .input-hitscontainer .hit.hit-soda .label {
    margin-top: 18px;
    line-height: 1.2;
    color: #a6b0d8;
    min-width: 100%
}

#product .input-hitscontainer .hit.hit-soda em {
    background-color: rgba(0,174,255,0.3);
    border-bottom: 2px solid #00aeff;
    text-decoration: none;
    font-style: normal
}

#product .input-hitscontainer .hit-soda-price {
    color: #a6b0d8;
    font-weight: bold;
    font-size: 22px
}

#product .input-hitscontainer .preview {
    height: 72px;
    line-height: 72px;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%
}

#product .input-hitscontainer .preview svg {
    max-height: 38px;
    vertical-align: middle;
    margin-left: -4px
}

#product .input-hitscontainer .preview img {
    width: 34px;
    height: 34px;
    border-radius: 30px;
    object-fit: cover
}

#product .input-hitscontainer .hit-name {
    -ms-flex: 0 1 62%;
    flex: 0 1 62%;
    padding: 0 1em;
    height: 72px;
    -ms-flex-align: center;
    align-items: center
}

#product .input-hitscontainer .hit-details {
    -ms-flex: 0 1 20%;
    flex: 0 1 20%;
    height: 72px;
    line-height: 72px
}

#product .ideal-ux .bg-bulletbackground,#product .infrastructure .bg-bulletbackground {
    z-index: -1;
    -ms-transform-origin: left center;
    transform-origin: left center;
    pointer-events: none
}

@media (max-width: 768px) {
    #product .ideal-ux .bg-bulletbackground,#product .infrastructure .bg-bulletbackground {
        -ms-transform:translate(0, 0);
        transform: translate(0, 0)
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    #product .ideal-ux .bg-bulletbackground,#product .infrastructure .bg-bulletbackground {
        -ms-transform:translate(0, 40px) scaleX(1.2) scaleY(1.14);
        transform: translate(0, 40px) scaleX(1.2) scaleY(1.14)
    }
}

@media (min-width: 1200px) {
    #product .ideal-ux .bg-bulletbackground,#product .infrastructure .bg-bulletbackground {
        -ms-transform:translate(0, 40px) scaleX(1.5) scaleY(1.18);
        transform: translate(0, 40px) scaleX(1.5) scaleY(1.18)
    }
}

#product .infrastructure .animatable-group,#product .ideal-ux .animatable-group {
    will-change: opacity
}

#product .infrastructure .animatable-rack {
    will-change: opacity
}

#product .quote-linespace {
    width: 140px;
    margin: 0 auto;
    position: relative
}

#product .quote-linespace.quote-white:after {
    background-color: white
}

#product .quote-linespace:before {
    width: 100%;
    height: 1px;
    background-color: #8994c6;
    content: "";
    position: absolute;
    left: 0;
    top: 0
}

#product .quote-linespace:after {
    width: 100%;
    height: 10px;
    position: absolute;
    left: 0;
    top: 1px;
    background-color: #f8faff;
    content: ""
}

#product .quote-linespace .quote-space {
    position: absolute;
    left: 50%;
    top: 0;
    width: 8px;
    height: 8px;
    -ms-transform: rotate(45deg) translate(-50%, -20%);
    transform: rotate(45deg) translate(-50%, -20%);
    display: inline-block;
    background-color: #f8faff;
    border-top: 1px solid #8994c6;
    border-left: 1px solid #8994c6
}

#product .quote-container .quote-person {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media (max-width: 768px) {
    #product .quote-container .quote-person {
        margin-top:20px;
        -ms-flex-flow: column;
        flex-flow: column
    }
}

#product .quote-container .avatar {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-color: #3e396b
}

#product .card-border {
    height: 100%
}

#product .card-border .card-border-line {
    opacity: 0;
    transition: opacity 0.2s ease
}

@media (max-width: 767px) {
    #product .card-border {
        position:absolute;
        left: 50%;
        top: 0;
        -ms-transform: translate(-50%, 8px);
        transform: translate(-50%, 8px);
        height: 200px;
        width: calc(100% - 30px);
        opacity: 0;
        text-align: center;
        transition: 900ms cubic-bezier(0.19, 1, 0.22, 1)
    }
}

#product .card-border.active {
    z-index: 10;
    background-color: white !important
}

#product .card-border.active .card-border-line {
    opacity: 1
}

@media (max-width: 767px) {
    #product .card-border.active {
        opacity:1;
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        transition: 900ms 400ms cubic-bezier(0.19, 1, 0.22, 1)
    }
}

#product .card-border:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    box-shadow: 0 5px 15px rgba(112,128,175,0.2);
    opacity: 0;
    transition: all 240ms ease-in-out;
    border-radius: 6px
}

#product .card-border:after {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
    content: "";
    height: 4px;
    border-radius: 6px 6px 0 0;
    opacity: 0;
    transition: all 240ms ease-in-out
}

#product .card-border.active:before,#product .card-border.active:after {
    opacity: 1
}

#product header svg {
    width: 56px;
    height: 56px;
    border-radius: 56px
}

#product .ideal-ux:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 350px;
    background: white;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -170px
}

@media (min-width: 1200px) {
    #product .ideal-ux:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (max-width: 768px) {
    #product .ideal-ux:before {
        height:150px;
        top: -75px
    }
}

@media (min-width: 768px) {
    #product .ideal-ux .row {
        display:-ms-flexbox;
        display: flex
    }
}

@media (max-width: 768px) {
    #product .ideal-ux .row {
        min-height:180px
    }
}

#product .ideal-ux .input-container {
    height: 440px;
    z-index: 1
}

#product .ideal-ux .input-container>.pos-abt {
    left: 0
}

#product .ideal-ux .input-tipscontainer {
    height: 400px;
    max-width: 600px;
    position: absolute;
    width: 100%;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

#product .ideal-ux .input-tip {
    opacity: 0;
    transition: opacity 0.4s ease-in-out,transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transform: scale(0.94) translate(-50%, 8px);
    transform: scale(0.94) translate(-50%, 8px);
    -ms-transform-origin: bottom center;
    transform-origin: bottom center;
    white-space: nowrap;
    will-change: opacity, transform
}

@media (max-width: 768px) {
    #product .ideal-ux .input-tip {
        width:330px;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom
    }
}

#product .ideal-ux .input-tip:first-child {
    left: 0%;
    bottom: 20%
}

@media (max-width: 768px) {
    #product .ideal-ux .input-tip:first-child {
        top:12%;
        left: 50%;
        bottom: auto
    }
}

#product .ideal-ux .input-tip:nth-child(2) {
    left: 6%;
    top: 8%
}

@media (max-width: 768px) {
    #product .ideal-ux .input-tip:nth-child(2) {
        top:12%;
        left: 50%
    }
}

#product .ideal-ux .input-tip:nth-child(3) {
    left: 58%;
    top: 12%
}

@media (max-width: 768px) {
    #product .ideal-ux .input-tip:nth-child(3) {
        left:50%
    }
}

#product .ideal-ux .input-tip:nth-child(4) {
    left: 103%;
    top: 22%
}

@media (max-width: 768px) {
    #product .ideal-ux .input-tip:nth-child(4) {
        left:50%;
        top: -6%
    }
}

#product .ideal-ux .input-strikethrough,#product .ideal-ux .input-underlined {
    opacity: 0;
    z-index: 10;
    height: 2px;
    width: 10px;
    pointer-events: none;
    transition: opacity 600ms ease;
    -ms-transform-origin: left center;
    transform-origin: left center;
    background-color: #3e396b
}

#product .ideal-ux .input-synonyms {
    top: 100%;
    z-index: 10;
    opacity: 0;
    -ms-transform: translate(0, -6px);
    transform: translate(0, -6px);
    width: 160px;
    pointer-events: none;
    list-style-type: none;
    box-shadow: 0 15px 30px rgba(112,128,175,0.15);
    transition: opacity 800ms ease
}

#product .ideal-ux .input-synonyms li {
    color: #3E396B;
    line-height: 1.2
}

#product .ideal-ux .input-search {
    -ms-transform: translate(0, 132px);
    transform: translate(0, 132px);
    transition: 900ms 200ms cubic-bezier(0.19, 1, 0.22, 1);
    display: inline-block
}

#product .ideal-ux .input-search:after {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: -4px;
    background-color: #EDEFF5;
    position: absolute;
    content: "";
    border-radius: 6px;
    z-index: -1
}

#product .ideal-ux .input-search:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    content: "";
    box-shadow: 0 10px 40px rgba(112,128,175,0.38);
    z-index: -2
}

#product .ideal-ux .input {
    padding-left: 46px;
    width: 330px;
    background-color: #FFF;
    border: none;
    background-image: url("https://www.algolia.com/static_assets/images/svg/sbx-icon-search-94fd6d39.svg");
    background-repeat: no-repeat;
    background-position: center left 16px;
    background-size: 18px
}

@media (max-width: 768px) {
    #product .ideal-ux .input {
        pointer-events:none
    }
}

#product .ideal-ux .input:focus {
    outline: none
}

@media (max-width: 768px) {
    #product .what-works {
        text-align:center
    }
}

#product .what-works header svg .linebar {
    transition: 600ms ease
}

#product .what-works:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 350px;
    background: #f8faff;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -170px
}

@media (min-width: 1200px) {
    #product .what-works:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (max-width: 768px) {
    #product .what-works:before {
        height:150px;
        top: -75px
    }
}

#product .what-works:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 250px;
    background: white;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    bottom: -180px
}

@media (min-width: 1200px) {
    #product .what-works:after {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

#product .infrastructure:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 350px;
    background: white;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -170px
}

@media (min-width: 1200px) {
    #product .infrastructure:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (max-width: 768px) {
    #product .infrastructure:before {
        height:150px;
        top: -75px
    }
}

@media (min-width: 768px) {
    #product .infrastructure .row {
        display:-ms-flexbox;
        display: flex
    }
}

@media (max-width: 768px) {
    #product .infrastructure .row {
        min-height:180px
    }
}

#product .infrastructure .icon-infrastructure {
    -ms-transform: scaleX(1.5);
    transform: scaleX(1.5)
}

#product .infrastructure .servers-container {
    width: 190px;
    height: 250px;
    margin: 0 auto;
    border-radius: 100%
}

#product .infrastructure .servers-container.blue .gradient-secondary {
    opacity: 1
}

#product .infrastructure .servers-container.blue .server-lightdot {
    background-color: #00aeff
}

#product .infrastructure .servers-container.orange .gradient-orange {
    opacity: 1
}

#product .infrastructure .servers-container.orange .server-lightdot {
    background-color: #ffc168
}

#product .infrastructure .servers-container.green .gradient-primary {
    opacity: 1
}

#product .infrastructure .servers-container.green .server-lightdot {
    background-color: #2dde98
}

#product .infrastructure .servers-spinner {
    border: 2px solid #00aeff;
    border-radius: 100%;
    width: 220px;
    height: 220px;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: 500ms ease;
    -ms-transform-origin: center;
    transform-origin: center;
    will-change: transform
}

#product .infrastructure .server-arrow {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #00aeff;
    transition: all 600ms ease
}

#product .infrastructure .server-arrow:first-child {
    top: -4px;
    right: 46%;
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

#product .infrastructure .server-arrow:nth-child(2) {
    top: 80%;
    right: 16px;
    -ms-transform: rotate(225deg);
    transform: rotate(225deg)
}

#product .infrastructure .server-arrow:nth-child(3) {
    top: 80%;
    left: 16px;
    -ms-transform: rotate(315deg);
    transform: rotate(315deg)
}

#product .server {
    width: 120px;
    height: 150px;
    background-color: #2A264B;
    padding-top: 12px;
    will-change: transform;
    -ms-transform-origin: center top;
    transform-origin: center top
}

#product .server:nth-child(2) {
    z-index: 10;
    -ms-transform: translate(35px, 105px);
    transform: translate(35px, 105px)
}

#product .server:nth-child(3) {
    -ms-transform: translate(104px, 35px) scale(0.8);
    transform: translate(104px, 35px) scale(0.8)
}

#product .server:nth-child(4) {
    -ms-transform: translate(-35px, 35px) scale(0.8);
    transform: translate(-35px, 35px) scale(0.8)
}

#product .server .server-lightsignal {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 300ms 100ms ease-in-out
}

#product .server .server-root {
    background-color: #FFF;
    border-radius: 2px;
    background-color: #5E54AA;
    width: 20px;
    height: 10px
}

#product .server .server-lightdot {
    width: 6px;
    height: 6px;
    background-color: #00aeff;
    transition: 300ms 80ms ease-in-out
}

#product .server .server-lightdot:first-child {
    transition-delay: 200ms
}

#product .server .server-lightdot:nth-child(2) {
    transition-delay: 230ms
}

#product .server .server-lightdot:nth-child(3) {
    transition-delay: 245ms
}

#product .server .server-light {
    width: 30%;
    height: 100%;
    margin: 0 0 0 auto;
    background-color: rgba(62,57,107,0.6)
}

#product .server .server-status {
    bottom: 16px;
    right: 10px;
    height: 10px;
    width: 50px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center
}

#product .server .server-space {
    height: 6px;
    background-color: #373163;
    opacity: .8;
    border-bottom: 1px solid #5D5297
}

#product .server .server-background {
    background-image: linear-gradient(to bottom, #726BA4, #3E396B);
    width: 100%;
    height: 100%;
    content: "";
    left: 0;
    top: -8px;
    z-index: -5;
    border-radius: 6px;
    position: absolute
}

#product .start-coding:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 350px;
    background: #f8faff;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -170px
}

@media (min-width: 1200px) {
    #product .start-coding:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (max-width: 768px) {
    #product .start-coding:before {
        height:150px;
        top: -75px
    }
}

@media (max-width: 768px) {
    #product .start-coding {
        text-align:center
    }

    #product .start-coding .img-responsive {
        margin: 0 auto
    }
}

#product .start-coding .container {
    max-width: 840px;
    margin: 0 auto
}

#product .footer-new-cta:before {
    background: #f8faff
}

.introduction .defer-img-load {
    transition: opacity 0.22s ease-in;
    opacity: 0
}

.introduction .defer-img-load--loaded {
    opacity: 1
}

.introduction .defer-img-load.active {
    opacity: 1
}

.introduction .hero-wrapper,.introduction .full-width-picture {
    height: 450px;
    background-position: center;
    background-size: cover
}

.introduction .hero-wrapper.small {
    height: 350px;
    min-height: 350px
}

.introduction section.no-padding {
    padding: 0
}

.introduction .title {
    margin: 4.5em 0 0.8em;
    font: "Montserrat", Helvetica, Arial, sans-serif
}

.introduction .title .team_count {
    display: none;
    text-transform: initial
}

.introduction .title .team_count>span:first-child {
    font-weight: bold;
    font-size: 1.4em;
    text-align: center
}

.introduction .hero-map-overlay {
    transition: opacity 0.12s ease-in;
    position: absolute !important;
    top: 0;
    height: 350px;
    width: calc(100% - 30px);
    opacity: 0
}

.introduction .hero-map-overlay:hover {
    opacity: 1
}

.introduction__background {
    background-size: cover;
    background-position-y: center;
    width: 100%;
    height: 350px;
    background-repeat: no-repeat
}

.introduction .map-description {
    text-align: center;
    position: absolute;
    top: 0;
    background-color: rgba(62,57,107,0.63);
    width: calc(100% - 30px);
    height: 100%;
    color: white;
    padding: 0px 20px;
    padding-bottom: 0
}

.introduction .map-description.sf-office {
    background-color: rgba(59,82,149,0.63)
}

.introduction .map-description .vertical-align {
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    top: 50%
}

.introduction .map-description .vertical-align .office-name {
    text-transform: uppercase;
    font-size: 42px;
    letter-spacing: 2px;
    margin-top: 0px;
    margin-bottom: 10px
}

.introduction .team .team-member {
    margin-bottom: 40px
}

.introduction .team .wrapper {
    position: relative
}

.introduction .team .wrapper:hover .funny-quote,.introduction .team .wrapper.highlight .funny-quote {
    opacity: 1
}

.introduction .team .full-name {
    font-size: 20px
}

.introduction .team .outerphoto {
    width: 220px;
    height: 220px;
    margin: 0 auto 1em
}

.introduction .team .outerphoto img.gravatar-url {
    filter: grayscale(0.9)
}

.introduction .team .funny-quote {
    transition: opacity 0.12s ease-in;
    position: absolute;
    width: 220px;
    height: 220px;
    background-color: rgba(62,57,107,0.6);
    border-radius: 600px;
    margin: 0 auto;
    top: 0px;
    left: 50%;
    margin-left: -110px;
    color: white;
    padding: 0px 20px;
    opacity: 0
}

.introduction .team .funny-quote .text {
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    top: 50%;
    font-size: 1.3rem
}

.introduction .team .funny-quote .text .emoji {
    position: absolute;
    top: -35px;
    left: 0;
    font-size: 1.9em;
    width: 100%;
    text-align: center
}

.introduction .know-us .videowrapper {
    display: block;
    max-width: 840px;
    width: 100%;
    padding-bottom: 42%;
    box-shadow: 0 6px 16px rgba(62,57,107,0.3);
    will-change: transform;
    z-index: 1
}

@media (min-width: 480px) and (max-width: 1199px) {
    .introduction .know-us .videowrapper {
        padding-bottom:50%;
        margin: 30px auto 0 auto
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    .introduction .know-us .videowrapper {
        padding-bottom:56%
    }
}

@media (max-width: 480px) {
    .introduction .know-us .videowrapper {
        width:100%;
        padding-bottom: 56%;
        max-width: 560px
    }
}

.introduction .know-us .videowrapper iframe {
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.introduction .ais-hits--item em {
    color: #00aeff;
    font-style: normal;
    font-weight: bold
}

.introduction .carousel-inner {
    height: 600px
}

.introduction .item {
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%
}

.introduction .investors a {
    height: 5em;
    line-height: 5em
}

.introduction .investors a img {
    display: inline-block;
    vertical-align: middle
}

@media (max-width: 480px) {
    .introduction .team {
        display:none
    }
}

.introduction .hero-wrapper {
    min-height: 450px;
    position: relative
}

@media (max-width: 480px) {
    .introduction .hero-wrapper {
        text-align:center
    }
}

.introduction .full-width-picture {
    min-height: 450px
}

.introduction .hero-overlay {
    background: #3e396b;
    background-color: rgba(62,57,107,0.6);
    position: absolute;
    width: 100%;
    height: 100%
}

#roles .ais-menu--body {
    text-align: left
}

#roles .ais-menu--item {
    cursor: pointer;
    display: inline-block;
    margin: 3px 4px
}

@media (max-width: 480px) {
    .millisecondsmatter {
        font-size:29px
    }
}

.jobs i.icon-map-marker {
    color: #CE2770
}

.jobs .title {
    font-size: 5em;
    font-weight: 500;
    margin-top: 200px
}

@media (max-width: 768px) {
    .jobs .title {
        margin-top:140px
    }
}

@media (max-width: 480px) {
    .jobs .title {
        font-size:4em
    }
}

.jobs .videowrapper {
    display: block;
    max-width: 540px;
    width: 100%;
    padding-bottom: 56%;
    box-shadow: 0 6px 16px rgba(62,57,107,0.3);
    will-change: transform;
    z-index: 1
}

@media (min-width: 480px) and (max-width: 1200px) {
    .jobs .videowrapper {
        margin:30px auto 0 auto
    }
}

@media (max-width: 480px) {
    .jobs .videowrapper {
        width:100%;
        padding-bottom: 56%
    }
}

.jobs .videowrapper iframe {
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (max-width: 992px) {
    .jobs .career-ownership {
        text-align:center
    }
}

.jobs .hero-paragraph {
    font-size: 1.2em;
    line-height: 1.8em
}

.jobs .core-values h3 {
    font-weight: normal
}

.jobs .core-values svg {
    width: 100%;
    height: 120px
}

.jobs .core-values .row {
    margin-top: 20px
}

.jobs .quotes-carousel {
    padding-bottom: 90px
}

.jobs .quotes-carousel .carousel-indicators li {
    border-color: #8994c6
}

.jobs .quotes-carousel .carousel-indicators .active {
    background-color: #8994c6
}

.jobs .quotes {
    background-repeat: no-repeat;
    height: 250px;
    border-radius: 3000px;
    width: 250px;
    margin: 0 auto;
    background-size: 100% auto;
    display: block;
    margin-bottom: 30px
}

.jobs .quotes.gianluca {
    background-image: url("https://www.algolia.com/static_assets/images/quotes/gianluca-quote-d7bf950b.jpg")
}

.jobs .quotes.olivier {
    background-image: url("https://www.algolia.com/static_assets/images/quotes/olivier-quote-fa87620d.jpg")
}

.jobs .quotes.vincent {
    background-image: url("https://www.algolia.com/static_assets/images/quotes/vincent-quote-3845fc09.jpg")
}

.jobs .quotes.alex {
    background-image: url("https://www.algolia.com/static_assets/images/quotes/alex-quote-902eacb2.jpg")
}

.jobs .quotes.jen {
    background-image: url("https://www.algolia.com/static_assets/images/quotes/jen-quote-c63ac0dc.jpg")
}

.jobs .quote-wrapper {
    min-height: 280px;
    display: table
}

.jobs .quote-wrapper .quote {
    display: table-cell;
    vertical-align: middle
}

.jobs .text {
    border-left: solid 2px #8994c6;
    font-style: italic;
    margin-bottom: 15px;
    padding: 0 20px
}

.jobs .name {
    font-weight: bold
}

.hero-wrapper {
    min-height: 450px;
    position: relative
}

.full-width-picture {
    min-height: 450px;
    background: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.hero-overlay {
    background: #3e396b;
    background-color: rgba(62,57,107,0.6);
    position: absolute;
    width: 100%;
    height: 100%
}

.solutions-cse {
    padding-top: 34px;
    background-color: #f9fafb !important
}

.solutions-cse img {
    width: 100%;
    height: auto
}

@media (max-width: 768px) {
    .solutions-cse img {
        margin-bottom:30px
    }
}

.solutions-cse .row {
    margin-top: 80px;
    margin-bottom: 60px
}

.solutions-cse p {
    line-height: 2
}

@media (max-width: 768px) {
    .solutions-cse p {
        text-align:center
    }
}

.cse_requirements {
    background-color: white;
    text-align: center
}

.cse_requirements .cse_requirementtext {
    margin-top: 60px;
    line-height: 2;
    margin-bottom: 40px
}

.cse_requirements svg {
    height: 50px;
    margin-bottom: 20px;
    margin-top: 60px
}

.cse_requirements .row p {
    font-size: 1.2em
}

@media (max-width: 768px) {
    .cse_requirements .row p {
        font-size:1em
    }
}

.cse_superpower {
    background-color: #f9fafb !important
}

.cse_superpower p {
    line-height: 2
}

.cse_job {
    text-align: center
}

.cse_job .cse_job__leverlink {
    margin-top: 40px
}

.cse_job .newsletter-signup {
    position: relative;
    margin-top: 60px
}

.cse_job .newsletter-signup p {
    margin-bottom: 40px
}

.cse_job .newsletter-signup .mc-signupmessage {
    width: 100%;
    height: 100%;
    background-color: white;
    position: absolute;
    color: #62769e;
    z-index: 1;
    display: none;
    pointer-events: none;
    opacity: 0;
    transition: 400ms ease-in-out
}

.cse_job .newsletter-signup .mc-signupmessage svg {
    width: 15px;
    margin-left: 4px;
    vertical-align: middle
}

.cse_job .newsletter-signup.newsletter-signup--success .mc-signupmessage {
    animation: fadeIn 200ms ease-in-out forwards;
    display: block
}

.cse_job .newsletter-signup .form-control {
    width: calc(100% - 126px);
    color: #1F3B5D;
    border: solid 1px #F3F4F7;
    height: 30px;
    max-width: 320px;
    display: inline-block
}

.cse_job .newsletter-signup .btn-default {
    width: 120px;
    height: 30px;
    line-height: 1em;
    font-size: 12px;
    border: none;
    background-color: #8191B1;
    color: white;
    box-shadow: none;
    font-size: .7em
}

.twitter {
    margin-left: 5px
}

#twitter-carousel {
    min-height: auto;
    padding-bottom: 0
}

#customers.customers section.success-stories:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 350px;
    background: white;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -170px;
    z-index: 1;
    box-shadow: rgba(0,0,0,0.1) 0 -16px 24px;
    will-change: transform
}

@media (min-width: 1200px) {
    #customers.customers section.success-stories:after {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

#customers.customers section.success-stories .row.flex-container:before {
    display: none
}

#customers.customers section.success-stories .flex-it-2:nth-child(odd) {
    padding-right: 15px !important
}

#customers.customers section.success-stories .flex-it-2:nth-child(even) {
    padding-left: 15px !important
}

@media (max-width: 768px) {
    #customers.customers section.success-stories .flex-it-2 {
        -ms-flex:0 1 90%;
        flex: 0 1 90%
    }

    #customers.customers section.success-stories .flex-it-2:nth-child(even),#customers.customers section.success-stories .flex-it-2:nth-child(odd) {
        padding: 0 !important
    }
}

@media (max-width: 992px) {
    #customers.customers section.success-stories {
        margin-top:2em
    }
}

@media (max-width: 768px) {
    #customers.customers section.success-stories {
        margin-top:0
    }

    #customers.customers section.success-stories .flex-container {
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

#customers.customers section.testimonials:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 350px;
    background: #f8faff;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -170px;
    z-index: 1;
    will-change: transform
}

@media (min-width: 1200px) {
    #customers.customers section.testimonials:after {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

#customers.customers .card-border .card-container,#customers.customers .card-border-quote .card-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: stretch;
    align-items: stretch
}

#customers.customers .card-border .card-header,#customers.customers .card-border .card-content,#customers.customers .card-border-quote .card-header,#customers.customers .card-border-quote .card-content {
    -ms-flex: 0 1 100%;
    flex: 0 1 100%
}

#customers.customers .card-border .card-header,#customers.customers .card-border-quote .card-header {
    min-height: 64px;
    line-height: 64px
}

@media (max-width: 992px) {
    #customers.customers .flex-it-3 {
        -ms-flex:0 1 50%;
        flex: 0 1 50%
    }

    #customers.customers .flex-it-3:last-child {
        -ms-flex: 0 1 100%;
        flex: 0 1 100%
    }
}

@media (max-width: 768px) {
    #customers.customers .flex-it-3 {
        -ms-flex:0 1 100%;
        flex: 0 1 100%
    }
}

@media (max-width: 1200px) {
    #customers.customers .flex-it-3.p-large {
        padding:6px
    }

    #customers.customers .flex-it-3 .card-header.p-t-small {
        padding-top: 0
    }
}

#customers.customers section.trusted:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 350px;
    background: white;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -100px;
    z-index: 1;
    will-change: transform
}

@media (min-width: 1200px) {
    #customers.customers section.trusted:after {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

#customers.customers section.trusted .logo {
    width: 60%;
    transition: filter 0.4s ease, opacity 0.4s ease
}

#customers.customers section.trusted .brands>div:not(:hover) .logo {
    opacity: 0.6
}

@supports (filter: saturate(0)) {
    #customers.customers section.trusted .brands>div:not(:hover) .logo {
        filter:saturate(0)
    }
}

@media (max-width: 768px) {
    #customers.customers section.trusted .flex-it-4 {
        -ms-flex:0 1 50%;
        flex: 0 1 50%
    }
}

#customers.customers .card-border-media:before {
    content: attr(data-type);
    display: block;
    position: absolute;
    z-index: 10;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    margin: 14px;
    text-transform: uppercase;
    box-shadow: 0 10px 40px 0 rgba(0,0,0,0.07),0 2px 9px 0 rgba(0,0,0,0.06)
}

#customers.customers .card-border-media[data-type$="media"]:before {
    background-image: linear-gradient(269deg, #8e43e6, #b84592)
}

#customers.customers .card-border-media[data-type$="mobile"]:before {
    background-image: linear-gradient(320deg, #2dde98, #25d3b4)
}

#customers.customers .card-border-media[data-type$="agency"]:before {
    background-image: linear-gradient(269deg, #00aeff, #1cc7d0)
}

#customers.customers .card-border-media[data-type$="ecommerce"]:before {
    background-image: linear-gradient(256deg, #ffc168, #ff6c5f)
}

#customers.customers .card-border-media[data-type$="saas"]:before {
    background-image: linear-gradient(256deg, #ff6c5f, #ff4f81)
}

#customers.customers .card-border-media[data-tyê$="non-profit"]:before {
    background-image: linear-gradient(269deg, #00aeff, #1cc7d0)
}

@keyframes bounceIn {
    0%, 50%, 100% {
        transition-timing-function: ease-in
    }

    0% {
        opacity: 0;
        transform: translate(0, 10%)
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

.bounceIn {
    animation-name: bounceIn;
    animation-duration: 300ms
}

.animated {
    animation-duration: 300ms;
    animation-fill-mode: both
}

.press {
    overflow: hidden
}

.press .modal {
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(38,38,38,0.5);
    text-align: center;
    padding: 0 !important
}

.press .modal.in {
    display: -ms-flexbox !important;
    display: flex !important
}

.press .modal .close {
    background: transparent;
    border: none;
    padding-top: 4px !important
}

.press .modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    position: absolute;
    vertical-align: middle;
    margin-right: -4px
}

.press .modal .modal-content,.press .modal .modal-body {
    padding: 0;
    overflow: hidden
}

.press .modal .modal-header {
    border-bottom: 0px
}

.press .modal .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle
}

.press .modal .bio-content {
    padding: 50px;
    border-left: 1px solid #d2dade;
    font-size: 16px;
    line-height: 1.4;
    color: #67818e;
    min-height: 400px
}

.press .modal .bio-content p {
    margin-bottom: 23px
}

.press .modal .close {
    padding-right: 20px;
    padding-top: 16px
}

.press__section {
    color: #839aa5;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600
}

.press__button {
    border-radius: 3px;
    line-height: 1;
    text-transform: uppercase
}

.press__button--default {
    border: 2px solid #d2dade;
    background-color: white;
    font-size: 14px;
    color: #839aa5;
    padding: 10px 40.5px 9px 40.5px;
    transition: color 0.12s ease-in, border-color 0.12s ease-in
}

.press__button--default:hover {
    border-color: #889ea8;
    color: #475962
}

.press__button--primary {
    background-color: #2897c5;
    border: none;
    color: white;
    font-size: 12px;
    letter-spacing: 0.8px;
    padding: 14px 40.5px 13px 40.5px;
    transition: background-color 0.12s ease-in
}

.press__button--primary:hover {
    text-decoration: none;
    color: white;
    background-color: #12465b
}

.press__top {
    list-style: none;
    display: block;
    margin: 0px;
    padding: 0px;
    height: 100px;
    bottom: 0px;
    text-align: center;
    margin-bottom: -2px
}

.press__top__label {
    padding-bottom: 13px;
    transition: color 0.12s linear
}

.press__top__el {
    display: inline-block;
    font-size: 10px;
    min-width: 60px;
    font-weight: 600;
    margin-right: 20px;
    color: white;
    text-transform: uppercase;
    line-height: 1em;
    cursor: pointer
}

.press__top__el a {
    display: block;
    text-decoration: none
}

.press__top__el:last-child {
    margin-right: 0px
}

.press__top__el svg {
    display: block;
    margin: 14px auto
}

.press__top__el:hover:not(.active) .press__top__label {
    color: #fb366e
}

.press__top__el.active {
    border-bottom: 3px solid #fb366e;
    cursor: initial
}

.press__highlights {
    color: #4a4a4c;
    text-align: center;
    overflow: hidden
}

.press__highlights__highlight {
    position: relative;
    height: 190px;
    border-radius: 4px;
    width: 100%;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    line-height: 1.5
}

.press__highlights__highlight img {
    position: absolute;
    border-radius: 4px;
    height: 140%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    margin-top: -40px
}

.press__highlights__highlight__name {
    position: relative;
    text-align: center;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: calc(100% - 2px);
    font-size: 18px;
    color: white;
    font-weight: 600;
    display: inline-block
}

.press__highlights__highlight__name__emoji {
    position: absolute;
    text-align: center;
    top: -30px;
    font-weight: 400;
    margin-bottom: 10px;
    width: 100%
}

.press__highlights__highlight__bg-multiply {
    position: absolute;
    background-color: rgba(40,77,112,0.5);
    text-align: center;
    width: 100%;
    border-radius: 4px;
    mix-blend-mode: multiply;
    height: 100%;
    display: inline-block;
    transition: background-color 0.22s linear
}

.press__highlights__highlight__bg-multiply:hover {
    background-color: rgba(40,77,112,0.8)
}

.press__leadership__leaders {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 45px
}

.press__leader {
    height: 442px;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
    border: solid 1px rgba(155,155,155,0.2);
    margin: 0 auto 30px auto
}

.press__leader__pic {
    width: 150px;
    margin: 40px auto 0 auto
}

.press__leader__pic img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center center
}

.press__leader__icons {
    margin-top: 25px
}

.press__leader__icons a {
    margin-right: 32px;
    text-decoration: none
}

.press__leader__icons a:last-child {
    margin-right: 0
}

.press__leader__icons svg:hover {
    cursor: pointer
}

.press__leader__icons svg:hover path {
    fill: #475962
}

.press__leader__icons svg path {
    transition: fill 0.12s ease-in
}

.press__tweets {
    position: relative;
    width: 100%;
    display: block;
    overflow: visible;
    white-space: nowrap;
    padding: 0;
    transition: opacity 0.3s linear, transform 0.5s ease
}

.press__tweets::-webkit-scrollbar {
    width: 0px !important
}

.press__tweets--loading {
    opacity: 0
}

.press__tweet {
    border-radius: 4px;
    display: inline-block;
    opacity: .5;
    vertical-align: middle;
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    transition: transform 0.5s ease
}

.press__tweet .twitter-tweet:active,.press__tweet iframe {
    pointer-events: none
}

.press__tweet iframe {
    cursor: pointer
}

.press__tweet:last-child {
    margin-right: 0
}

.press__tweet--current {
    opacity: 1;
    -ms-transform: scale(1);
    transform: scale(1);
    position: relative
}

.press__tweet__arrow {
    position: absolute;
    top: calc(50% - 14px);
    cursor: pointer;
    display: block;
    height: 28px;
    width: 48px;
    display: none
}

.press__tweet--current .press__tweet__arrow {
    display: block
}

.press__tweet__arrow svg:hover {
    cursor: pointer
}

.press__tweet__arrow svg:hover path {
    stroke: #575757
}

.press__tweet__arrow svg path {
    transition: stroke 0.12s ease-in
}

.press__tweet__arrow--prev {
    left: -47px;
    -ms-transform: scaleX(-1);
    transform: scaleX(-1)
}

.press__tweet:first-child .press__tweet__arrow--prev {
    display: none
}

.press__tweet__arrow--next {
    right: -47px
}

.press__tweet:last-child .press__tweet__arrow--next {
    display: none
}

.press__name {
    color: #16abe8;
    font-size: 20px;
    margin: 24px 0 10px 0
}

.press__role {
    color: #839aa5;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 40px
}

.press__news {
    padding-top: 40px;
    list-style: none;
    text-align: left
}

.press__news li {
    line-height: 1.4;
    margin-bottom: 40px
}

.press__news li:last-child {
    margin-bottom: 0px
}

.press__news a {
    color: initial;
    text-decoration: none;
    overflow: hidden
}

.press__news a:hover .press__news__title {
    color: #0b5574
}

.press__news__thumb {
    width: 60px;
    height: 60px;
    float: left;
    text-align: center;
    clear: both;
    margin-right: 24px;
    border-radius: 50px;
    padding: 8px;
    position: relative
}

.press__news__thumb img {
    display: inline-block;
    max-width: 100%;
    padding: 10%;
    height: 100%;
    object-fit: contain
}

.press__news__language {
    width: 15px;
    display: inline-block;
    margin-right: 4px
}

.press__news__language svg {
    width: 100%;
    height: auto;
    border-radius: 2px
}

.press__news__meta {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    
    
    font-size: 13px;
    margin-left: 84px
}

.press__news__title {
    margin-left: 84px;
    color: #16abe8;
    font-size: 16px;
    font-weight: 600;
    transition: color 0.12s linear
}

.press__resources__text {
    font-size: 20px;
    line-height: 32px;
    color: #4a4a4c
}

.press__resources__logos {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    padding-top: 40px
}

.press__resources__logos__container {
    display: inline-block;
    vertical-align: middle;
    margin-left: -4px;
    margin-right: 40px;
    margin-bottom: 20px
}

.press__resources__logos__container:last-child {
    margin-right: 0px
}

.press__resources__logos__type {
    float: left;
    margin-top: 10px
}

.press__resources__logos__links {
    text-align: right;
    margin-top: 10px;
    color: #16abe8;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.6
}

.press__resources__logos__links span {
    margin-left: -4px
}

.press__resources__logos__logo {
    width: 300px;
    height: 170px;
    line-height: 170px;
    padding: 0 16px;
    position: relative;
    border-radius: 4px;
    background-color: white;
    border: solid 0.8px rgba(151,151,151,0.5)
}

.press__resources__logos__logo svg {
    width: 80%;
    display: block;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.press__resources__logos__logo.logo--white {
    background: #262626
}

.press__resources__logos__logo--dark {
    background-color: #1e3756
}

.press__resources__logos__logo--dark.press__resources__logos__logo--small {
    background-color: #262626
}

.press__resources__logos__logo--dark.press__resources__logos__logo--small svg path {
    fill: white
}

.press__resources__logos__logo--small {
    width: 140px;
    height: 150px
}

.press__resources__logos__logo--small svg {
    width: 70%
}

.press__resources__logos__logo--medium {
    width: 280px;
    height: 150px
}

.press__resources__logos__logo--inlined span,.press__resources__logos__logo--inlined svg {
    display: inline-block;
    vertical-align: middle
}

.press__resources__logos__logo--inlined span {
    text-transform: none;
    font-weight: normal;
    font-size: 15px
}

.press__resources__logos__logo--inlined svg {
    padding-top: 4px;
    width: auto;
    max-width: 65%
}

@media (max-width: 1000px) {
    .press__highlights__highlight img {
        width:100%;
        max-width: inherit
    }
}

@media (max-width: 480px) {
    #tweets,.press__tweets {
        display:none
    }

    .modal .modal-content {
        width: 100% !important
    }

    .press__resources__logos__container {
        margin-right: 0px
    }

    .press__resources__text {
        font-size: 14px;
        padding: 0 20px
    }
}

.cc-sitepoint .hero-cc {
    min-height: 500px;
    padding-bottom: 2em
}

.cc-sitepoint .hero-cc h1 {
    margin-top: 1em
}

.cc-sitepoint .hero-animation-container img {
    margin-top: 2em
}

.cc-saastr .hero {
    padding-top: 0
}

.cc-saastr .hero h1 {
    margin: 50px 0 30px 0
}

.cc-saastr .hero-cc {
    background-color: #2d8d84;
    background-image: none;
    margin-top: 63px;
    padding: 1em 0 0 0;
    margin-bottom: 3px;
    border: none;
    font-weight: bold
}

.cc-saastr .hero-cc img {
    width: 100%
}

.cc-saastr .hero-cc h1 {
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0;
    font-weight: bold
}

.cc-saastr .hero-cc p {
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    margin-bottom: 25px
}

.cc-saastr .hero-cc .cta-container {
    width: 100%
}

.cc-saastr .hero-cc .cta-container .btn-hero {
    font-size: 14px;
    background-color: #54c3b9;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10'> <path fill='%23FFF' fill-rule='evenodd' d='M6.73-.00029l-1.446 1.446 2.473 2.473H0v2.044h7.757l-2.473 2.474 1.446 1.445 4.941-4.941'/></svg>");
    background-repeat: no-repeat;
    background-position: center right 1em;
    background-size: 22px;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 0.75em 1.4em;
    padding-right: 4em
}

.cc-saastr .hero-cc .cta-container .btn-hero:hover {
    background-color: #f8a153;
    color: white
}

.cc-producthunt .hero {
    padding-top: 0
}

.cc-producthunt .hero h1 {
    margin: 50px 0 30px 0
}

.cc-producthunt .hero-cc {
    background-color: #DA552F;
    background-image: none;
    margin-top: 63px;
    padding: 10px 0 30px 0;
    margin-bottom: 3px;
    border: none
}

.cc-producthunt .hero-cc h1 {
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-producthunt .hero-cc p {
    color: black;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-producthunt .hero-cc .cta-container {
    width: 100%
}

.cc-producthunt .hero-cc .cta-container .btn-hero {
    background-color: #3e396b;
    border: none;
    font-weight: 400
}

.cc-producthunt .hero-cc .cta-container .btn-hero:hover {
    background-color: #00aeff
}

.cc-startupspaddle .hero {
    padding-top: 0
}

.cc-startupspaddle .hero h1 {
    margin: 50px 0 30px 0
}

.cc-startupspaddle .hero-cc {
    background-color: white;
    background-image: none;
    margin-top: 63px;
    padding: 10px 0 30px 0;
    margin-bottom: 3px;
    border: none
}

.cc-startupspaddle .hero-cc h1 {
    color: #3e396b;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-startupspaddle .hero-cc p {
    color: #3e396b;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-startupspaddle .hero-cc .icons-findercta-container {
    width: 100%
}

.cc-startupspaddle .hero-cc .icons-findercta-container .btn-hero {
    background-color: #3e396b;
    border: none;
    font-weight: 400
}

.cc-startupspaddle .hero-cc .icons-findercta-container .btn-hero:hover {
    background-color: #00aeff
}

.cc-laracasts .hero {
    padding-top: 0
}

.cc-laracasts .hero h1 {
    margin: 50px 0 30px 0
}

.cc-laracasts .hero-cc {
    background-color: white;
    background-image: none;
    margin-top: 63px;
    padding: 10px 0 30px 0;
    margin-bottom: 3px;
    border: none
}

.cc-laracasts .hero-cc h1 {
    color: #3e396b;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-laracasts .hero-cc p {
    color: #3e396b;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-laracasts .hero-cc .cta-container {
    width: 100%
}

.cc-laracasts .hero-cc .cta-container .btn-hero {
    background-color: #FF5030;
    border: none;
    font-weight: 400
}

.cc-laracasts .hero-cc .cta-container .btn-hero:hover {
    background-color: #00aeff
}

.cc-laracon_online .hero {
    padding-top: 0
}

.cc-laracon_online .hero h1 {
    margin: 50px 0 30px 0
}

.cc-laracon_online .hero-cc {
    background-color: #71cdff;
    background-image: none;
    margin-top: 60px;
    padding: 10px 0 30px 0;
    border: none
}

.cc-laracon_online .hero-cc h1 {
    color: white;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0;
    font-weight: bold
}

.cc-laracon_online .hero-cc p {
    color: white;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-laracon_online .hero-cc .cta-container {
    width: 100%
}

.cc-laracon_online .hero-cc .cta-container .btn-hero {
    background-color: #e75353;
    color: white;
    border: none;
    font-weight: 400
}

.cc-laracon_online .hero-cc .cta-container .btn-hero:hover {
    background-color: #ff5656
}

.cc-stamplay .hero {
    padding-top: 0
}

.cc-stamplay .hero h1 {
    margin: 50px 0 30px 0
}

.cc-stamplay .hero-cc {
    background-color: white;
    background-image: none;
    margin-top: 63px;
    padding: 10px 0 30px 0;
    margin-bottom: 3px;
    border: none
}

.cc-stamplay .hero-cc h1 {
    color: #3e396b;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-stamplay .hero-cc p {
    color: #3e396b;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-stamplay .hero-cc .cta-container {
    width: 100%
}

.cc-stamplay .hero-cc .cta-container .btn-hero {
    background-color: #3e396b;
    border: none;
    font-weight: 400
}

.cc-stamplay .hero-cc .cta-container .btn-hero:hover {
    background-color: #00aeff
}

.cc-laramap .hero {
    padding-top: 0
}

.cc-laramap .hero h1 {
    margin: 50px 0 30px 0
}

.cc-laramap .hero-cc {
    background-color: white;
    background-image: none;
    margin-top: 63px;
    padding: 10px 0 30px 0;
    margin-bottom: 3px;
    border: none
}

.cc-laramap .hero-cc h1 {
    color: #3e396b;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-laramap .hero-cc p {
    color: #3e396b;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-laramap .hero-cc .cta-container {
    width: 100%
}

.cc-laramap .hero-cc .cta-container .btn-hero {
    background-color: #010102;
    border: none;
    font-weight: 400
}

.cc-laramap .hero-cc .cta-container .btn-hero:hover {
    background-color: #FF5030
}

.cc-instantsearch .hero {
    padding-top: 0
}

.cc-instantsearch .hero h1 {
    margin: 50px 0 30px 0
}

.cc-instantsearch .hero-cc {
    background-color: #008bcc;
    background-image: none;
    margin-top: 60px;
    padding: 10px 0 30px 0;
    border-bottom: 1px solid rgba(0,174,255,0.6);
    background-image: url("/assets/flat2/coupon/bg-coupon-instantsearch.jpg");
    background-size: cover
}

.cc-instantsearch .hero-cc h1 {
    color: white;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-instantsearch .hero-cc p {
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    margin-bottom: 25px
}

.cc-instantsearch .hero-cc .cta-container {
    width: 100%
}

.cc-instantsearch .hero-cc .cta-container .btn-hero {
    background: transparent;
    background-color: rgba(0,174,255,0.1);
    border: solid 1px rgba(0,174,255,0.5);
    font-weight: 400;
    font-size: .9em
}

.cc-instantsearch .hero-cc .cta-container .btn-hero:hover {
    background-color: rgba(0,174,255,0.3)
}

.cc-bulgariawebsummit .hero {
    padding-top: 0
}

.cc-bulgariawebsummit .hero h1 {
    margin: 50px 0 30px 0
}

.cc-bulgariawebsummit .hero img {
    width: 150px;
    margin-top: 20
}

.cc-bulgariawebsummit .hero-cc {
    background-color: #172A4D;
    background-image: none;
    margin-top: 60px;
    padding: 10px 0 30px 0;
    border-bottom: 1px solid rgba(0,174,255,0.6)
}

.cc-bulgariawebsummit .hero-cc h1 {
    color: white;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-bulgariawebsummit .hero-cc p {
    color: #7bb569;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-bulgariawebsummit .hero-cc .cta-container {
    width: 100%
}

.cc-bulgariawebsummit .hero-cc .cta-container .btn-hero {
    background: transparent;
    background-color: rgba(0,174,255,0.1);
    border: solid 1px rgba(0,174,255,0.5);
    font-weight: 400;
    font-size: .9em
}

.cc-bulgariawebsummit .hero-cc .cta-container .btn-hero:hover {
    background-color: rgba(0,174,255,0.3)
}

.cc-firebase .hero {
    padding-top: 0
}

.cc-firebase .hero h1 {
    margin: 50px 0 30px 0
}

.cc-firebase .hero img {
    margin-top: 64px
}

.cc-firebase .hero-cc {
    background-color: white;
    background-image: none;
    margin-top: 63px;
    padding: 10px 0 30px 0;
    margin-bottom: 3px;
    border: none
}

.cc-firebase .hero-cc h1 {
    color: #3e396b;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-firebase .hero-cc p {
    color: #3e396b;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-firebase .hero-cc .cta-container {
    width: 100%
}

.cc-firebase .hero-cc .cta-container .btn-hero {
    background-color: #FDCC1B;
    border: none;
    font-weight: 400;
    color: #5A5442
}

.cc-firebase .hero-cc .cta-container .btn-hero:hover {
    background-color: #00aeff;
    color: white
}

.cc-sedaily .hero {
    padding-top: 0
}

.cc-sedaily .hero h1 {
    margin: 50px 0 30px 0
}

.cc-sedaily .hero-cc {
    background-color: white;
    background-image: none;
    margin-top: 63px;
    padding: 10px 0 30px 0;
    margin-bottom: 3px;
    border: none
}

.cc-sedaily .hero-cc h1 {
    color: #3e396b;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-sedaily .hero-cc p {
    color: #3e396b;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-sedaily .hero-cc .cta-container {
    width: 100%
}

.cc-sedaily .hero-cc .cta-container .btn-hero {
    background-color: #010102;
    border: none;
    font-weight: 400
}

.cc-sedaily .hero-cc .cta-container .btn-hero:hover {
    background-color: #ff6f5a
}

.cc-wolvesummit .hero,.cc-wolvessummit .hero {
    padding-top: 0
}

.cc-wolvesummit .hero h1,.cc-wolvessummit .hero h1 {
    margin: 50px 0 30px 0
}

.cc-wolvesummit .hero-cc,.cc-wolvessummit .hero-cc {
    background-color: #09051f;
    background-image: none;
    margin-top: 63px;
    padding: 10px 0 30px 0;
    margin-bottom: 3px;
    border: none
}

.cc-wolvesummit .hero-cc h1,.cc-wolvessummit .hero-cc h1 {
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-wolvesummit .hero-cc p,.cc-wolvessummit .hero-cc p {
    color: white;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-wolvesummit .hero-cc .cta-container,.cc-wolvessummit .hero-cc .cta-container {
    width: 100%
}

.cc-symfony .hero {
    padding-top: 0
}

.cc-symfony .hero h1 {
    margin: 50px 0 30px 0
}

.cc-symfony .hero-cc {
    background-color: #f0f0f0;
    background-image: none;
    margin-top: 63px;
    padding: 10px 0 30px 0;
    margin-bottom: 3px;
    border: none
}

.cc-symfony .hero-cc h1 {
    color: black;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-symfony .hero-cc p {
    color: black;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-symfony .hero-cc .cta-container {
    width: 100%
}

.cc-symfony .hero-cc .cta-container .btn-hero {
    background-color: #80BF27;
    border: none;
    font-weight: 400
}

.cc-symfony .hero-cc .cta-container .btn-hero:hover {
    background-color: rgba(128,191,39,0.9)
}

.cc-docsearch .hero {
    padding-top: 0
}

.cc-docsearch .hero h1 {
    margin: 60px 0 30px 0
}

.cc-docsearch .hero-cc {
    background: #3e396b;
    background-size: cover;
    margin-top: 60px;
    padding: 50px 0 80px 0;
    border: none
}

.cc-docsearch .hero-cc h1 {
    color: white;
    line-height: 1.3em;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-docsearch .hero-cc p {
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    margin-bottom: 25px
}

.cc-docsearch .hero-cc .col-sm-offset-1.text-right {
    text-align: center !important
}

.cc-docsearch .hero-cc .cta-container {
    width: 100%
}

.cc-docsearch .hero-cc .cta-container .btn-hero {
    background-color: white;
    color: #00aeff;
    border: none;
    font-weight: 400
}

.cc-docsearch .hero-cc .cta-container .btn-hero:hover {
    color: #3e396b
}

.cc-places .hero {
    padding-top: 0
}

.cc-places .hero h1 {
    margin: 60px 0 30px 0
}

.cc-places .hero-cc {
    background: #3e396b;
    margin-top: 60px;
    padding: 50px 0 80px 0;
    border: none
}

.cc-places .hero-cc h1 {
    color: white;
    line-height: 1.3em;
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-places .hero-cc p {
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    margin-bottom: 25px
}

.cc-places .hero-cc .cta-container {
    width: 100%
}

.cc-places .hero-cc .cta-container .btn-hero {
    background-color: white;
    color: #00aeff;
    border: none;
    font-weight: 400
}

.cc-places .hero-cc .cta-container .btn-hero:hover {
    color: #3e396b
}

.cc-serverless .hero {
    padding-top: 0
}

.cc-serverless .hero h1 {
    margin: 50px 0 30px 0
}

.cc-serverless img {
    margin-top: 66px
}

.cc-serverless .hero-cc {
    background-color: #090909;
    background-image: none;
    margin-top: 63px;
    padding: 10px 0 30px 0;
    margin-bottom: 3px;
    border: none
}

.cc-serverless .hero-cc h1 {
    font-size: 32px;
    text-align: center;
    margin: 40px 0 20px 0
}

.cc-serverless .hero-cc p {
    color: white;
    font-size: 16px;
    margin-bottom: 25px
}

.cc-serverless .hero-cc .cta-container {
    width: 100%
}

.cc-serverless .hero-cc .cta-container .btn-hero {
    background-color: #95f4c4;
    color: #090909;
    border: none;
    font-weight: 400
}

.cc-serverless .hero-cc .cta-container .btn-hero:hover {
    background-color: rgba(149,244,196,0.9)
}

.table-striped.table-sla td:first-child {
    min-width: 200px
}

.table-striped.table-sla td:first-child {
    font-weight: bold
}

.switcher {
    cursor: pointer;
    display: inline-block;
    color: white;
    line-height: 24px
}

.switcher input {
    display: none
}

.switcher label {
    width: 48px;
    height: 24px;
    background: #2b97c5;
    display: inline-block;
    border-radius: 12px;
    cursor: pointer;
    margin: 0 12px;
    font-weight: 400
}

.switcher label:after {
    width: 16px;
    height: 16px;
    display: block;
    content: '';
    background: white;
    border-radius: 14px;
    position: relative;
    top: 4px;
    left: 4px;
    transition: left 0.15s ease
}

.switcher input:checked ~ label[for="switch-plan"]:after {
    left: 28px
}

.switcher .label-1,.switcher .label-2 {
    position: absolute
}

.switcher .label-1 {
    float: left;
    left: -55px
}

.switcher .label-2 {
    float: right;
    right: -40px
}

.switcher label[for="switch-plan"]:not(.checked) .label-2 {
    opacity: 0.5
}

.switcher label[for="switch-plan"].checked:after {
    left: 28px
}

.switcher label[for="switch-plan"].checked .label-1 {
    opacity: 0.5
}

.switcher label[for="switch-plan"].checked .label-2 {
    opacity: 1
}

.light-switcher {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 8px 16px;
    padding-left: 32px;
    border: 1px solid #8994c6;
    font-size: 16px;
    color: #7f8b9d;
    line-height: 24px;
    display: inline-block;
    min-width: 236px
}

.light-switcher--light {
    border-radius: 0;
    border: none;
    border-bottom: solid 2px #2dde98;
    color: white
}

.light-switcher.location-switch {
    background: url("https://www.algolia.com/static_assets/images/pricing/icon-pin-dd0c734f.svg") no-repeat center left 8px,url("https://www.algolia.com/static_assets/images/pricing/icon-up-down-0350c020.svg") no-repeat center right 8px;
    background-size: 19px, 8px
}

#enterprise .hero {
    background: #050f2c
}

#enterprise .showcase-1 {
    position: relative;
    overflow: hidden
}

#enterprise .showcase-1:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 160px;
    background: #3e396b;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    bottom: -80px;
    left: 0
}

@media (min-width: 1200px) {
    #enterprise .showcase-1:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

#enterprise .showcase-2 {
    background: #3e396b;
    position: relative
}

#enterprise .showcase-3 {
    background: #050f2c
}

#enterprise .customers {
    text-align: center;
    border-bottom: solid 1px #9d9dbd;
    padding: 30px 0 10px
}

#enterprise .customers i {
    display: inline-block;
    margin: 0 16px 20px;
    font-size: 1.7em
}

#enterprise .scalability .map-scalability {
    margin: auto;
    width: 100%
}

#enterprise .scalability .map-scalability svg {
    width: 100%
}

#enterprise .support {
    background: #050f2c
}

#enterprise .support .support-team {
    max-width: 460px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: left;
    justify-content: left;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#enterprise .support .support-team img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 8px
}

#enterprise .premium .card {
    padding: 16px;
    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07),0 2px 9px 0 rgba(62,57,107,0.06);
    border-radius: 3px;
    min-height: 160px;
    margin-bottom: 32px
}

#enterprise .enterprise-plan {
    position: relative;
    padding-bottom: 120px
}

#enterprise .enterprise-plan .column section {
    margin-top: 16px;
    padding: 25px 46px !important
}

#enterprise .enterprise-plan .item-icon img {
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media (max-width: 768px) {
    #enterprise .enterprise-plan .column:last-of-type:not(.col-md-10) .feature-list {
        padding:0 !important;
        margin-top: 0;
        margin-bottom: 2em
    }

    #enterprise .enterprise-plan .column:last-of-type:not(.col-md-10) .feature-list .feature-list-item {
        margin-top: 1em;
        margin-bottom: 1em
    }
}

#pricing .pricingtable {
    padding: 32px 15px 48px 15px;
    position: relative;
    z-index: 10
}

#pricing .pricingtable:before {
    position: absolute;
    width: 100%;
    height: 70%;
    background-image: linear-gradient(to top, #EEF3FF, #FFF);
    content: "";
    left: 0;
    top: -80px
}

#pricing .pricingtable:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 160px;
    background: white;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: 70%;
    margin-top: -160px;
    left: 0;
    z-index: 0
}

@media (min-width: 1200px) {
    #pricing .pricingtable:after {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

#pricing .counter {
    border-radius: 30px;
    padding: 6px;
    line-height: 20px;
    white-space: normal;
    min-width: 90px
}

#pricing .counter span {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#pricing .counter button {
    background-color: #3e396b;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: none;
    transition: transform 60ms ease, background-color 600ms ease
}

#pricing .counter button:disabled {
    background-color: #8994c6;
    pointer-events: none
}

#pricing .counter button:focus {
    outline: none
}

#pricing .counter button.decrement:active {
    -ms-transform: scale(0.9);
    transform: scale(0.9)
}

#pricing .counter button.decrement:before {
    width: 10px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #FFF;
    content: ""
}

#pricing .counter button.increment:active {
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

#pricing .counter button.increment:before,#pricing .counter button.increment:after {
    width: 10px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #FFF;
    content: ""
}

#pricing .counter button.increment:after {
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -ms-transform: rotate(90deg) translate(-50%, -50%);
    transform: rotate(90deg) translate(-50%, -50%)
}

#pricing .alg-tooltip {
    position: relative
}

#pricing .alg-tooltip.p-r-large:hover .alg-tooltip__message {
    transform: translate3d(-4px, -50%, 0)
}

#pricing .alg-tooltip:hover .alg-tooltip__message {
    transition: 800ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate3d(0px, -50%, 0);
    pointer-events: auto;
    opacity: 1
}

#pricing .alg-tooltip .alg-tooltip__indicator {
    border-radius: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #00aeff;
    background-color: rgba(0,174,255,0.2);
    cursor: pointer;
    margin-left: 6px
}

#pricing .alg-tooltip .alg-tooltip__message {
    position: absolute;
    left: 38px;
    top: 50%;
    transform: translate3d(12px, -50%, 0);
    background-color: #3e396b;
    padding: 1.64286em;
    color: rgba(255,255,255,0.8);
    border-radius: 4px;
    min-width: 240px;
    max-width: 300px;
    opacity: 0;
    pointer-events: none;
    transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.5);
    line-height: 2;
    z-index: 20;
    word-wrap: break-word
}

#pricing .alg-tooltip .alg-tooltip__message:before {
    z-index: -1;
    content: "";
    left: -7px;
    top: 50%;
    -ms-transform: translate(0, -10px) rotate(45deg);
    transform: translate(0, -10px) rotate(45deg);
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #3e396b;
    border-radius: 4px
}

#pricing .feature-container {
    max-width: 1180px;
    margin: 0 auto
}

@media (max-width: 768px) {
    #pricing .feature-container .row,#pricing .feature-container .col-sm-10 {
        text-align:center
    }
}

#pricing .feature-container a:hover {
    text-decoration: none
}

#pricing .plan-list .block {
    white-space: nowrap
}

#pricing .plan-list .alg-tooltip:hover .alg-tooltip__message {
    transform: translate3d(-31%, 6px, 0)
}

#pricing .plan-list .alg-tooltip__indicator {
    background-color: rgba(137,148,198,0.3);
    width: 12px;
    height: 12px;
    font-size: 10px;
    color: #EEF4FF;
    line-height: 12px;
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
    text-align: center;
    font-weight: bold
}

#pricing .plan-list .col-xs-6.p-r-mini .alg-tooltip:hover .alg-tooltip__message {
    transform: translate3d(-93%, 6px, 0)
}

#pricing .plan-list .col-xs-6.p-r-mini .alg-tooltip__message {
    transform: translate3d(-93%, 18px, 0)
}

#pricing .plan-list .col-xs-6.p-r-mini .alg-tooltip__message:before {
    left: 67%
}

#pricing .plan-list .alg-tooltip__message {
    left: 50%;
    white-space: normal;
    transform: translate3d(-31%, 18px, 0)
}

#pricing .plan-list .alg-tooltip__message:before {
    top: 4px;
    left: 11%
}

#pricing .plan-list ul {
    list-style-type: none;
    min-height: 320px
}

#pricing .plan-list a:hover {
    text-decoration: none
}

#pricing .plan-list li {
    line-height: 37px;
    min-height: 37px;
    font-size: 13px
}

#pricing .plan-list li.white:before {
    position: absolute;
    width: 140%;
    height: 100%;
    content: "";
    left: -20%;
    top: 0;
    background-color: rgba(255,255,255,0.6);
    z-index: -1
}

#pricing .plan-list li.large {
    min-height: 74px
}

#pricing .plan-list li.double-line {
    line-height: 20px
}

#pricing .plan-list li.double-mid {
    line-height: 20px;
    min-height: 74px;
    padding-top: 8px
}

#pricing .plan-list:before {
    position: absolute;
    left: 0;
    bottom: -5.5%;
    height: 100%;
    max-height: 458px;
    width: 120%;
    -ms-transform: skewY(-4deg);
    transform: skewY(-4deg);
    background-image: linear-gradient(180deg, #EEF3FF, #FFF);
    content: ""
}

#pricing .plan-container {
    max-width: 1180px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    z-index: 5;
    position: relative
}

#pricing .plan-wrapper {
    width: 24%;
    -ms-flex-item-align: end;
    align-self: flex-end;
    box-shadow: 0 5px 15px rgba(112,128,175,0.7);
    perspective: 1000
}

@media (max-width: 1040px) {
    #pricing .plan-wrapper {
        width:49%;
        -ms-flex-item-align: auto;
        -ms-grid-row-align: auto;
        align-self: auto;
        margin-bottom: 2%
    }
}

@media (max-width: 580px) {
    #pricing .plan-wrapper {
        width:100%;
        margin-bottom: 15px
    }
}

#pricing .plan-wrapper:before {
    filter: blur(8px);
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    width: 100%;
    height: 60px;
    content: "";
    position: absolute;
    opacity: .25;
    left: 0;
    bottom: 0;
    transform: translate(0, 104%) rotateX(-45deg);
    -ms-transform-origin: center top;
    transform-origin: center top;
    background-image: linear-gradient(to bottom, #3E396B, rgba(62,57,107,0))
}

#pricing .plan-wrapper .plan {
    overflow: hidden
}

#pricing .plan-wrapper .plan .color-white,#pricing .plan-wrapper .plan:not(.community) .starting.block,#pricing .plan-wrapper .plan .amount {
    text-shadow: 0px 1px 2px rgba(62,57,107,0.4)
}

#pricing .plan-wrapper .plan a:hover {
    text-decoration: none
}

@media (max-width: 1040px) {
    #pricing .plan-wrapper .plan {
        height:100%
    }

    #pricing .plan-wrapper .plan>.spacer24:first-child {
        height: 50px
    }
}

#pricing .plan-wrapper .starting {
    line-height: 1
}

#pricing .plan-wrapper .starting ~ .amount {
    line-height: 1.3
}

#pricing .plan-wrapper .starting-after {
    pointer-events: none;
    opacity: 0;
    left: 50%;
    top: 0;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    line-height: 1
}

#pricing .plan-wrapper .amount .inline {
    -ms-transform: translate(0, -10px);
    transform: translate(0, -10px)
}

#pricing .plan-wrapper .plan-ribbon {
    height: 26px
}

#pricing .plan-wrapper .plan-ribbon i {
    font-size: 12px
}

#pricing .plan-wrapper .plan-ribbon:before {
    width: 102%;
    height: 56px;
    position: absolute;
    left: -1%;
    top: -14px;
    content: "";
    -ms-transform: skewY(-4deg);
    transform: skewY(-4deg);
    background-image: linear-gradient(90deg, rgba(255,255,255,0.1) -10%, rgba(255,255,255,0.4) 100%)
}

@media (max-width: 1130px) {
    #pricing .plan-wrapper .plan-description {
        min-height:72px
    }
}

@media (max-width: 1040px) {
    #pricing .plan-wrapper .plan-description {
        max-width:320px;
        margin: 0 auto
    }
}

#pricing .plan-wrapper .plan-price {
    height: 121px
}

#pricing .plan-wrapper .btn-plan-cta {
    font-size: 15px;
    width: 80%
}

#pricing .plan-wrapper .btn-plan-cta:hover {
    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07),0 2px 9px 0 rgba(62,57,107,0.06)
}

#pricing .plan-wrapper:first-child .btn-plan-cta {
    background-color: #FFF
}

#pricing .plan-wrapper:nth-child(2) {
    background-image: linear-gradient(45deg, #00AEFF 50%, #3369E6 100%)
}

#pricing .plan-wrapper:nth-child(2) .btn-plan-cta {
    background-image: linear-gradient(-90deg, #00AEFF 0%, #3369E6 100%)
}

#pricing .plan-wrapper:nth-child(3) {
    background-image: linear-gradient(45deg, #FF4F81 50%, #FE6C5F 100%)
}

#pricing .plan-wrapper:nth-child(3) .btn-plan-cta {
    background-image: linear-gradient(-90deg, #FF4F81 50%, #FE6C5F 100%)
}

#pricing .plan-wrapper:nth-child(4) {
    background-image: linear-gradient(45deg, #3E396B 50%, #201C38 100%)
}

#pricing .plan-wrapper:nth-child(4) .btn-plan-cta {
    background-image: linear-gradient(-90deg, #3E396B 50%, #201C38 100%)
}

#pricing .switcher {
    line-height: 0
}

#pricing .switcher label {
    background-color: #3e396b
}

#pricing .switcher label:after {
    transition: all 100ms ease-in-out
}

#pricing .switcher input:checked ~ label:after {
    -ms-transform: translate(24px, 0);
    transform: translate(24px, 0)
}

#pricing .pricing-calculator {
    padding-top: 0
}

@media (max-width: 768px) {
    #pricing .pricing-calculator {
        display:none
    }
}

#pricing .pricing-calculator .calculator-pricedetails {
    margin-top: 6px;
    height: 0;
    overflow: hidden;
    will-change: height;
    transition: 500ms cubic-bezier(0.19, 1, 0.22, 1)
}

#pricing .pricing-calculator .calculator-pricedetails p {
    opacity: 0;
    transition: 60ms ease-out
}

#pricing .pricing-calculator .tranche-details i {
    -ms-transform: translate(0, 2px);
    transform: translate(0, 2px)
}

#pricing .pricing-calculator .calculator-column.show-tranche-details .calculator-pricedetails {
    height: 82px
}

#pricing .pricing-calculator .calculator-column.show-tranche-details .calculator-pricedetails p {
    opacity: 1;
    transition: 200ms 60ms ease-out
}

#pricing .pricing-calculator .calculator-column.show-tranche-details .calculator-pricedetails p:nth-child(2) {
    transition: 200ms 90ms ease-out
}

#pricing .pricing-calculator .calculator-column.show-tranche-details .tranche-details i {
    -ms-transform: translate(0, 2px) rotate(180deg);
    transform: translate(0, 2px) rotate(180deg)
}

#pricing .pricing-calculator .col-sm-6:last-child .calculator-column .alg-tooltip:hover .alg-tooltip__message {
    transform: translate3d(-84%, 5px, 0)
}

#pricing .pricing-calculator .col-sm-6:last-child .calculator-column .alg-tooltip__message {
    transform: translate3d(-84%, 19px, 0)
}

#pricing .pricing-calculator .calculator-column {
    max-width: 350px;
    margin: 0 auto
}

#pricing .pricing-calculator .calculator-column .contact-sales {
    margin-top: 2px
}

#pricing .pricing-calculator .calculator-column .contact-sales a {
    border-bottom: 1px solid #00aeff
}

#pricing .pricing-calculator .calculator-column .contact-sales a:hover {
    text-decoration: none
}

#pricing .pricing-calculator .calculator-column .alg-tooltip__message {
    max-width: 350px;
    width: 350px;
    transform: translate3d(-76%, 39px, 0)
}

#pricing .pricing-calculator .calculator-column .alg-tooltip__message:before {
    left: 50%;
    top: 4px
}

#pricing .pricing-calculator .calculator-column .alg-tooltip:hover .alg-tooltip__message {
    transform: translate3d(-76%, 25px, 0)
}

#pricing .pricing-calculator .calculator-column .price-lowvolume {
    display: block
}

#pricing .pricing-calculator .calculator-column .price-volume,#pricing .pricing-calculator .calculator-column .price-lowvolume {
    transition: 200ms ease
}

#pricing .pricing-calculator .calculator-column p.text-center.text-sm {
    max-height: 19px
}

#pricing .pricing-calculator .calculator-column .switcher {
    -ms-transform: translate(0, 4px);
    transform: translate(0, 4px)
}

#pricing .pricing-calculator .calculator-column .switcher label {
    transition: 400ms ease;
    height: 16px;
    width: 32px
}

#pricing .pricing-calculator .calculator-column .switcher label:after {
    width: 12px;
    height: 12px;
    top: 2px;
    left: 2px
}

#pricing .pricing-calculator .calculator-column .switcher input:checked:not(:disabled) ~ label {
    background-color: #3e396b
}

#pricing .pricing-calculator .calculator-column .switcher input:checked:not(:disabled) ~ label:after {
    -ms-transform: translate(16px, 0);
    transform: translate(16px, 0)
}

#pricing .pricing-calculator .calculator-column .switcher input:checked:disabled ~ label {
    cursor: not-allowed;
    background-color: rgba(137,148,198,0.6)
}

#pricing .pricing-calculator .calculator-column .switcher input:checked:disabled ~ label:after {
    -ms-transform: translate(16px, 0);
    transform: translate(16px, 0)
}

#pricing .pricing-calculator .calculator-column .switcher input:disabled ~ label {
    cursor: not-allowed;
    background-color: rgba(137,148,198,0.6)
}

#pricing .pricing-calculator .alg-tooltip__indicator {
    background-color: rgba(137,148,198,0.3);
    width: 12px;
    height: 12px;
    font-size: 10px;
    color: #EEF4FF;
    line-height: 12px;
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
    text-align: center;
    font-weight: bold
}

#pricing .pricing-calculator .alg-tooltip__message {
    white-space: normal
}

#pricing .pricing-calculator .sliding-container {
    max-width: 870px;
    margin: 0 auto
}

#pricing .pricing-calculator .sliding-container.adjust-container {
    -ms-transform: translate(0, 6px);
    transform: translate(0, 6px)
}

#pricing .pricing-calculator .sliding-container.adjust-container .alg-tooltip__message {
    max-width: 505px;
    right: 0;
    left: auto;
    width: 505px;
    transform: translate3d(0, 39px, 0)
}

#pricing .pricing-calculator .sliding-container.adjust-container .alg-tooltip__message:before {
    left: 50%;
    top: 4px
}

#pricing .pricing-calculator .sliding-container.adjust-container .alg-tooltip:hover .alg-tooltip__message {
    transform: translate3d(0, 25px, 0)
}

#pricing .pricing-calculator .calculator-container {
    max-width: 1160px;
    overflow: hidden
}

#pricing .pricing-calculator .calculator-upper {
    padding: 30px 80px;
    position: relative;
    border-top: 4px solid #00aeff
}

#pricing .pricing-calculator .calculator-upper .color-white {
    text-shadow: 0px 1px 2px rgba(62,57,107,0.4)
}

#pricing .pricing-calculator .price {
    line-height: 40px;
    border-bottom: 1px solid #eef0f7
}

#pricing .pricing-calculator .price-main super {
    display: inline-block;
    -ms-transform: translate(0, -14px);
    transform: translate(0, -14px)
}

#pricing .pricing-calculator .price-main span {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: 'tnum';
    -moz-font-feature-settings: 'tnum'
}

#pricing .pricing-calculator .pricing-slider {
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-left: 48px
}

#pricing .pricing-calculator .pricing-slider>.pos-rel {
    -ms-transform: translate(0, 12px);
    transform: translate(0, 12px)
}

#pricing .pricing-calculator .slider-range {
    width: 100%;
    height: 8px;
    border-radius: 8px
}

#pricing .pricing-calculator .slider-background {
    width: 100%;
    height: 8px;
    border-radius: 8px;
    width: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: 400ms ease
}

#pricing .pricing-calculator .slider-background.records {
    background-image: linear-gradient(-45deg, #00AEFF, #3369E7)
}

#pricing .pricing-calculator .slider-background.operations {
    background-image: linear-gradient(to left, #8994c6 0%, #8994c6 100%)
}

#pricing .pricing-calculator .lock-illus {
    width: 32px;
    height: 104px;
    margin-top: 4px;
    left: -14px;
    top: 50%;
    border-top: 1px solid #8994c6;
    border-left: 1px solid #8994c6;
    border-bottom: 1px solid #8994c6;
    -ms-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%)
}

#pricing .pricing-calculator .lock-illus svg {
    -ms-transform: translate(0, 3px);
    transform: translate(0, 3px)
}

#pricing .pricing-calculator .lock-illus .lock-layer {
    left: 0;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 4px 0 6px 0
}

#pricing .pricing-calculator .knob {
    cursor: ew-resize;
    width: 24px;
    height: 24px;
    border: 4px solid white;
    border-radius: 24px;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-transform: translate(-12px, -50%);
    transform: translate(-12px, -50%);
    transition: 400ms ease;
    background-image: linear-gradient(to bottom, #E3E9FF, #FFF)
}

#pricing .pricing-calculator .input-container {
    width: 160px
}

#pricing .pricing-calculator .input-container label {
    font-weight: 400
}

#pricing .pricing-calculator .slider-input {
    border: 1px solid #8994C6;
    padding: 6px 16px
}

#pricing .pricing-calculator .slider-input:disabled {
    pointer-event: none;
    background-color: #F1F4FD;
    color: #8994c6
}

#pricing .pricing-calculator .slider-label,#pricing .pricing-calculator .slider-amount {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#pricing .pricing-calculator .calculator-estimate {
    line-height: 66px
}

#pricing .calculator-presets {
    max-width: 1160px
}

#pricing .calculator-presets .row {
    margin: 0 -30px
}

#pricing .calculator-presets .preset {
    color: #8994c6;
    border: none;
    overflow: hidden;
    will-change: transform
}

#pricing .calculator-presets .preset:after {
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    content: "";
    position: absolute;
    opacity: 0
}

#pricing .calculator-presets .preset.ecommerce-preset:after {
    background-image: linear-gradient(to left, #ff6c5f, #ffc168)
}

#pricing .calculator-presets .preset.media-preset:after {
    background-image: linear-gradient(45deg, #b84592 0%, #8e43e7 100%)
}

#pricing .calculator-presets .preset.saas-preset:after {
    background-image: linear-gradient(45deg, #ff4f81 0%, #ff6c5f 100%)
}

#pricing .calculator-presets .preset:focus,#pricing .calculator-presets .preset:active {
    outline: none
}

#pricing .calculator-presets .preset:before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07),0 2px 9px 0 rgba(62,57,107,0.06);
    content: "";
    border-radius: 6px
}

#pricing .calculator-presets .preset.active {
    background-color: #FFF !important;
    color: #3e396b
}

#pricing .calculator-presets .preset.active:before,#pricing .calculator-presets .preset.active:after {
    opacity: 1
}

#pricing .preset-container {
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: all 400ms ease;
    will-change: opacity;
    height: 100%
}

#pricing .preset-container.active {
    opacity: 1;
    pointer-events: auto;
    transition: all 400ms ease
}

#pricing .preset-container.active:before {
    opacity: 1
}

#pricing .preset-container.disabled {
    background-color: #f8faff;
    opacity: 1;
    pointer-events: auto
}

#pricing .preset-container.disabled p,#pricing .preset-container.disabled .color-bunting {
    opacity: .8;
    color: #8994c6 !important
}

#pricing .preset-container.disabled:before {
    background-image: linear-gradient(90deg, #8994c6, #8994c6)
}

#pricing .preset-container:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    content: "";
    position: absolute;
    opacity: 0;
    transition: all 400ms ease
}

#pricing .preset-container:first-child:before {
    background-image: linear-gradient(to left, #ff6c5f, #ffc168)
}

#pricing .preset-container:nth-child(2):before {
    background-image: linear-gradient(45deg, #b84592 0%, #8e43e7 100%)
}

#pricing .preset-container:nth-child(3):before {
    background-image: linear-gradient(45deg, #ff4f81 0%, #ff6c5f 100%)
}

#pricing .preset-container>div:first-child {
    -ms-flex: 0 1 65%;
    flex: 0 1 65%
}

#pricing .preset-container>div:last-child {
    -ms-flex: 0 1 35%;
    flex: 0 1 35%
}

#pricing .preset-calculation p {
    line-height: 1
}

#pricing .preset-wrapper {
    min-height: 407px
}

@media (max-width: 768px) {
    #pricing {
        background-color:white
    }
}

#pricing .alg-comparisoncontainer {
    background-color: white;
    position: relative;
    max-width: 1260px;
    padding: 0 20px;
    border-radius: 3px;
    margin-top: -80px;
    overflow: hidden;
    padding-top: 20px
}

#pricing .alg-comparisoncontainer .alg-column--narrow {
    position: relative
}

#pricing .alg-comparisoncontainer .alg-pricinglistcontainer {
    padding: 110px 15px 0 15px
}

#pricing .alg-comparisoncontainer #alg-comparisonheader--fixed {
    max-width: 1260px;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translate3d(-50%, 0, 0);
    background-color: white;
    box-shadow: 0 2px 4px 0 transparent;
    transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform
}

#pricing .alg-comparisoncontainer #alg-comparisonheader--fixed .alg-column--price {
    margin: 0;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

#pricing .alg-comparisoncontainer #alg-comparisonheader--fixed .alg-comparisonheader__container {
    background-color: white;
    display: -ms-flexbox;
    display: flex;
    padding: 20px 35px
}

#pricing .alg-comparisoncontainer #alg-comparisonheader--fixed.alg-comparisonheader--fixed {
    position: fixed;
    transform: translate3d(-50%, 0, 0);
    top: 60px;
    z-index: 10;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
    transition: box-shadow 600ms 200ms cubic-bezier(0.4, 0, 0.2, 1)
}

@media (max-width: 1200px) {
    #pricing .alg-comparisoncontainer #alg-comparisonheader--fixed.alg-comparisonheader--fixed {
        max-width:calc(100% - 40px)
    }
}

#pricing .alg-comparisoncontainer #alg-comparisonheader--fixed.alg-comparisonheader--fixed.alg-comparisonheader--fixed--animateout {
    -ms-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
    transition: transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1),opacity 400ms ease;
    opacity: 0
}

#pricing .alg-comparisoncontainer .alg-pricinglistactions {
    margin: 37px 0
}

#pricing .alg-pricing__table {
    z-index: 50;
    position: relative;
    padding: 0px 20px 0 20px
}

#pricing .alg-pricingfeatures {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 40px
}

@media (min-width: 768px) {
    #pricing .alg-pricingfeatures li:nth-of-type(odd) {
        background-color:#f8faff
    }
}

#pricing .alg-pricingfeatures li:first-child {
    background-color: #FFF
}

#pricing .alg-pricingfeatures .alg-pricingfeatures--feature {
    margin: 0.64286em 0;
    padding-left: 8px;
    font-weight: 500
}

#pricing .alg-pricingfeatures .alg-emptydash {
    color: #9d9dbd
}

#pricing .alg-pricingfeatures:last-child {
    margin-bottom: 0
}

#pricing .alg-pricingfeatures li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    font-weight: 300;
    color: #050f2c
}

#pricing .alg-pricingfeatures li:not(:first-child) {
    border-bottom: solid 1px #dedef8
}

#pricing .alg-pricingfeatures .alg-whatispricing__operation {
    max-width: 330px;
    margin: 0 auto
}

#pricing .alg-pricingfeatures .alg-whatispricing__operation input {
    padding: 0.6875em 1.5625em 0.6875em 2.5em;
    font-size: 16px;
    width: 100%;
    border: none;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    color: #262626;
    background-image: url("data:image/svg+xml, %3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12.15%2010.692h-.768l-.272-.263c.952-1.11%201.526-2.547%201.526-4.112C12.636%202.828%209.806%200%206.318%200%202.828%200%200%202.828%200%206.318c0%203.49%202.828%206.318%206.318%206.318%201.565%200%203.003-.574%204.11-1.526l.264.272v.768l4.86%204.85L17%2015.552l-4.85-4.86zm-5.832%200c-2.42%200-4.374-1.954-4.374-4.374s1.954-4.374%204.374-4.374%204.374%201.954%204.374%204.374-1.954%204.374-4.374%204.374z%22%20fill%3D%22%23AAA%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E");
    background-position: left 12px center;
    background-repeat: no-repeat
}

#pricing .alg-pricingfeatures .alg-whatispricing__operation input:focus {
    outline: none
}

#pricing .alg-pricingfeatures .alg-whatispricing__operation .alg-whatispricing__results {
    width: 100%;
    background-color: white
}

#pricing .alg-pricingfeatures .alg-whatispricing__help {
    text-align: center;
    padding-bottom: 70px
}

#pricing .alg-pricingfeatures .alg-whatispricing__help a {
    text-decoration: none
}

#pricing .alg-column--wide {
    -ms-flex: 0 0 32%;
    flex: 0 0 32%
}

#pricing .alg-column--wide .alg-column--info {
    font-size: 20px;
    font-weight: 500;
    color: #3e396b
}

#pricing .alg-column--narrow {
    text-align: center;
    -ms-flex: 0 0 17%;
    flex: 0 0 17%;
    padding: 0 10px
}

#pricing .alg-column--narrow:last-child {
    padding-right: 0
}

#pricing .alg-column--narrow a.btn.pos-abt {
    bottom: 0;
    opacity: 0;
    width: 80%;
    left: 50%;
    -ms-transform: translate(-50%, 6px);
    transform: translate(-50%, 6px);
    background-color: rgba(0,0,0,0.1);
    padding: 8px 0;
    line-height: 1;
    height: auto;
    transition: 60ms ease-out
}

#pricing .alg-column--narrow a.btn.ellipsis {
    padding: 8px
}

#pricing .alg-column--narrow .plan-cta .plan-background {
    left: 0;
    top: 0;
    width: 100%;
    height: 58px;
    transition: 220ms ease-out
}

#pricing .alg-column--narrow .plan-cta p:first-child {
    letter-spacing: 1px
}

#pricing .alg-column--narrow .plan-cta p {
    transition: 220ms ease-out;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

#pricing .alg-column--narrow:hover p {
    -ms-transform: translate(0, -16px);
    transform: translate(0, -16px)
}

#pricing .alg-column--narrow:hover .plan-background {
    transition: 220ms ease-out;
    -ms-transform: scaleX(1.06) scaleY(1.5);
    transform: scaleX(1.06) scaleY(1.5)
}

#pricing .alg-column--narrow:hover a {
    opacity: 1 !important;
    transition: 160ms 120ms ease-out
}

#pricing .alg-column--narrow.community .plan-background {
    background-image: linear-gradient(to top left, #EEF3FF, #FFF)
}

#pricing .alg-column--narrow.essential .plan-background {
    background-image: linear-gradient(45deg, #00AEFF 50%, #3369E6 100%)
}

#pricing .alg-column--narrow.business .plan-background {
    background-image: linear-gradient(45deg, #FF4F81 50%, #FE6C5F 100%)
}

#pricing .alg-column--narrow.enterprise .plan-background {
    background-image: linear-gradient(45deg, #3E396B 50%, #201C38 100%)
}

#pricing .alg-comparisoncontainer--mobile .alg-pricingfeatures>li {
    border-bottom: 0 !important
}

#pricing .alg-comparisoncontainer--mobile div {
    width: 100%
}

#pricing .alg-comparisoncontainer--mobile .alg-pricingfeature__maintitle {
    padding-left: 10px;
    padding-bottom: 4px;
    border-bottom: 0;
    text-align: center;
    font-size: 22px;
    color: #9d9dbd;
    margin-bottom: 30px;
    width: 100%
}

#pricing .alg-comparisoncontainer--mobile .alg-pricingfeature__title {
    padding: 0 10px 6px 10px;
    border-bottom: 1px solid #dedef8;
    font-size: 16px
}

#pricing .alg-comparisoncontainer--mobile ul:not(.alg-pricingfeatures) {
    padding: 0 20px;
    border-bottom: none;
    max-height: 0;
    overflow: hidden
}

#pricing .alg-comparisoncontainer--mobile ul:not(.alg-pricingfeatures) li {
    border-bottom: 1px solid #dedef8;
    padding-bottom: 4px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}

#pricing .alg-comparisoncontainer--mobile ul:not(.alg-pricingfeatures) li span {
    width: 40%;
    text-align: center;
    display: inline-block
}

#pricing .alg-comparisoncontainer--mobile ul:not(.alg-pricingfeatures) li span:not(.alg-emptydash) {
    color: #050f2c
}

#pricing .alg-comparisoncontainer--mobile ul:not(.alg-pricingfeatures) li .alg-pricingamount--converted {
    display: none
}

#pricing .alg-comparisoncontainer--mobile ul:not(.alg-pricingfeatures) li:not(:last-child) {
    margin-bottom: 4px
}

#pricing .alg-pricing-qa {
    max-width: 1200px;
    padding: 0 0 20px 0px;
    margin: 2.14286em auto 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#pricing .alg-pricing-qa .alg-pricing-qa__column {
    -ms-flex: 0 0 48%;
    flex: 0 0 48%
}

@media (max-width: 768px) {
    #pricing .alg-pricing-qa .alg-pricing-qa__column {
        -ms-flex:0 0 100%;
        flex: 0 0 100%
    }
}

#pricing .alg-pricing-qa h3 {
    font-size: 15px;
    font-weight: 600;
    color: #050f2c
}

#pricing .alg-pricing-qa p {
    font-size: 15px;
    line-height: 1.8;
    color: #17215a;
    margin-bottom: 2.66667em
}

#pricing .alg-pricing-qa ul {
    list-style-type: none
}

#pricing .alg-pricing-qa li:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 100%;
    margin-top: 10px;
    margin-left: -22px;
    background-color: #becce0
}

#pricing .alg-pricing-qa li p {
    margin-bottom: 0
}

#pricing .video {
    padding-bottom: 0
}

@media (max-width: 900px) {
    #pricing .video h1 {
        white-space:normal
    }
}

#pricing .video .video-play {
    width: 42px;
    height: 42px;
    border-radius: 100%;
    background-color: #fff
}

#pricing .video .video-play:focus {
    outline: none
}

#pricing .video .video-poster {
    background-size: cover;
    background-image: url("https://www.algolia.com/static_assets/images/svg/video-poster-eb1f06d4.svg")
}

#pricing .video .videowrapper {
    display: block;
    max-width: 560px;
    width: 100%;
    padding-bottom: 56%;
    box-shadow: 0 6px 16px rgba(62,57,107,0.3);
    will-change: transform;
    z-index: 1
}

@media (min-width: 480px) and (max-width: 1200px) {
    #pricing .video .videowrapper {
        margin:30px auto 0 auto
    }
}

@media (max-width: 480px) {
    #pricing .video .videowrapper {
        width:100%;
        padding-bottom: 56%
    }
}

#pricing .video .videowrapper iframe {
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#pricing #addons {
    padding-bottom: 0
}

#pricing #addons .btn-cta {
    text-shadow: 0px 1px 2px rgba(62,57,107,0.4);
    background-image: linear-gradient(-90deg, #00AEFF 0%, #3369E6 100%)
}

#pricing #addons .flex-container {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#pricing #addons .flex-container .col-xs-12:not(.m-b-none) {
    margin-bottom: 30px
}

#pricing #addons .add-on {
    height: 100%
}

#pricing #addons .add-on img {
    margin-top: 20px
}

#pricing #addons .add-on .row {
    width: 100%
}

#pricing #addons .add-on .row:last-child {
    -ms-flex-item-align: end;
    align-self: flex-end
}

#pricing #addons .add-on h3+p {
    min-height: 72px
}

@media (max-width: 768px) {
    #pricing #addons .add-on h3+p {
        padding-right:0
    }
}

#pricing #addons .add-on .availability .col-xs-4 {
    position: relative
}

#pricing #addons .add-on .availability .col-xs-4:nth-child(2):before,#pricing #addons .add-on .availability .col-xs-4:nth-child(2):after {
    height: 120%;
    background-color: rgba(137,148,198,0.4);
    position: absolute;
    left: 0;
    top: -10%;
    width: 1px;
    content: ""
}

#pricing #addons .add-on .availability .col-xs-4:nth-child(2):after {
    left: auto;
    right: 0
}

#pricing #addons .add-on .availability p {
    margin: 0;
    font-size: 12px
}

#pricing #addons .add-on .availability p:first-child {
    font-weight: 600;
    font-size: 10px;
    margin-bottom: 6px
}

#pricing #addons .add-on .availability i {
    font-weight: bold
}

#pricing #addons .add-on .availability i.icon-close {
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.pricing .container-cta {
    float: none;
    margin: 0;
    background: -webkit-linear-gradient(305deg, #4b2e91 0%, #3369e6 100%);
    background: linear, 305deg, #4b2e91 0%, #3369e6 100%;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b2e91', endColorstr='#3369e6', GradientType=0)
}

.pricing .container-cta .col-md-12,.pricing .container-cta .col-md-6 {
    padding: 0
}

.offline .hero {
    background-image: linear-gradient(115deg, #37539a, #8b63aa);
    overflow: hidden
}

.offline .hero svg {
    position: absolute;
    width: 80%;
    top: -70px;
    right: -20px
}

@media (max-width: 992px) {
    .offline .hero svg {
        top:-20px
    }
}

@media (max-width: 768px) {
    .offline .hero .col-md-7.text-left {
        text-align:center !important
    }
}

#phone_1,#phone_2,#phone_3 {
    position: relative;
    opacity: 0;
    animation: pack 1s ease forwards;
    will-change: transform, opacity;
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

#phone_1 {
    animation-delay: 2.5s
}

#phone_2 {
    animation-delay: 2s
}

#phone_3 {
    animation-delay: 1.5s
}

body.offline .hero__illustration svg:hover #phone_1,body.offline .hero__illustration svg:hover #phone_2,body.offline .hero__illustration svg:hover #phone_3 {
    transform: translate3d(0, -100px, 0) !important;
    opacity: 0 !important
}

@keyframes pack {
    0% {
        transform: translate3d(0, -100px, 0);
        opacity: 0
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

#st0,#st1,#st2 {
    position: relative;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

#st0 {
    animation: expand1 2s ease infinite
}

#st1 {
    animation: expand2 2s ease infinite
}

#st2 {
    animation: expand3 2s ease infinite
}

@keyframes expand1 {
    25% {
        opacity: 0
    }
}

@keyframes expand2 {
    50% {
        opacity: 0
    }
}

@keyframes expand3 {
    75% {
        opacity: 0
    }
}

.offline .offline__bullet-points {
    padding: 7em 0;
    background: white
}

.offline .offline__bullet-points .item-holder {
    margin-bottom: 5em
}

@media (max-width: 768px) {
    .offline .offline__showcase .text-right,.offline .offline__showcase .text-left {
        text-align:center !important
    }
}

.offline .offline__experience {
    background-color: white;
    overflow: hidden;
    position: relative
}

.offline .offline__experience:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -ms-transform: translate(40%, 0);
    transform: translate(40%, 0);
    z-index: 0;
    pointer-events: none;
    background-image: url("https://www.algolia.com/static_assets/images/offline/offline-mobile-f753983b.png");
    background-repeat: no-repeat;
    background-position: 0px -431px;
    background-size: 1560px
}

@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    .offline .offline__experience:after {
        background-image:url("https://www.algolia.com/static_assets/images/offline/offline-mobile@2x-fcb37168.png")
    }
}

@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi) {
    .offline .offline__experience:after {
        background-image:url("https://www.algolia.com/static_assets/images/offline/offline-mobile@2x-fcb37168.png")
    }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .offline .offline__experience:after {
        background-image:url("https://www.algolia.com/static_assets/images/offline/offline-mobile@2x-fcb37168.png")
    }
}

@media (max-width: 1200px) {
    .offline .offline__experience:after {
        -ms-transform:translate(0, 0);
        transform: translate(0, 0);
        background-image: url("https://www.algolia.com/static_assets/images/offline/offline-mobile-f753983b.png");
        background-repeat: no-repeat;
        background-position: 170px -590px;
        background-size: 1570px
    }
}

@media (max-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 1200px) and (min-resolution: 120dpi) {
    .offline .offline__experience:after {
        backgroundimage:url("https://www.algolia.com/static_assets/images/offline/offline-mobile-f753983b.png")
    }
}

@media (max-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.3), (max-width: 1200px) and (min-resolution: 124.8dpi) {
    .offline .offline__experience:after {
        backgroundimage:url("https://www.algolia.com/static_assets/images/offline/offline-mobile-f753983b.png")
    }
}

@media (max-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 1200px) and (min-resolution: 144dpi) {
    .offline .offline__experience:after {
        backgroundimage:url("https://www.algolia.com/static_assets/images/offline/offline-mobile-f753983b.png")
    }
}

@media (max-width: 768px) {
    .offline .offline__experience:after {
        -ms-transform:translate(0, 0);
        transform: translate(0, 0);
        background-image: url("https://www.algolia.com/static_assets/images/offline/offline-mobile-f753983b.png");
        background-repeat: no-repeat;
        background-position: -150px -410px;
        background-size: 1000px
    }
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 768px) and (min-resolution: 120dpi) {
    .offline .offline__experience:after {
        backgroundimage:url("https://www.algolia.com/static_assets/images/offline/offline-mobile-f753983b.png")
    }
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3), (max-width: 768px) and (min-resolution: 124.8dpi) {
    .offline .offline__experience:after {
        backgroundimage:url("https://www.algolia.com/static_assets/images/offline/offline-mobile-f753983b.png")
    }
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 768px) and (min-resolution: 144dpi) {
    .offline .offline__experience:after {
        backgroundimage:url("https://www.algolia.com/static_assets/images/offline/offline-mobile-f753983b.png")
    }
}

.offline .offline__experience h2 {
    margin-bottom: 3em;
    font-size: 28px
}

.offline .offline__experience #offline-experience-background {
    display: none;
    position: absolute;
    top: -50vh;
    right: -40vw;
    width: 100%
}

.offline .offline__experience .list__holder {
    max-width: 45%;
    float: left;
    margin-top: 356px
}

@media (max-width: 1200px) {
    .offline .offline__experience .list__holder {
        width:60%;
        max-width: 60%
    }
}

@media (max-width: 960px) {
    .offline .offline__experience .list__holder {
        width:80%;
        max-width: 80%
    }
}

@media (max-width: 768px) {
    .offline .offline__experience .list__holder {
        width:100%;
        max-width: 100%;
        text-align: center;
        margin-top: 510px
    }
}

.offline .offline__experience .list__item {
    width: 100%;
    float: left;
    margin-bottom: 3.5em
}

.offline .offline__experience .list__item .item__image,.offline .offline__experience .list__item .item__desc {
    float: left
}

@media (max-width: 768px) {
    .offline .offline__experience .list__item .item__image,.offline .offline__experience .list__item .item__desc {
        float:none;
        margin: auto
    }
}

@media (max-width: 768px) {
    .offline .offline__experience .list__item .item__image {
        margin-bottom:2em
    }
}

.offline .offline__experience .list__item .item__desc {
    height: 100%;
    width: calc(100% - 64px);
    padding-left: 2em
}

@media (max-width: 768px) {
    .offline .offline__experience .list__item .item__desc {
        padding:0
    }
}

.offline .offline__experience .list__item .item__desc h3 {
    color: #55606e;
    font-size: 20px;
    margin-top: 0;
    padding-top: 0
}

.offline .offline__experience .list__item .item__desc p {
    color: #697782;
    line-height: 22px
}

#saas .hero {
    background-color: white;
    background-image: url("https://www.algolia.com/static_assets/images/saas/svg/saas_header-ed983ac4.svg");
    background-position: center bottom -10px;
    background-size: cover;
    background-repeat: no-repeat
}

#saas .underlined::after {
    background-color: #ff6c5f
}

#saas .acid-icon {
    height: 64px
}

#saas .scale-section {
    position: relative
}

#saas .scale-section .map-holder {
    overflow: hidden
}

#saas .scale-section:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #f8faff;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #saas .scale-section:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #saas .scale-section:before {
        top:-80px;
        height: 200px
    }
}

#saas .frontend-section {
    position: relative
}

#saas .frontend-section:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #eef0f7;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #saas .frontend-section:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #saas .frontend-section:before {
        top:-80px;
        height: 200px
    }
}

#saas .sla-section {
    position: relative;
    padding-bottom: 80px
}

@media (max-width: 768px) {
    #saas .sla-section {
        text-align:center
    }
}

#saas .sla-section:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #3a4570;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #saas .sla-section:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #saas .sla-section:before {
        top:-80px;
        height: 200px
    }
}

#saas .benefits-section {
    position: relative
}

#saas .benefits-section .container {
    margin-top: -120px
}

#saas .benefits-section .al-card {
    min-height: 320px;
    margin-bottom: 24px
}

#saas .benefits-section:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #495588;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #saas .benefits-section:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #saas .benefits-section:before {
        top:-100px;
        height: 200px
    }
}

#saas .learn-more figure {
    perspective: 1200px;
    perspective-origin: 80% 80%
}

#saas .learn-more figure img {
    border-radius: 8px;
    transform: scale(0.9) rotateX(-2deg) rotateY(-15deg) rotate(0) translateX(-15%) translateY(-20px);
    box-shadow: 0 40px 64px rgba(62,57,107,0.4),0 20px 32px rgba(62,57,107,0.16)
}

@media (max-width: 768px) {
    #saas .learn-more figure img {
        -ms-transform:none;
        transform: none;
        box-shadow: 0 25px 40px rgba(62,57,107,0.5)
    }
}

#saas .scale-section .map-infos {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center
}

#saas .scale-section .map-infos .loading-counter {
    position: relative;
    font-size: 104px;
    color: #050f2c;
    text-shadow: 0 5px 20px rgba(62,57,107,0.6);
    line-height: 1;
    font-weight: 600;
    width: auto
}

#saas .scale-section .map-infos .loading-counter:after {
    content: '+';
    position: absolute;
    right: -40px;
    top: -20px
}

#saas .scale-section .map-infos .unit {
    font-size: 42px;
    text-transform: uppercase;
    color: #ff4f81
}

#saas .scale-section .map-holder {
    max-width: 960px;
    margin: 0 auto;
    position: relative
}

#saas .scale-section .map-holder svg {
    max-width: 100%
}

@media (max-width: 768px) {
    #saas .scale-section .map-holder svg {
        max-height:420px
    }
}

#saas .scale-section .map-holder [id*="rd_"] {
    fill: rgba(255,79,129,0.5)
}

#saas .scale-section .map-holder.animated [id*="rd_"] {
    fill: rgba(255,79,129,0.5);
    animation: pulsate 3s ease-in-out infinite
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_1"] {
    animation-delay: 225ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_2"] {
    animation-delay: 450ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_3"] {
    animation-delay: 675ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_4"] {
    animation-delay: 900ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_5"] {
    animation-delay: 1125ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_6"] {
    animation-delay: 1350ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_7"] {
    animation-delay: 1575ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_8"] {
    animation-delay: 1800ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_9"] {
    animation-delay: 2025ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_10"] {
    animation-delay: 2250ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_11"] {
    animation-delay: 2475ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_12"] {
    animation-delay: 2700ms
}

#saas .scale-section .map-holder.animated [id*="rd_"][id*="rd_13"] {
    animation-delay: 2925ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"] {
    fill: #ff4f81;
    animation: pulse 3s ease-in-out infinite
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_1"] {
    animation-delay: 225ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_2"] {
    animation-delay: 450ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_3"] {
    animation-delay: 675ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_4"] {
    animation-delay: 900ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_5"] {
    animation-delay: 1125ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_6"] {
    animation-delay: 1350ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_7"] {
    animation-delay: 1575ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_8"] {
    animation-delay: 1800ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_9"] {
    animation-delay: 2025ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_10"] {
    animation-delay: 2250ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_11"] {
    animation-delay: 2475ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_12"] {
    animation-delay: 2700ms
}

#saas .scale-section .map-holder.animated [id*="dsn_"][id*="dsn_13"] {
    animation-delay: 2925ms
}

#ecommerce .hero {
    background-color: white;
    background-image: url("https://www.algolia.com/static_assets/images/ecommerce/ecommerce_header-533c4af2.svg");
    background-position: center bottom 150px;
    background-size: cover;
    background-repeat: no-repeat
}

@media (max-width: 768px) {
    #ecommerce .hero .hero-actions button {
        border-radius:60px;
        width: auto;
        margin-left: 0;
        padding: 0 20px
    }
}

@media (max-width: 992px) {
    #ecommerce .hero {
        text-align:center
    }

    #ecommerce .hero h1 {
        text-align: center
    }

    #ecommerce .hero .hero-actions {
        text-align: center
    }

    #ecommerce .hero img {
        max-width: 362px
    }
}

#ecommerce .al-card {
    margin-bottom: 24px;
    max-width: 400px
}

#ecommerce .introduction-section p {
    color: #ff6c5f
}

#ecommerce .introduction-section footer p {
    color: #c4c8d8
}

#ecommerce .benefits-section img {
    margin-left: 12px
}

#ecommerce .personalization {
    background-color: #f8faff
}

#ecommerce .personalization:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #f8faff;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #ecommerce .personalization:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #ecommerce .personalization:before {
        top:-80px;
        height: 200px
    }
}

#ecommerce .dashboard {
    background-color: #3a4570
}

#ecommerce .dashboard:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #3a4570;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #ecommerce .dashboard:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #ecommerce .dashboard:before {
        top:-80px;
        height: 200px
    }
}

#ecommerce .engagement:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #495588;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #ecommerce .engagement:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #ecommerce .engagement:before {
        top:-80px;
        height: 200px
    }
}

@media (max-width: 992px) {
    #ecommerce .learn-more {
        text-align:center
    }

    #ecommerce .learn-more .mce-form-2 {
        padding-bottom: 80px
    }
}

#ecommerce .learn-more form {
    max-width: 420px;
    margin: 0 auto
}

#ecommerce .learn-more input {
    width: 100%
}

@media (max-width: 992px) {
    #ecommerce .learn-more .col-md-4 {
        position:absolute;
        bottom: -60px;
        width: 100%;
        margin-top: 8px;
        text-align: center
    }

    #ecommerce .learn-more .col-md-4 button {
        width: 100%
    }
}

#ecommerce .learn-more figure {
    perspective: 1200px;
    perspective-origin: 80% 80%
}

#ecommerce .learn-more figure img {
    border-radius: 8px;
    transform: scale(0.9) rotateX(-2deg) rotateY(-15deg) rotate(0) translateX(-15%) translateY(-20px);
    box-shadow: 0 55px 70px -20px rgba(62,57,107,0.5),0 20px 30px -10px rgba(62,57,107,0.14)
}

@media (max-width: 768px) {
    #ecommerce .learn-more {
        text-align:center
    }

    #ecommerce .learn-more figcaption {
        margin-bottom: 24px
    }

    #ecommerce .learn-more button {
        width: 100%
    }

    #ecommerce .learn-more figure img {
        transform: scale(0.9) rotateX(-2deg) rotateY(-15deg) rotate(0) translateY(-20px)
    }
}

#mobile .hero {
    position: relative;
    background-color: white;
    background-image: url("https://www.algolia.com/static_assets/images/mobile/svg/hero-background-5e99da8e.svg");
    background-position: center top;
    background-size: auto 100%;
    background-repeat: repeat-x
}

#mobile .platform-section {
    position: relative;
    padding-top: 0
}

#mobile .platform-section:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #f8faff;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #mobile .platform-section:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #mobile .platform-section:before {
        top:-80px;
        height: 200px
    }
}

#mobile .ground-up-section {
    position: relative;
    padding-top: 0
}

#mobile .ground-up-section:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #eef0f7;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #mobile .ground-up-section:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #mobile .ground-up-section:before {
        top:-80px;
        height: 200px
    }
}

#mobile .benefits-section {
    position: relative
}

#mobile .benefits-section:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #495588;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #mobile .benefits-section:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #mobile .benefits-section:before {
        top:-80px;
        height: 200px
    }
}

#mobile .benefits-section .al-card {
    min-height: 336px;
    margin-bottom: 24px
}

#mobile .benefits-section .container {
    margin-top: -120px
}

#mobile .benefits-section a.no-decoration:hover {
    text-decoration: none
}

#mobile .developers-section {
    position: relative;
    padding-top: 0
}

#mobile .developers-section .container {
    overflow: hidden
}

#mobile .developers-section:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 120px;
    background: #3a4570;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    top: -60px;
    left: 0
}

@media (min-width: 1200px) {
    #mobile .developers-section:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (min-width: 2000px) {
    #mobile .developers-section:before {
        top:-80px;
        height: 200px
    }
}

#mobile .learn-more figure {
    perspective: 1200px;
    perspective-origin: 80% 80%
}

#mobile .learn-more figure img {
    border-radius: 8px;
    transform: scale(0.9) rotateX(-2deg) rotateY(-15deg) rotate(0) translateX(-15%) translateY(-20px);
    box-shadow: 0 55px 70px -20px rgba(62,57,107,0.5),0 20px 30px -10px rgba(62,57,107,0.14)
}

#mobile .acid-icon {
    margin: 0 auto
}

#mobile .acid-icon img {
    max-width: 64px;
    height: 64px
}

.mc-signupmessage {
    width: 100%;
    height: 100%;
    background-color: white;
    position: absolute;
    color: #6775b5;
    z-index: 100;
    display: none;
    pointer-events: none;
    opacity: 0;
    transition: 400ms ease-in-out;
    line-height: 1;
    z-index: 1;
    max-width: 400px;
    line-height: 40px;
    text-align: center;
    border-radius: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mc-signupmessage svg {
    height: auto;
    width: 15px;
    margin-left: 4px;
    vertical-align: middle
}

.mc_embed_signup--success .mc-signupmessage {
    animation: fadeIn 200ms ease-in-out forwards;
    display: block
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0.0
    }

    50% {
        opacity: 1.0
    }

    100% {
        transform: scale(6.2, 6.2);
        opacity: 0.0
    }
}

@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    30% {
        opacity: 1;
        transform: scale(1.5)
    }

    60% {
        transform: scale(2);
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: scale(3)
    }
}

.integrationspage .hero {
    background: linear-gradient(266deg, #3369e7, #00aeff)
}

.integrations-search {
    padding-top: 8px
}

.integrations-search input {
    border-radius: 30px;
    border-color: #8994c6
}

.integrations-search i {
    top: 0;
    right: 0;
    margin: 1.2em 0.8em
}

.integrations-filter-type {
    line-height: 52px
}

ul.features-checklist {
    padding: 0
}

ul.features-checklist li {
    font-size: 1.1em;
    line-height: 1.6em;
    padding: 0 0 1.8em;
    display: block;
    background-size: 24px
}

#integrations .media-body {
    display: block
}

@media (max-width: 992px) {
    #integrations .col-sm-4 {
        width:100%
    }
}

#integrations .card-border {
    height: auto
}

#integrations .lead {
    display: block;
    width: 80%;
    margin: 0 auto
}

#integrations .panel-integration {
    height: auto;
    padding: 0 20px
}

#integrations .panel-integration img {
    border-radius: 8px;
    height: 64px;
    width: auto
}

#integrations .panel-integration .media-content {
    min-height: 60px
}

#integrations .panel-integration .media-content p {
    font-size: 13px;
    margin-bottom: 20px;
    vertical-align: middle
}

.schedule-demo .hero,.contact-enterprise .hero {
    position: relative;
    overflow: visible;
    background: #3E396B
}

.schedule-demo .hero:after,.contact-enterprise .hero:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 150px;
    background: #f8faff;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    bottom: -130px;
    left: 0;
    z-index: 5;
    height: 200px
}

@media (min-width: 1200px) {
    .schedule-demo .hero:after,.contact-enterprise .hero:after {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

@media (max-width: 768px) {
    .schedule-demo .hero:after,.contact-enterprise .hero:after {
        display:none
    }
}

.schedule-demo .container.pos-rel,.contact-enterprise .container.pos-rel {
    top: -270px
}

@media (max-width: 768px) {
    .schedule-demo .container.pos-rel,.contact-enterprise .container.pos-rel {
        top:-200px
    }
}

.schedule-demo .container.pos-rel.form-sent,.contact-enterprise .container.pos-rel.form-sent {
    top: 0;
    text-align: center !important
}

@media (max-width: 992px) {
    .schedule-demo section.h300,.contact-enterprise section.h300 {
        min-height:460px !important;
        height: 460px !important
    }
}

.schedule-demo .card:before,.contact-enterprise .card:before {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-image: linear-gradient(to right, #8e43e7 0%, #3369e7 30%, #00aeff 100%);
    top: 0;
    left: 0;
    position: absolute;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px
}

.schedule-demo .cta-free-trial:before,.contact-enterprise .cta-free-trial:before {
    top: -120px;
    background: #f8faff;
    height: 220px
}

.schedule-demo label,.contact-enterprise label {
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 400;
    color: #3e396b
}

.schedule-demo .form-control,.contact-enterprise .form-control {
    border-color: #eef0f7;
    height: 48px;
    line-height: 48px
}

.schedule-demo .form-control::-webkit-input-placeholder,.contact-enterprise .form-control::-webkit-input-placeholder {
    color: #9d9dbd !important
}

.schedule-demo .form-control:-moz-placeholder,.contact-enterprise .form-control:-moz-placeholder {
    color: #9d9dbd !important
}

.schedule-demo .form-control::-moz-placeholder,.contact-enterprise .form-control::-moz-placeholder {
    color: #9d9dbd !important
}

.schedule-demo .form-control:-ms-input-placeholder,.contact-enterprise .form-control:-ms-input-placeholder {
    color: #9d9dbd !important
}

.schedule-demo .from-group-gradient:before,.contact-enterprise .from-group-gradient:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 48px;
    background: transparent;
    bottom: 0;
    left: 0;
    border-radius: 5px;
    z-index: 0;
    box-sizing: content-box;
    padding: 1px;
    margin: -1px -1px
}

.schedule-demo .from-group-gradient.focused:before,.contact-enterprise .from-group-gradient.focused:before {
    background-image: linear-gradient(to bottom right, #8e43e7 0%, #3369e7, #00aeff 100%)
}

.schedule-demo .from-group-gradient input,.contact-enterprise .from-group-gradient input {
    z-index: 10
}

.ambassador:not(.partner) .hero,.partner:not(.partner) .hero {
    background: #f8faff url(https://community.algolia.com/img/background.svg) no-repeat top center fixed/100% !important
}

.ambassador:not(.partner) .hero:before,.partner:not(.partner) .hero:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 200px;
    background: #FFF;
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    z-index: 0;
    bottom: -100px;
    z-index: 10;
    box-shadow: rgba(112,128,175,0.05) 0 -16px 24px
}

@media (min-width: 1200px) {
    .ambassador:not(.partner) .hero:before,.partner:not(.partner) .hero:before {
        -ms-transform:skewY(-3deg);
        transform: skewY(-3deg)
    }
}

.ambassador .hero h1 span,.partner .hero h1 span {
    display: inline-block;
    -ms-transform-origin: left 20% bottom 10%;
    transform-origin: left 20% bottom 10%;
    animation: handAnimation 1400ms ease infinite 1200ms
}

.ambassador .card:before,.partner .card:before {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-image: linear-gradient(to right, #8e43e7 0%, #3369e7 30%, #00aeff 100%);
    top: 0;
    left: 0;
    position: absolute;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px
}

.ambassador .text-right img,.partner .text-right img {
    max-width: 80%;
    max-height: 400px
}

.ambassador article ul,.partner article ul {
    list-style: none
}

.ambassador article ul li,.partner article ul li {
    position: relative;
    line-height: 2
}

.ambassador article ul li:before,.partner article ul li:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #00aeff;
    position: absolute;
    left: -26px;
    top: 8px;
    border-radius: 100px
}

.ambassador .separator,.partner .separator {
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #3369e7, #fff)
}

@keyframes handAnimation {
    0% {
        transform: rotate(0deg)
    }

    20% {
        transform: rotate(10deg)
    }

    30% {
        transform: rotate(-10deg)
    }

    40% {
        transform: rotate(10deg)
    }

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

    60%, 100% {
        transform: rotate(0)
    }
}

.contact-enterprise .container.pos-rel {
    top: inherit
}

.contact-enterprise .container .card {
    top: -160px
}

.ap-input-icon {
    z-index: 10
}

.thread .message {
    border: 1px solid #B9C5CD;
    padding: 10px;
    margin-bottom: -1px
}

.thread .message.is_admin {
    background: rgba(0,174,255,0.05)
}

.chatlio-widget {
    width: 500px !important;
    height: 487px !important;
    right: 10px !important
}

.chatlio-widget .chatlio-controls {
    height: 1.5em;
    font-size: 16px
}

.chatlio-widget .chatlio-icon-minus {
    display: none
}

.chatlio-widget #chatlio-message-container {
    height: 370px !important
}

.chatlio-widget .chatlio-offline-message-container {
    height: 440px !important
}

.chatlio-widget .chatlio-offline-message-container textarea {
    max-height: 240px !important;
    height: 240px !important
}

#chat-box {
    position: fixed;
    bottom: 0;
    right: 10px;
    z-index: 10000;
    will-change: transform;
    opacity: 0;
    -ms-transform: translate(0, 4px);
    transform: translate(0, 4px);
    transition: 400ms ease
}

#chat-box ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px
}

#chat-box ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,0.5)
}

#chat-box.loaded {
    opacity: 1;
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}

#chat-box .closed {
    position: relative;
    bottom: 10px;
    border-radius: 20px;
    background: #2b274a;
    width: 140px;
    padding: 8px 5px;
    font-size: 16px;
    padding-right: 10px;
    margin-bottom: 0;
    color: white
}

#chat-box .closed i {
    font-size: 1.3em;
    position: relative;
    top: 1px
}

#chat-box .closed a {
    color: white !important;
    text-decoration: none !important
}

#chat-box .closed a:hover {
    text-decoration: none !important
}

#chat-box .opened {
    animation: fadeInUp 0.2s ease-in;
    width: 500px;
    background: white;
    padding: 0;
    border-radius: 3px;
    box-shadow: 0 0 0 5px rgba(62,57,107,0.3)
}

#chat-box .opened .header {
    background: #050f2c;
    padding: 6px 15px;
    font-size: 1.2em;
    line-height: 30px;
    color: white
}

#chat-box .opened .header a {
    color: white
}

#chat-box .opened .header a:hover {
    text-decoration: none
}

#chat-box .opened .header i {
    font-size: 16px;
    position: relative;
    top: 2px
}

#chat-box .opened .chat-help {
    border-left: solid 2px #2b274a;
    border-right: solid 2px #2b274a
}

#chat-box .opened .chat-links {
    margin-bottom: 0
}

#chat-box .opened .chat-links .list-group-item {
    border-radius: 0;
    padding: 11px 15px !important;
    border-bottom: solid 1px #dadae6
}

#chat-box .opened .chat-links .list-group-item a {
    display: block;
    color: #3e396b;
    font-weight: bold
}

#chat-box .opened .chat-with-us-group {
    margin: 0;
    background: #F3F4F7;
    text-align: center;
    padding: 0.5em 0;
    border-top: 1px solid #ddd
}

#chat-box .opened .chat-with-us-group .btn {
    min-width: 275px;
    background-color: #050f2c
}

#help-center .resources .icon-github,#chat-box .chat-links .icon-github {
    color: black
}

#help-center .resources .icon-magic,#chat-box .chat-links .icon-magic {
    color: #4D5B65
}

#help-center .resources .icon-book,#chat-box .chat-links .icon-book {
    color: #429dd5
}

#help-center .resources .icon-graduation-cap,#chat-box .chat-links .icon-graduation-cap {
    color: black
}

#help-center .resources .icon-check-circle-o,#chat-box .chat-links .icon-check-circle-o {
    color: #89b13d
}

#help-center .resources .icon-refresh,#chat-box .chat-links .icon-refresh {
    color: #666
}

#help-center .resources .icon-stack-overflow,#chat-box .chat-links .icon-stack-overflow {
    color: #F47920
}

#help-center .rss-items li {
    padding: 5px 0 5px 0;
    border-bottom: 1px solid #eeeeee
}

#help-center .rss-items li:last-child {
    border-bottom: none
}

body.case-studies section {
    font-family: "Open Sans", Helvetica Neue, helvetica
}

body.case-studies section svg {
    width: 0;
    height: 0
}

body.case-studies section p {
    font-family: "Open Sans", helvetica, sans-serif;
    font-size: 18px
}

body.case-studies section p code {
    border-radius: 2px;
    color: #fb366e;
    padding: 0.1em;
    background-color: rgba(231,72,107,0.2)
}

body.case-studies section p a {
    color: #21A4D7;
    text-decoration: none
}

body.case-studies section hr {
    margin: 0
}

body.case-studies section figure figcaption {
    text-indent: -9999px;
    color: transparent
}

body.case-studies section h1 {
    font-size: 3em
}

body.case-studies section h2,body.case-studies section h3 {
    margin: 0;
    padding: 0
}

body.case-studies section p {
    font-size: 16px;
    line-height: 34px;
    font-weight: 500;
    color: rgba(38,38,38,0.75)
}

body.case-studies section a {
    color: #00aeff
}

body.case-studies section .lh2 {
    line-height: 36px;
    padding: 12px
}

body.case-studies section .subtitle,body.case-studies section .title {
    font-weight: 600;
    color: #262626;
    width: 100%
}

body.case-studies section .title {
    line-height: 56px;
    font-size: 2em;
    text-align: center
}

body.case-studies section .subtitle {
    font-size: 24px
}

body.case-studies section .text-muted {
    font-size: 14px;
    font-weight: 600
}

body.case-studies section .quote {
    color: #00aeff;
    text-align: center;
    width: 100%;
    font-size: 24px;
    font-style: italic;
    line-height: 38px;
    display: inline-block
}

body.case-studies section .quote:before,body.case-studies section .quote:after {
    font-family: "Times", serif;
    font-weight: bold;
    content: '”';
    font-size: 2em;
    position: relative;
    top: 8px;
    padding: 0 0.25em
}

body.case-studies section .quote:before {
    content: '“'
}

.case-study body.case-studies section .quote {
    display: block
}

.balinea .indice.small {
    font-size: 3em;
    line-height: 1;
    margin: 0;
    padding: 0
}

body.case-studies .image {
    width: 100%;
    max-width: 800px;
    margin: auto;
    float: none;
    display: block
}

body.case-studies .img-thumbnail {
    background: none
}

body.case-studies .img-thumbnail.small-thumbnail {
    max-width: 380px !important
}

body.case-studies .pictures-holder {
    float: left;
    left: 0;
    width: 100%
}

@media (min-width: 1600px) {
    body.case-studies .pictures-holder {
        width:calc(100% + 280px);
        position: relative;
        left: -140px
    }
}

body.case-studies .pictures-holder .pictures-item {
    float: left;
    padding: 1em;
    height: 480px;
    position: relative;
    width: 100%
}

body.case-studies .pictures-holder .pictures-item:only-child img {
    object-fit: inherit;
    object-position: inherit;
    width: 100%;
    height: auto
}

body.case-studies .pictures-holder .pictures-item:not(:only-child) {
    width: 50%
}

@media (max-width: 768px) {
    body.case-studies .pictures-holder .pictures-item:not(:only-child) {
        width:100%;
        margin-bottom: 1em
    }
}

body.case-studies .pictures-holder .image {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 1em);
    height: 100%
}

@supports (object-fit: cover) or (-webkit-object-fit: cover) {
    body.case-studies .pictures-holder .image {
        object-fit:cover;
        object-position: center
    }

    @media (max-width: 768px) {
        body.case-studies .pictures-holder .image {
            width:100%;
            height: 100%
        }
    }
}

@media (max-width: 768px) {
    body.case-studies .pictures-holder .image {
        width:100%
    }
}

.insights-bloc {
    background: rgba(155,155,155,0.02);
    width: 100%;
    max-width: 1000px;
    margin: auto;
    border: solid 1px rgba(151,151,151,0.25);
    border-radius: 4px;
    padding: 40px
}

@media (max-width: 768px) {
    .insights-bloc {
        text-align:center
    }

    .insights-bloc .col-md-2 {
        border-bottom: 1px solid rgba(0,0,0,0.1);
        margin-bottom: 1em
    }
}

.case-studies section .insights-bloc h2,.case-studies section .insights-bloc h3 {
    padding-top: 1em
}

.case-studies section .insights-bloc h2 {
    padding-bottom: 0.5em
}

.case-studies section .insights-bloc h2 small {
    display: none
}

.case-studies section .insights-bloc h3:nth-of-type(2) {
    margin-bottom: 2em
}

.case-studies section .insights-bloc a {
    font-size: 14px;
    font-weight: 600;
    color: black;
    opacity: 0.45;
    padding: 0 1em
}

.case-studies section .insights-bloc h2.text-center {
    display: block;
    width: 100%;
    font-weight: 600;
    padding: 1em 0 0
}

.insights-bloc .col-sm-3 {
    padding: 0
}

.insights-bloc a {
    color: #040813;
    opacity: 0.45
}

body.case-studies .insights-bloc a {
    color: #040813;
    opacity: 0.45
}

.insights-bloc .tag {
    font-size: 14px;
    font-weight: 600;
    color: black;
    opacity: 0.45;
    padding: 0 1em;
    text-transform: uppercase
}

.insights-bloc .tag:hover {
    text-decoration: none
}

.insights-bloc hr {
    width: 100%;
    max-width: 500px;
    margin: 1em auto;
    display: inline-block
}

.insights-bloc svg {
    display: inline-block;
    position: relative;
    top: 4px;
    margin: 0 0.5em
}

.insights-bloc .indice,.insights-bloc .description {
    width: 100%;
    display: block;
    clear: both;
    text-align: center
}

.insights-bloc .indice {
    font-size: 40px;
    color: #fb366e;
    letter-spacing: -2px;
    padding: 0.5em 0
}

.col-md-6 .insights-bloc .indice {
    text-align: right;
    padding-right: 8px
}

.insights-bloc .description {
    font-size: 14px;
    color: rgba(0,0,0,0.75);
    font-weight: 600;
    opacity: 0.5
}

.insights-bloc .row {
    padding: 16px 60px
}

.insights-bloc .row .text-muted {
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.5;
    color: rgba(38,38,38,0.75)
}

.insights-bloc .row .col-md-2 {
    padding: 0.6em 16px
}

.insights-bloc .row .col-md-5,.insights-bloc .row .col-md-7 {
    padding: 0
}

.insights-bloc .row .col-md-7 {
    padding: 0.5em 8px
}

.insights-bloc .row .col-md-7 span {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 22px;
    color: rgba(0,0,0,0.75);
    opacity: 0.5
}

.insights-bloc .row .col-md-10 {
    padding: 0
}

.insights-bloc .row .col-md-10 p {
    font-size: 18px;
    line-height: 32px;
    font-weight: 500;
    color: rgba(38,38,38,0.75)
}

.insights-bloc .row .col-md-10 .col-md-6 {
    padding: 0
}

.insights-bloc .spacer40 {
    float: left
}

.static.case-studies .evenbg {
    border-bottom: none
}

body.case-studies section article {
    padding: 0 16px;
    max-width: 720px;
    margin: auto
}

body.case-studies section article p {
    font-size: 18px;
    color: rgba(38,38,38,0.75);
    opacity: 0.85
}

body.case-studies section img.small-image {
    width: 400px;
    height: auto
}

body.case-studies.aftership .hero-container {
    background-image: linear-gradient(129deg, #8866b1 0, #3b5493 100%)
}

body.case-studies.jadopado .hero-container {
    background-image: linear-gradient(20deg, #e7486b 0%, #9c4274 100%)
}

body.case-studies.meta .hero-container {
    background-image: linear-gradient(316deg, #F6624E 0, #FDBD57 100%)
}

body.case-studies.streema .hero-container {
    background-image: linear-gradient(130deg, #3b5295 0%, #10a4b8 100%)
}

body.case-studies.a-little-market .hero-container {
    background-image: linear-gradient(-130deg, #8866b1 0%, #e7486b 100%)
}

body.case-studies.balinea .hero-container {
    background-image: linear-gradient(-20deg, #ED4264, #f1ad99)
}

body.case-studies.evolution .hero-container {
    background-image: linear-gradient(to right, #2C3E50, #4CA1AF)
}

body.case-studies.maison .hero-container {
    background-image: linear-gradient(to bottom right, #FDBD57, #F6624E)
}

body.case-studies.alltrails .hero-container {
    background-image: linear-gradient(to bottom right, #3e6a2f, #9ae77e)
}

body.case-studies .hero-container {
    min-height: 550px;
    background-size: 100%;
    position: relative
}

body.case-studies .hero-container:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url("https://www.algolia.com/static_assets/images/case-studies/background_pattern-ace48d95.svg");
    background-repeat: no-repeat;
    background-position: center right 6vw;
    background-size: 60%;
    z-index: 0
}

body.case-studies .hero-container .container {
    width: 100%;
    max-width: 1170px;
    position: relative;
    z-index: 1
}

body.case-studies .hero-container .center-bloc {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    max-width: 500px;
    padding-left: 16px
}

body.case-studies .hero-container .text-muted {
    text-transform: uppercase;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    font-weight: 600
}

body.case-studies .hero-container .hero-title,body.case-studies .hero-container .hero-figure {
    position: relative;
    width: 50%;
    height: 550px
}

body.case-studies .hero-container .hero-title {
    color: white;
    float: left
}

body.case-studies .hero-container .hero-title .text-muted {
    opacity: 0.75
}

body.case-studies .hero-container .hero-title h1 {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    float: left;
    clear: both
}

body.case-studies .hero-container .hero-title span,body.case-studies .hero-container .hero-title h4 {
    color: rgba(255,255,255,0.75);
    float: left
}

body.case-studies .hero-container .hero-title h4 {
    font-size: 20px;
    line-height: 28px;
    text-transform: inherit;
    font-weight: 500;
    margin: 0
}

body.case-studies .hero-container .hero-title small {
    color: white;
    opacity: 0.5
}

@media (max-width: 768px) {
    body.case-studies .hero-container .hero-title {
        width:100%;
        text-align: center
    }

    body.case-studies .hero-container .hero-title h1,body.case-studies .hero-container .hero-title span {
        float: none !important;
        text-align: center !important
    }
}

body.case-studies .hero-container .hero-figure {
    position: absolute;
    top: 60px;
    right: 0;
    max-width: 30%;
    right: 21vw
}

@media (max-width: 768px) {
    body.case-studies .hero-container .hero-figure {
        display:none
    }
}

body.case-studies .hero-container .hero-figure figure {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 65%
}

body.case-studies .hero-container .hero-figure figure img {
    max-width: 60%;
    width: 100%;
    display: block;
    margin: auto
}

body.case-studies .hero-container .hero-figure figure img.logo-small {
    max-width: 40%;
    height: auto
}

body.case-studies .hero-container .hero-figure figure img.logo-bigger {
    max-width: 90%
}

.call-to-action {
    border-top: 1px solid rgba(151,151,151,0.5);
    border-bottom: 1px solid rgba(151,151,151,0.5);
    padding: 2em 0
}

@media (max-width: 768px) {
    .call-to-action {
        text-align:center
    }
}

.static .call-to-action.oddbg {
    border-bottom: none
}

.call-to-action h2 {
    font-weight: 600;
    margin-bottom: 8px
}

.call-to-action p {
    font-size: 18px;
    color: rgba(38,38,38,0.75);
    line-height: 28px
}

.call-to-action .col-md-6:nth-of-type(2) {
    min-height: 100px
}

.call-to-action .col-md-6:nth-of-type(2) .btn {
    margin-top: 2em;
    color: white
}

.call-to-action .col-md-6:nth-of-type(2) .btn:focus,.call-to-action .col-md-6:nth-of-type(2) .btn:active {
    color: white
}

.static.case-studies .call-to-action.oddbg {
    border-bottom: none;
    padding-bottom: 150px
}

.static.case-studies footer#footer {
    border-top: 1px solid #ccc
}

.pagination {
    padding: 0;
    position: relative;
    float: left;
    border-top: 0;
    width: 100%
}

.pagination .btn {
    width: calc(50% - 12px);
    max-width: inherit;
    position: relative;
    height: 112px;
    border-radius: 4px;
    border: solid 1px rgba(151,151,151,0.5);
    box-shadow: none;
    background: transparent;
    float: left;
    color: #040813;
    font-size: 2em;
    white-space: initial;
    text-transform: capitalize
}

@media (max-width: 768px) {
    .pagination .btn {
        font-size:16px
    }

    .pagination .btn svg {
        display: none
    }
}

.pagination .btn svg {
    position: absolute;
    width: 44px;
    height: 34px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto
}

.pagination .btn svg use {
    fill: #e2e2e2
}

.pagination .btn:before {
    font-size: 14px;
    color: rgba(4,8,19,0.5);
    width: 100%;
    float: left
}

.pagination .btn.previous {
    margin-right: 12px;
    text-align: right
}

.pagination .btn.previous:before {
    content: 'previous'
}

.pagination .btn.previous svg {
    left: 1em;
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.pagination .btn.next {
    margin-left: 12px;
    text-align: left
}

.pagination .btn.next:before {
    content: 'next'
}

.pagination .btn.next svg {
    right: 1em
}

.pagination .btn:hover {
    color: #00aeff;
    background-color: rgba(22,171,232,0.02);
    border: solid 1px currentColor
}

.pagination .btn:hover svg use {
    fill: #00aeff
}

#dev-landing .hero-gradient {
    background-image: url("https://www.algolia.com/static_assets/images/svg/hero-bg-53933731.svg"),radial-gradient(#1f74b5 10%,#3e396b 90%);
    background-size: cover;
    background-position: center;
    color: white
}

#dev-landing .hero-gradient:before {
    background-image: none
}

#dev-landing .elevation-1 {
    box-shadow: 0 0 15px 0 #3e396b
}

#dev-landing .title-square {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    background-color: #3e396b
}

#dev-landing .dev-hero {
    height: 430px
}

#dev-landing .hero-container {
    padding: 40px 0 0;
    position: relative;
    text-align: center
}

#dev-landing .hero-container .logo {
    height: 60px;
    margin: 20px 0 40px
}

#dev-landing .hero-container .cta-button,#dev-landing .hero-container .schedule-demo {
    margin-right: 15px;
    font-weight: 700;
    width: 222px
}

#dev-landing .player {
    margin-top: -10px
}

#dev-landing .dev-references {
    background-color: white;
    display: block;
    text-align: center;
    padding: 60px 0 80px
}

#dev-landing .list-inline {
    margin-left: -5px
}

#dev-landing .list-inline>li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px
}

#dev-landing .logos {
    margin-top: 20px;
    color: #6c7e96
}

#dev-landing .dev-footer .text {
    font-size: 17px;
    font-style: italic;
    font-weight: 400;
    color: #b0b8c9;
    letter-spacing: .2px
}

#dev-landing .dev-footer em {
    font-size: 1.1em;
    font-weight: bold;
    color: white;
    font-style: normal
}

#dev-landing .dev-footer .logo {
    width: 110px
}

@media (max-width: 768px) {
    #dev-landing .logos li {
        width:100%;
        display: block;
        margin: 20px 0
    }

    #dev-landing .schedule-demo {
        margin-bottom: 15px
    }
}

input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],input[type="file"],textarea,select {
    outline: none !important;
    box-shadow: none !important
}

input[type="text"]::-moz-placeholder,input[type="password"]::-moz-placeholder,input[type="datetime"]::-moz-placeholder,input[type="datetime-local"]::-moz-placeholder,input[type="date"]::-moz-placeholder,input[type="month"]::-moz-placeholder,input[type="time"]::-moz-placeholder,input[type="week"]::-moz-placeholder,input[type="number"]::-moz-placeholder,input[type="email"]::-moz-placeholder,input[type="url"]::-moz-placeholder,input[type="search"]::-moz-placeholder,input[type="tel"]::-moz-placeholder,input[type="color"]::-moz-placeholder,input[type="file"]::-moz-placeholder,textarea::-moz-placeholder,select::-moz-placeholder {
    color: #bbbbbb !important;
    opacity: 1
}

input[type="text"]:-ms-input-placeholder,input[type="password"]:-ms-input-placeholder,input[type="datetime"]:-ms-input-placeholder,input[type="datetime-local"]:-ms-input-placeholder,input[type="date"]:-ms-input-placeholder,input[type="month"]:-ms-input-placeholder,input[type="time"]:-ms-input-placeholder,input[type="week"]:-ms-input-placeholder,input[type="number"]:-ms-input-placeholder,input[type="email"]:-ms-input-placeholder,input[type="url"]:-ms-input-placeholder,input[type="search"]:-ms-input-placeholder,input[type="tel"]:-ms-input-placeholder,input[type="color"]:-ms-input-placeholder,input[type="file"]:-ms-input-placeholder,textarea:-ms-input-placeholder,select:-ms-input-placeholder {
    color: #bbbbbb !important
}

input[type="text"]::-webkit-input-placeholder,input[type="password"]::-webkit-input-placeholder,input[type="datetime"]::-webkit-input-placeholder,input[type="datetime-local"]::-webkit-input-placeholder,input[type="date"]::-webkit-input-placeholder,input[type="month"]::-webkit-input-placeholder,input[type="time"]::-webkit-input-placeholder,input[type="week"]::-webkit-input-placeholder,input[type="number"]::-webkit-input-placeholder,input[type="email"]::-webkit-input-placeholder,input[type="url"]::-webkit-input-placeholder,input[type="search"]::-webkit-input-placeholder,input[type="tel"]::-webkit-input-placeholder,input[type="color"]::-webkit-input-placeholder,input[type="file"]::-webkit-input-placeholder,textarea::-webkit-input-placeholder,select::-webkit-input-placeholder {
    color: #bbbbbb !important
}

input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,input[type="file"]:focus,textarea:focus,select:focus {
    box-shadow: none !important
}

.form-control-wrapper select.form-control,.form-control-wrapper textarea.form-control,.form-control-wrapper input[type="text"].form-control,.form-control-wrapper input[type="password"].form-control,.form-control-wrapper input[type="datetime"].form-control,.form-control-wrapper input[type="datetime-local"].form-control,.form-control-wrapper input[type="date"].form-control,.form-control-wrapper input[type="month"].form-control,.form-control-wrapper input[type="time"].form-control,.form-control-wrapper input[type="week"].form-control,.form-control-wrapper input[type="number"].form-control,.form-control-wrapper input[type="email"].form-control,.form-control-wrapper input[type="url"].form-control,.form-control-wrapper input[type="search"].form-control,.form-control-wrapper input[type="tel"].form-control,.form-control-wrapper input[type="color"].form-control {
    line-height: 1em
}

.checkbox-inline {
    margin-left: 0px !important;
    display: block !important
}

textarea.small-text {
    height: 100px
}

.fixed-width-xs {
    width: 60px
}

.fixed-width-sm {
    width: 120px
}

.fixed-width-md {
    width: 180px
}

.fixed-width-lg {
    width: 240px
}

.fixed-width-xl {
    width: 300px
}

.fixed-width-xxl {
    width: 360px
}

.form-horizontal .control-label {
    padding-right: .5em
}

.form-horizontal .control-label abbr {
    border: none
}

.form-group {
    margin-bottom: 20px
}

.help-blocktext-muted {
    font-size: .9em
}

.searchbox {
    position: relative;
    overflow: hidden;
    height: auto !important
}

.searchbox input {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    width: 100%;
    border: none
}

.searchbox.searchbox-regular,.searchbox.searchbox-thin {
    border-radius: 20px;
    border: solid 2px #00aeff;
    padding-right: 40px
}

.searchbox.searchbox-regular:before,.searchbox.searchbox-thin:before {
    top: 2px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    right: 5px;
    display: block;
    width: 30px;
    height: 30px;
    content: "\f002";
    font-family: FontAwesome;
    color: #00aeff;
    font-size: 1em
}

.searchbox.searchbox-thin {
    border: 1px solid #D5D5D5
}

.searchbox.searchbox-modern {
    border-bottom: solid 3px #F6624E
}

.searchbox.searchbox-modern input {
    padding-left: 30px
}

.searchbox.searchbox-modern:before {
    top: 2px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    display: block;
    width: 30px;
    height: 30px;
    content: "\f002";
    font-family: FontAwesome;
    color: #F6624E;
    font-size: 1.3em
}

.search-wrapper {
    float: right !important
}



.admin-search .aa-dropdown-menu .aa-suggestion .hit .badge-app {
    padding: 2px 5px;
    background-color: #f8faff;
    border-radius: 5px;
    color: #3e396b
}

.admin-search .aa-dropdown-menu .aa-suggestion .hit .badge-referer {
    display: none
}

.admin-search .aa-dropdown-menu .aa-suggestion .hit .badge-referer:nth-child(1),.admin-search .aa-dropdown-menu .aa-suggestion .hit .badge-referer:nth-child(2),.admin-search .aa-dropdown-menu .aa-suggestion .hit .badge-referer:nth-child(3),.admin-search .aa-dropdown-menu .aa-suggestion .hit .badge-referer:nth-child(4),.admin-search .aa-dropdown-menu .aa-suggestion .hit .badge-referer:nth-child(5) {
    display: inline
}

.admin-search .aa-dropdown-menu .aa-suggestion .hit .secondary,.admin-search .aa-dropdown-menu .aa-suggestion .hit .session_count,.admin-search .aa-dropdown-menu .aa-suggestion .hit .location_data {
    color: #8994c6;
    font-size: .9em
}

.admin-search .aa-dropdown-menu .aa-suggestion .hit .primary {
    font-size: 1.1em
}

.admin-search .aa-dropdown-menu .aa-suggestion .hit .social_profile {
    font-size: .8em
}

.admin-search .aa-dropdown-menu .aa-suggestion.aa-cursor {
    background-color: #f8faff
}

.admin-search h4.tt-category {
    margin: 0;
    font-size: 400;
    color: white;
    background: #3e396b;
    padding: 5px 10px
}

.sign-up-infos {
    background: #fbfbfb;
    color: #777777
}

.sign-up-infos ul {
    line-height: 1.8em
}

.sign-up-infos h4 {
    color: #555555
}

.static .evenbg,.static .oddbg,.static section {
    padding: 32px 0 48px
}

.static .evenbg {
    background-color: white
}

.static .oddbg {
    background-color: #f8faff
}

.modal-hint {
    position: fixed;
    width: 380px;
    height: auto;
    top: 16px;
    right: 16px;
    background: white;
    padding: 2em 2em 1.5em;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0 16px 32px 0 rgba(62,57,107,0.2);
    border: 1px solid rgba(0,0,0,0.1);
    will-change: opacity, transform;
    opacity: 0;
    z-index: -1;
    visibility: hidden
}

.modal-hint h3 {
    margin-top: 0
}

.modal-hint .col-md-6 {
    text-align: center
}

.modal-hint .col-md-6 a {
    padding: 8px 0;
    display: inline-block;
    margin-right: 8px;
    color: #7485AA
}

.modal-hint .img-thumbnail {
    max-width: 100%;
    position: relative;
    display: inline-block
}

.modal-hint .icon {
    display: inline-block;
    max-width: 16px;
    max-height: 16px;
    fill: #667492;
    position: relative;
    top: 4px
}

.modal-hint .btn {
    width: 100%
}

.modal-hint #closeHintAssets {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    display: block
}

.modal-hint #closeHintAssets svg {
    width: 28px;
    height: 28px;
    padding: 8px
}

.modal-hint #closeHintAssets svg path {
    fill: #667492
}

.modal-hint #closeHintAssets:hover svg path {
    fill: #FF2060
}

.animated {
    animation-duration: 0.75s;
    animation-fill-mode: both
}

@keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }

    100% {
        transform: none
    }
}

.bounceInRight {
    animation-name: bounceInRight
}

.cm--item-block,.colored-tile {
    max-width: 120px;
    height: 120px;
    border-radius: 16px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
    position: relative
}

.cm--item-block.small,.colored-tile.small {
    width: 64px;
    height: 64px;
    border-radius: 8px
}

.cm--item-block img,.colored-tile img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.cm--item-block.block-green,.cm--item-block.tile-green,.colored-tile.block-green,.colored-tile.tile-green {
    background-image: linear-gradient(322deg, #29c9b2, #b7da46)
}

.cm--item-block.block-blue,.cm--item-block.tile-blue,.colored-tile.block-blue,.colored-tile.tile-blue {
    background-image: linear-gradient(135deg, #53ddec, #463d9d)
}

.cm--item-block.block-orange,.cm--item-block.tile-orange,.colored-tile.block-orange,.colored-tile.tile-orange {
    background-image: linear-gradient(140deg, #ffc003, #f02b2b)
}

.cm--item-block.block-red,.cm--item-block.tile-red,.colored-tile.block-red,.colored-tile.tile-red {
    background-image: linear-gradient(315deg, #ec4918, #e25d8d)
}

.cm--item-block.block-yellow,.cm--item-block.tile-yellow,.colored-tile.block-yellow,.colored-tile.tile-yellow {
    background-image: linear-gradient(134deg, #fad961, #f76b1c)
}

.cm--item-block.block-purple,.cm--item-block.tile-purple,.colored-tile.block-purple,.colored-tile.tile-purple {
    background-image: linear-gradient(138deg, #af84e3, #5071c7)
}

.cm--item-block.block-seaweed,.cm--item-block.tile-seaweed,.colored-tile.block-seaweed,.colored-tile.tile-seaweed {
    background-image: linear-gradient(135deg, #13c4a5, #10a4b8)
}

.cm--item-block.tile-lime,.colored-tile.tile-lime {
    background-image: linear-gradient(45deg, #5f8e3d 0%, #94be46 100%)
}

pre.al-snippet {
    box-sizing: border-box;
    line-height: initial;
    word-break: initial;
    word-wrap: initial;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
    display: inline-block;
    margin: initial !important;
    padding: 26px 26px 26px 58.5px;
    position: relative;
    line-height: 17px;
    font-size: 13px;
    white-space: pre-line
}

pre.al-snippet:before {
    content: '1 2 3 4 5 6 7 8';
    display: block;
    padding: 26px 0 !important;
    position: absolute;
    width: 3.5em;
    background: #FDFDFD;
    border-right: 1px solid rgba(0,0,0,0.1);
    top: 0;
    left: 0;
    z-index: 9;
    height: 100%;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    word-spacing: 3.5em;
    white-space: pre-line;
    line-height: 18.36px;
    font-size: 11.1px;
    text-align: center;
    color: #bbbbbb
}

pre.al-snippet code {
    margin: 0;
    padding: 0;
    font-weight: 500;
    white-space: inherit;
    font-family: 'Roboto Mono', roboto, sans-serif;
    font-size: 13px
}

pre.al-snippet[data-snippet-theme="light"] {
    border: solid 1px #d7d9de !important;
    background-color: white !important;
    color: #666666
}

pre.al-snippet[data-snippet-theme="light"] .sn-keyword {
    color: #00aaff
}

pre.al-snippet[data-snippet-theme="light"] .sn-operator {
    color: #f95faa
}

pre.al-snippet[data-snippet-theme="light"] .sn-property {
    color: #75de00
}

pre.al-snippet[data-snippet-theme="light"] .sn-variable {
    color: #75de00
}

pre.al-snippet[data-snippet-theme="light"] .sn-string {
    color: #eeba00
}

pre.al-snippet[data-snippet-theme="light"] .sn-comment {
    color: #bbbbbb
}

.quotes-holder .quote {
    display: block;
    font-size: 26px;
    font-style: italic;
    font-weight: lighter;
    line-height: 1.3em
}

.quotes-holder .quote p {
    color: #050f2c
}

.quotes-holder footer {
    margin: 16px 0
}

.quotes-holder footer p {
    color: #8995C7
}

.al-card {
    background-color: white;
    box-shadow: 0 2px 6px 0 rgba(5,15,44,0.4);
    padding: 40px 24px;
    position: relative;
    border-radius: 4px
}

.al-card.small-card .card-title,.al-card.small-card .card-icon,.al-card.small-card .card-text {
    vertical-align: middle
}

.al-card.small-card .card-title {
    color: #3e396b;
    font-size: 16px;
    font-weight: 800;
    padding: 0;
    margin: 0;
    opacity: 0.8;
    margin-bottom: 8px;
    text-transform: none
}

.al-card.small-card .card-icon svg {
    width: 72px
}

.al-card.small-card .card-text {
    font-size: 16px;
    line-height: 24px;
    color: #3e396b;
    opacity: 0.7
}

.al-card.cover-card {
    height: 240px;
    margin: 0 auto 24px;
    width: 240px;
    border-radius: 5px;
    overflow: hidden
}

.al-card.cover-card .card-background {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 0.3s ease;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.al-card.cover-card .card-background:after {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(5,15,44,0.5);
    transition: opacity 0.3s ease
}

.al-card.cover-card .card-icon {
    position: absolute;
    z-index: 12;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease
}

.card-border,.card-border-quote {
    position: relative
}

.card-border .card-border-line,.card-border-quote .card-border-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px
}

.card-border {
    height: 100%
}

.card-border:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    box-shadow: 0 5px 15px rgba(112,128,175,0.2);
    opacity: 0;
    transition: all 240ms ease-in-out;
    border-radius: 6px
}

.card-border.active:before,.card-border.active:after {
    opacity: 1
}

.card-border-media {
    overflow: hidden;
    min-height: 200px
}

.card-border-media .card-header {
    width: 100%;
    height: 100%;
    height: 228px;
    overflow: hidden;
    position: relative
}

.card-border-media .card-header img {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    will-change: opacity, mix-blend-mode;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px
}

@supports (mix-blend-mode: soft-light) {
    .card-border-media .card-header img {
        mix-blend-mode: soft-light;
        transition: opacity 0.2s ease, mix-blend-mode 0.2s ease
    }
}

@supports not (mix-blend-mode: soft-light) {
    .card-border-media .card-header img {
        opacity: 0.6
    }
}

@supports not (object-fit: cover) {
    .card-border-media .card-header img {
        height:auto;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

@supports (object-fit: cover) {
    .card-border-media .card-header img {
        object-fit:cover;
        object-position: center center
    }
}

.card-border-media .card-separator {
    height: 5px;
    width: 100%
}

.card-border-media.card-border-media-effect .card-header img {
    filter: grayscale(100%)
}

.card-border-media.card-border-media-effect:hover .card-header img {
    filter: grayscale(0)
}

 
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.highlight.plaintext code {
    color: white !important
}

.highlight .hll {
    background-color: #49483e
}

.highlight .c {
    color: #8191B1
}

.highlight .k {
    color: #66d9ef
}

.highlight .l {
    color: #ae81ff
}

.highlight .n {
    color: #f8f8f2
}

.highlight .o {
    color: #f92672
}

.highlight .p {
    color: #f8f8f2
}

.highlight .cm {
    color: #8191B1
}

.highlight .cp {
    color: #8191B1
}

.highlight .c1 {
    color: #8191B1
}

.highlight .cs {
    color: #8191B1
}

.highlight .ge {
    font-style: italic
}

.highlight .gs {
    font-weight: bold
}

.highlight .kc {
    color: #66d9ef
}

.highlight .kd {
    color: #66d9ef
}

.highlight .kn {
    color: #f92672
}

.highlight .kp {
    color: #66d9ef
}

.highlight .kr {
    color: #66d9ef
}

.highlight .kt {
    color: #66d9ef
}

.highlight .ld {
    color: #e6db74
}

.highlight .m {
    color: #ae81ff
}

.highlight .s {
    color: #e6db74
}

.highlight .na {
    color: #a6e22e
}

.highlight .nb {
    color: #f8f8f2
}

.highlight .nc {
    color: #a6e22e
}

.highlight .no {
    color: #66d9ef
}

.highlight .nd {
    color: #a6e22e
}

.highlight .ni {
    color: #f8f8f2
}

.highlight .ne {
    color: #a6e22e
}

.highlight .nf {
    color: #a6e22e
}

.highlight .nl {
    color: #f8f8f2
}

.highlight .nn {
    color: #f8f8f2
}

.highlight .nx {
    color: #a6e22e
}

.highlight .py {
    color: #f8f8f2
}

.highlight .nt {
    color: #f92672
}

.highlight .nv {
    color: #f8f8f2
}

.highlight .ow {
    color: #f92672
}

.highlight .w {
    color: #f8f8f2
}

.highlight .mf {
    color: #ae81ff
}

.highlight .mh {
    color: #ae81ff
}

.highlight .mi {
    color: #ae81ff
}

.highlight .mo {
    color: #ae81ff
}

.highlight .sb {
    color: #e6db74
}

.highlight .sc {
    color: #e6db74
}

.highlight .sd {
    color: #e6db74
}

.highlight .s2 {
    color: #e6db74
}

.highlight .se {
    color: #ae81ff
}

.highlight .sh {
    color: #e6db74
}

.highlight .si {
    color: #e6db74
}

.highlight .sx {
    color: #e6db74
}

.highlight .sr {
    color: #e6db74
}

.highlight .s1 {
    color: #e6db74
}

.highlight .ss {
    color: #e6db74
}

.highlight .bp {
    color: #f8f8f2
}

.highlight .vc {
    color: #f8f8f2
}

.highlight .vg {
    color: #f8f8f2
}

.highlight .vi {
    color: #f8f8f2
}

.highlight .il {
    color: #ae81ff
}

.highlight .gu {
    color: #8191B1
}

.highlight .gd {
    color: #f92672
}

.highlight .gi {
    color: #a6e22e
}

.rounded-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    padding: 0 20px;
    display: inline-block;
    border-radius: 50px;
    display: inline-block;
    height: 42px;
    line-height: 42px
}

#header.transparent-navbar {
    height: 80px;
    z-index: 1000;
    padding: 0 0 10px;
    margin-bottom: 0;
    background: transparent;
    will-change: transform, opacity;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 0
}

#header.transparent-navbar .navbar-header .logo {
    color: #3e396b
}

#header.transparent-navbar.productpage.navbar-fixed-top .logo {
    color: #3e396b
}

#header.transparent-navbar:not(.homepage):not(.productpage):not(.pricing-page):not(.customerpage) {
    box-shadow: 0 10px 40px 0 rgba(62,57,107,0.07),0 2px 9px 0 rgba(62,57,107,0.06);
    height: 80px;
    background-color: white !important
}

#header.transparent-navbar:not(.homepage):not(.productpage):not(.pricing-page):not(.customerpage) .navbar-header {
    height: 80px;
    line-height: 80px
}

#header.transparent-navbar:not(.homepage):not(.productpage):not(.pricing-page):not(.customerpage).navbar-fixed-top .navbar-header {
    height: 60px;
    line-height: 60px
}

#header.transparent-navbar:not(.homepage):not(.productpage):not(.pricing-page):not(.customerpage) .logo {
    height: 60px;
    line-height: 60px
}

#header.transparent-navbar:not(.homepage):not(.productpage):not(.pricing-page):not(.customerpage) .nav>li {
    padding: 0 6px
}

#header.transparent-navbar:not(.homepage):not(.productpage):not(.pricing-page):not(.customerpage) .nav>li.header-separator {
    padding-top: 0;
    line-height: 80px;
    height: 80px
}

#header.transparent-navbar:not(.homepage):not(.productpage):not(.pricing-page):not(.customerpage) .nav>li>a:not(.btn) {
    padding: 0 6px;
    height: 80px;
    line-height: 80px
}

#header.transparent-navbar.navbar-fixed-top {
    animation: fadeInDown 0.2s ease;
    height: 60px !important;
    position: fixed
}

#header.transparent-navbar.navbar-fixed-top .container .logo {
    height: 60px;
    line-height: 60px
}

#header.transparent-navbar.navbar-fixed-top .container .logo svg {
    vertical-align: inherit
}

#header.transparent-navbar.navbar-fixed-top .nav>li {
    padding: 0 6px
}

#header.transparent-navbar.navbar-fixed-top .nav>li.header-registration {
    height: 60px !important;
    line-height: 60px !important
}

#header.transparent-navbar.navbar-fixed-top .nav>li.header-separator {
    padding-top: 0;
    line-height: 60px !important;
    height: 60px !important
}

#header.transparent-navbar.navbar-fixed-top .nav>li>a:not(.btn) {
    padding: 0 6px;
    height: 60px !important;
    line-height: 60px !important
}
 



 
@media (max-width: 768px) {
    #header.transparent-navbar .nav>li>a.active:after {
        bottom:-4px
    }
}

.main_table {
      overflow-x: auto;
      border-radius: 20px;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
      background: white;
      padding: 30px;
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    thead th {
  padding: 18px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to bottom, #3e396b, #050f2c);
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

    tbody td {
      padding: 16px;
      text-align: left;
      font-size: 15px;
      border-top: 1px solid #e0e0e0;
      border-right: 1px solid #eaeaea;
    }

    tbody tr td:last-child {
      border-right: none;
    }

    tr:hover {
      background-color: #f0f9ff;
      transition: 0.3s ease;
    }

    a {
      color: #0052d4;
      text-decoration: none;
      font-weight: 500;
    }

    a:hover {
      text-decoration: underline;
    }

    /* Rounded corners for outermost cells */
    thead th:first-child {
      border-top-left-radius: 12px;
    }

    thead th:last-child {
      border-top-right-radius: 12px;
    }

    /* Responsive behavior */
    @media (max-width: 768px) {
      thead th, tbody td {
        padding: 12px;
        font-size: 14px;
      }
    }
    
    #header.transparent-navbar .nav > li > a {
    color: #ffffff !important;
}