.bard h1[id], .bard h2[id], .bard h3[id], .bard h4[id], .bard h5[id], .bard h6[id] {

        z-index: 0;

        margin-top: -7rem;

        padding-top: 7rem;

}

    .bard h2 {

        font-size: 1.875rem;

}

    .bard h3 {

        font-size: 1.5rem;

}

    .bard h4 {

        font-size: 1.25rem;

}

    .bard h5 {

        font-size: 1.125rem;

}

    .bard h6 {

        font-size: 1rem;

}

    .bard p {

        margin-bottom: 2.5rem;

}

    .bard h1, .bard h2, .bard h3, .bard h4, .bard h5, .bard h6 {

        margin-bottom: 1.5rem;

}

    .bard strong {

        font-weight: 700;

}

    .bard img {

        margin-bottom: 2.5rem;

        border-radius: 0.375rem;

        border-width: 1px;

}

    .bard .browser img {

        border-top-left-radius: 0px;

        border-top-right-radius: 0px;

        border-width: 0px;

}

    .bard ul {

        list-style-image: url(../images/list-bubble.svg);

        margin-left: 0px;

        margin-bottom: 2.5rem;

        list-style-type: disc;

    }

    .bard ul > :not([hidden]) ~ :not([hidden]) {

        --tw-space-y-reverse: 0;

        margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));

        margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));

        margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));

}

    .bard ul {

        padding-left: 1rem;

}

    .bard ul li {

        margin-bottom: 0.75rem;

        padding-left: 1rem;

}

    .bard ul li p:last-child {

        margin-bottom: 0px;

}

    .bard ol {

        margin-bottom: 2.5rem;

        list-style-type: decimal;

}

    .bard ol > :not([hidden]) ~ :not([hidden]) {

        --tw-space-y-reverse: 0;

        margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));

        margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));

        margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));

}

    .bard ol {

        padding-left: 1.25rem;

}

    .bard ol li {

        margin-bottom: 0.75rem;

        padding-left: 0.5rem;

}

    .bard ol li p:last-child {

        margin-bottom: 0px;

}

    .bard pre {
        max-height: 500px!important;

}

    .bard pre {

        margin-bottom: 2.5rem;

        white-space: pre-wrap;

        border-radius: 0.375rem;

        --tw-bg-opacity: 1;

        background-color: rgba(31, 41, 55, var(--tw-bg-opacity));

        padding: 1.25rem;
        overflow-y: auto;

}

    .bard .m-zero {

        margin: 0px !important;

}

    .bard a:not(.btn) {

        -webkit-text-decoration-line: underline;

                text-decoration-line: underline;

}

    .bard a:not(.btn):hover {

        --tw-text-opacity: 1;

        color: rgba(79, 70, 229, var(--tw-text-opacity));

}

    .bard .intro {

        margin-bottom: 2.5rem;

        font-size: 1.5rem;

        line-height: 2rem;

}

    .bard .intro:first-child:first-letter {

        float: left;

        margin-right: 0.5rem;

        font-size: 4.5rem;

        font-weight: 700;
            line-height: 4rem;

}

    .bard table {

        display: block;

        overflow-x: auto;

}

    @media (min-width: 640px) {

        .bard table {

                display: table;

        }

}

    .bard table th {

        padding-left: 1.25rem;

        padding-right: 1.25rem;

        padding-top: 1rem;

        padding-bottom: 1rem;

        text-align: left;

        vertical-align: top;

        font-weight: 600;
            box-shadow: inset -1px 0 1px -1px gray;

}

    .bard table th:last-child {
                box-shadow: inset 0 0 0 0 #FFFFFF;
            }

    .bard table th p:last-child {

        margin-bottom: 0px;

}

    .bard table td {

        padding-left: 1.25rem;

        padding-right: 1.25rem;

        padding-top: 0.75rem;

        padding-bottom: 0.75rem;

        text-align: left;

        vertical-align: top;

        font-size: .875rem;
            box-shadow: inset -1px 0 1px -1px gray;

}

    .bard table td:last-child {
                box-shadow: inset 0 0 0 0 #FFFFFF;
            }

    .bard table td p {

        margin-bottom: 1rem;

}

    .bard table td p:last-child {

        margin-bottom: 0px;

}

    .bard table tbody tr {

        border-top-width: 1px;

}

    .bard table tbody tr:hover {

        background-color: rgba(224, 231, 255, var(--tw-bg-opacity));

        --tw-bg-opacity: 0.3;

}

    .bard table tbody tr:first-child {

        border-top-width: 0px;

}

    .bard .quote p:last-child {

        margin-bottom: 0px;

}

    .bard .quote img {

        margin-bottom: 0px;

}

#navbar-scrollspy a.active {

        --tw-text-opacity: 1;

        color: rgba(79, 70, 229, var(--tw-text-opacity));

}

.message p {

        margin-bottom: 0px;

}

