@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700");

@keyframes rotate {
    from {
        transform: rotate(0deg) translate(-10px) rotate(0deg)
    }
    to {
        transform: rotate(360deg) translate(-10px) rotate(-360deg)
    }
}

@keyframes pulsate-fwd {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes rotate-scale-up {
    0% { transform: scale(1) rotateZ(0); }
    50% { transform: scale(2) rotateZ(180deg); }
    100% { transform: scale(1) rotateZ(360deg); }
}

a, a:hover {
    color: #333;
}

.bg-primary { background-color: #5e72e4 !important }
.bg-secondary { background-color: #091A3D !important }
.bg-light { background-color: #f9f9f9 !important }
.bg-white { background-color: #fff !important }
.bg-dark { background-color: #1D1C1D !important }

.btn,
.navbar .navbar-nav>a.btn {
    font-weight: 600;
    font-size: .9rem;
    border-radius: .25rem;
    padding: .5rem 1rem;
    transition: all 150ms linear
}

.btn:hover,
.btn:focus,
.navbar .navbar-nav>a.btn:hover,
.navbar .navbar-nav>a.btn:focus {
    outline: 0 !important
}

.btn:active,
.btn.active,
.navbar .navbar-nav>a.btn:active,
.navbar .navbar-nav>a.btn.active {
    box-shadow: none;
    outline: 0 !important
}

.btn.btn-lg,
.navbar .navbar-nav>a.btn.btn-lg {
    font-size: 1.25rem;
    border-radius: .3rem;
    padding: .5rem 1.2rem
}

.btn-primary {
    background-color: #5e72e4;
    border: 1px solid #5e72e4
}

.btn-primary:not(:disabled):hover,
.btn-primary:not(:disabled):focus,
.btn-primary:not(:disabled):active {
    background-color: #5e72e4;
    border: 1px solid #5e72e4;
    box-shadow: none
}

a:not(.nav-link):not(.navbar-brand):not(.btn) {
    color: #1264A4;
    font-weight: 500;
    text-decoration: none
}

a:not(.nav-link):not(.navbar-brand):not(.btn):hover {
    color: #1264A4;
    border-bottom: 1.5px solid #1264A4
}

body {
    font-weight: 400;
    font-family: "Raleway", sans-serif;
    color: #282828
}

b {
    font-weight: 700
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: #212529
}

.display-1, .display-2, .display-3, .display-4 {
    font-weight: 800
}

.display-2 {
    font-size: 2.7rem !important;
}

.icon {
    position: relative;
    top: .2em
}

.navbar {
    padding: 1.2rem 1rem
}

.navbar .navbar-brand {
    font-weight: 800
}

.navbar .nav-link {
    font-weight: 500;
    opacity: .9
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(33, 37, 41, 0.9)
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:active,
.navbar-light .navbar-nav .nav-link:focus {
    color: #212529
}

.bubble,
.bubble.bubble-bottom-right,
.bubble.bubble-bottom-left,
.bubble.bubble-top-right,
.bubble.bubble-top-left {
    width: 1.2rem;
    height: 1.2rem;
}

.bubble,
.bubble.bubble-bottom-left {
    border-radius: 50% 50% 50% 0%
}

.bubble.bubble-bottom-right {
    border-radius: 50% 50% 0% 50%
}

.bubble.bubble-top-right {
    border-radius: 50% 0% 50% 50%
}

.bubble.bubble-top-left {
    border-radius: 0% 50% 50% 50%
}

.rotate-bubble-x1 { position: absolute; animation: rotate 4s linear infinite }
.rotate-bubble-x2 { position: absolute; animation: rotate 6s linear infinite }
.rotate-bubble-x3 { position: absolute; animation: rotate 8s linear infinite }
.rotate-bubble-x4 { position: absolute; animation: rotate 10s linear infinite }

.footer-1 {
    padding: 2rem 0rem 1rem
}

.footer-1 .copyright {
    padding-top: .5rem
}

.footer-1 .copyright p {
    padding: .5rem
}

/* === Page-specific (demo.css) === */

.space { margin-top: 5rem }

.index .section { margin-top: 5rem }
.index .section .header { margin-top: 4rem }
.index .section .component { margin-top: 2rem }

.index .bubbles {
    position: relative;
    width: 100%
}

.index .bubbles .bubble-1 { top: 32rem; left: 2rem }
.index .bubbles .floating-icon-1 { top: 24rem; left: 15rem }
.index .bubbles .floating-icon-2 { top: 13rem; left: 7rem }
.index .bubbles .floating-icon-3 { top: 13rem; right: 7rem }
.index .bubbles .floating-icon-4 { top: 21rem; left: 4rem }
.index .bubbles .floating-icon-5 { top: 16rem; left: 20rem }
.index .bubbles .floating-icon-6 { top: 16rem; right: 20rem }
.index .bubbles .floating-icon-7 { top: 24rem; right: 15rem }
.index .bubbles .floating-icon-8 { top: 21rem; right: 4rem }

.index .page-hero { padding: 3rem 1rem }
.index .page-hero .credits { margin-top: 6rem }

.index .page-hero a {
    margin-top: 3rem !important;
    background-color: #6333ff;
    border: 1px solid #6333ff;
    color: white;
}

.index .page-hero a:hover {
    background-color: #6333ff;
    border: 1px solid #6333ff;
    color: white;
}

.index .intro .desc { padding: 1rem 0rem 3rem }

.index .documentation { padding: 2rem .9rem; margin-top: 5rem; }
.index .download { margin: 5rem 0; }

@media screen and (min-width: 768px) {
    .index .page-hero { padding: 6rem 0rem 9rem }
    .index .credits { margin-top: 12rem }
}

.documentation .content h2 { margin-top: 4rem }
.documentation .content p { max-width: 650px }

@media screen and (min-width: 1580px) {
    .index .bubbles .floating-icon-1 { left: 29rem }
    .index .bubbles .floating-icon-2 { left: 21rem }
    .index .bubbles .floating-icon-3 { right: 21rem }
    .index .bubbles .floating-icon-4 { left: 18rem }
    .index .bubbles .floating-icon-5 { left: 34rem }
    .index .bubbles .floating-icon-6 { right: 34rem }
    .index .bubbles .floating-icon-7 { right: 29rem }
    .index .bubbles .floating-icon-8 { right: 18rem }
}

/* === Site-specific === */

#intro-text {
    margin: 2rem 0rem;
    font-size: 1.2rem;
}

.link-btn,
.link-btn:hover {
    background-color: #6333ff !important;
    border: 1px solid #6333ff !important;
    color: white !important;
}

.features {
    margin-top: 4rem;
}

#twitter-quotes-headline {
    margin-top: 1.5rem;
}

.slick-next:before, .slick-prev:before {
    color: #333 !important;
}

.navbar-nav a, .navbar-nav a:hover {
    color: #333 !important;
    text-decoration: none !important;
}

.navbar-nav {
    margin-left: 20px;
}

.intro .section {
    margin-top: 0 !important;
}

.index .intro {
    padding-top: 3rem;
}

#logo-icon {
    height: 30px;
    margin-right: 10px;
    vertical-align: top;
}

.logo-carousel .slick-slide {
    margin: 0px 28px;
}

.logo-carousel {
    overflow: inherit;
}

.logo-carousel .slick-slide img {
    height: 44px;
}

.logo-carousel .slick-track::before,
.logo-carousel .slick-track::after {
    display: table;
    content: '';
}

.logo-carousel .slick-track::after {
    clear: both;
}

.logo-carousel .slick-track {
    padding: 1rem 0;
}

.logo-carousel .slick-loading .slick-track {
    visibility: hidden;
}

.logo-carousel .slick-slide.slick-loading img {
    display: none;
}

.logo-carousel .slick-slide.dragging img {
    pointer-events: none;
}

.logo-carousel .slick-loading .slick-slide {
    visibility: hidden;
}

.logo-carousel .slick-arrow {
    position: absolute;
    top: 50%;
    background: url(https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/arrow.svg?sanitize=true) center no-repeat;
    color: #fff;
    filter: invert(77%) sepia(32%) saturate(1%) hue-rotate(344deg) brightness(105%) contrast(103%);
    border: none;
    width: 2rem;
    height: 1.5rem;
    text-indent: -10000px;
    margin-top: -16px;
    z-index: 99;
}

.logo-carousel .slick-arrow.slick-next {
    right: -40px;
    transform: rotate(180deg);
}

.logo-carousel .slick-arrow.slick-prev {
    left: -40px;
}

.logo-carousel {
    display: none;
}

.logo-carousel.slick-initialized {
    display: block;
}

.feature img {
    box-shadow: 0 0 35px -4px rgba(26, 21, 18, 0.20);
}

.feature-container {
    margin-bottom: 5rem;
}

@media screen and (max-width: 768px) {
    .display-2 {
        font-size: 2.5rem !important;
    }
    #top-text-subtitle {
        font-size: 1.3rem;
        margin-top: 17px;
    }
    #trusted-by-text {
        font-size: 1.8rem;
        padding: 5px;
    }
    .feature-text {
        margin-top: 2rem;
    }
    .feature-container {
        margin-bottom: 2rem !important;
    }
    .features {
        margin-top: 1rem;
    }
    .logo-carousel .slick-arrow {
        width: 1rem;
        height: 1rem;
    }
}

@media only screen and (max-height: 575.98px) and (orientation: landscape) {
    .btn.btn-lg, .navbar .navbar-nav > a.btn.btn-lg {
        font-size: 1rem;
    }
    .credits {
        font-size: 0.8rem;
    }
}