.range {
    background-image: linear-gradient(#beebef, #beebef);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 0.5rem;
    width: 100%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
    outline: 2px solid transparent;
    outline-offset: 2px;

}

/* Input Thumb */

.range::-webkit-slider-thumb {
    /*box-shadow: 0 0 2px 0 #555;*/

    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
    /*background-image: url("/images/icons/holder.svg");*/
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    height: 2rem;
    width: 2rem;
    cursor: ew-resize;
    -webkit-appearance: none;
            appearance: none;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgba(58, 180, 191, var(--tw-bg-opacity));
    -webkit-transition-property: all;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

.range::-moz-range-thumb {
    /*box-shadow: 0 0 2px 0 #555;*/

    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    height: 2rem;
    width: 2rem;
    cursor: ew-resize;
    -moz-appearance: none;
         appearance: none;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgba(58, 180, 191, var(--tw-bg-opacity));
    -moz-transition-property: all;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

.range::-ms-thumb {
    /*box-shadow: 0 0 2px 0 #555;*/

    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    height: 2rem;
    width: 2rem;
    cursor: ew-resize;
    appearance: none;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgba(58, 180, 191, var(--tw-bg-opacity));
    -ms-transition-property: all;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

.range::-webkit-slider-thumb:hover {

        --tw-bg-opacity: 1;

        background-color: rgba(0, 163, 177, var(--tw-bg-opacity));

}

.range::-moz-range-thumb:hover {

        --tw-bg-opacity: 1;

        background-color: rgba(0, 163, 177, var(--tw-bg-opacity));

}

.range::-ms-thumb:hover {

        --tw-bg-opacity: 1;

        background-color: rgba(0, 163, 177, var(--tw-bg-opacity));

}

/* Input Track */

.range::-webkit-slider-runnable-track  {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.range::-moz-range-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.range::-ms-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.slider-tooltip {

        position: absolute;

}

.slider-tooltip span {

        position: absolute;

        left: 6px;

        top: -8px;

        display: block;

        height: 1.5rem;

        width: 3.5rem;

        border-radius: 0.375rem;

        --tw-bg-opacity: 1;

        background-color: rgba(58, 180, 191, var(--tw-bg-opacity));

        text-align: center;

        font-size: .875rem;

        font-weight: 700;

        line-height: 1.5rem;

        --tw-text-opacity: 1;

        color: rgba(255, 255, 255, var(--tw-text-opacity));
        transform: translate(-50%, 0);

}

.slider-tooltip span:before {
             content: "";
             position: absolute;
             width: 0;
             height: 0;
             border-top: 6px solid #3ab4bf;
             border-left: 5px solid transparent;
             border-right: 5px solid transparent;
             top: 100%;
             left: 50%;
             margin-left: -5px;
             margin-top: -1px;
        }

.dev-docs-cta {
    background-color: #FBFBFC;
    height: 80px;
    margin-top: 20px;
    border-radius: 6px;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;

/* 320 - 425 = img pequena, fonte menor */
/* 426 - 1023 = img grande, fonte maior */
}

/* 1024 + = img pequena, fonte menor */

.dev-docs-cta p {
        padding-left: 1.5rem;
        font-weight: 400;
    }

@media (min-width: 320px) {

    .dev-docs-cta {
        
        background-image: url("../mailersend-website/integrations/build-banner/integration-dev-docs-bg.png");
    
    }

        .dev-docs-cta p {
            max-width: 220px;
        }


}

@media (min-width: 640px) {

    .dev-docs-cta {

        background-image: url("../mailersend-website/integrations/build-banner/integration-dev-docs-bg-lg.png");

    }

        .dev-docs-cta p {
            max-width: 100%;
            font-size: 1rem;
        }

}

@media (min-width:1024px) {

    .dev-docs-cta {

        background-image: url("../mailersend-website/integrations/build-banner/integration-dev-docs-bg.png");

    }

        .dev-docs-cta p {
            max-width: 220px;
            font-size: 0.875rem;
        }

}

/* Video block */

@keyframes spin {
    to { transform: rotate(360deg); }
}

.stroke-dotted {
    opacity: 0;
    stroke-dasharray: 4,5;
    stroke-width: 1px;
    transform-origin: 50% 50%;
    animation: spin 4s infinite linear;
    transition: opacity 1s ease,
    stroke-width 1s ease;
}

.stroke-solid {
    stroke-dashoffset: 0;
    stroke-dashArray: 300;
    stroke-width: 4px;
    transition: stroke-dashoffset 1s ease,
    opacity 1s ease;
}

#hero-video #play-video .stroke-dotted {
    stroke-width: 4px;
    opacity: 1;
}

#hero-video #play-video .stroke-solid {
    opacity: 0;
    stroke-dashoffset: 300;
}

#hero-video #play-video .icon {
    transform: scale(1.05);
}

@media (min-width: 1024px) {
    .lg\:h-7\.5 {
        height: 1.875rem;
    }
}

.flex-basis-full {
    flex-basis: 100%;
}

@media (min-width: 1024px) {
    .lg\:flex-basis-auto {
        flex-basis: auto;
    }
    .lg\:flex {
        display: flex!important;
    }
}

/* Content carousel */

.wrapper.move1 {
     top:-100%;
}

.wrapper.move2 {
     top:-200%;
}

.wrapper.move3 {
     top:-300%;
}

.wrapper.move4 {
     top:-400%;
}

.wrapper.move5 {
     top:-500%;
}