.Container {
    margin: 0 auto;
    max-width: 980px;
    width: 100%;
    overflow: hidden;
}

.Header {
    text-align: center;
    padding-top: 124px;
    padding-bottom: 40px;
}


.Header-title {
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 6px;
    color: rgb(0, 38, 92);
}

.Header-text {
    font-weight: normal !important;
    font-size: 18px;
    max-width: 425px;
    margin: 0 auto;
    color: rgb(102, 112, 131);
    /* color: rgb(0, 38, 92); */
}

.Header-text span {
    display: none;
}
.Header--Kubernetes #kubesText    { display: block; }
.Header--Docker #DockerText       { display: block; }
.Header--Rails #RailsText         { display: block; }
.Header--Node #NodeText           { display: block; }
.Header--Node #NodeText           { display: block; }
.Header--Full #StackText          { display: block; }
.Header--Case  #CaseText          { display: block; }
.Header--Features  #FeaturesText  { display: block; }
.Header--Changelog #ChangelogText { display: block; }

@media only screen and (min-width : 1025px) {
    .Header {
        padding-top: 174px;
        padding-bottom: 130px;
    }
    .Header-text {
        font-size: 22px;
    }
    .Header-title {
        font-size: 68px;
    }

    .Header--blog {
        /* background: transparent url('/assets/img/hero-blog.svg') no-repeat top center; */
        background-position: center 90px;
    }

    .Header--Kubernetes {
        /* background: transparent url('/assets/img/hero-kubes_1.svg') no-repeat top center; */
        background-position: center 60px;
    }

    .Header--Docker {
        /* background: transparent url('/assets/img/hero-docker_1.svg') no-repeat top center; */
        background-position: center 60px;
    }
    .Header--Full {
        /* background: transparent url('/assets/img/hero-fullstack_1.svg') no-repeat top center; */
        background-position: center 60px;
    }
    .Header--Case {
        /* background: transparent url('/assets/img/hero-casestudy_1.svg') no-repeat top center; */
        background-position: center 60px;
    }
    .Header--Changelog {
        /* background: transparent url('/assets/img/hero-changelog_1.svg') no-repeat top center; */
        background-position: center 60px;
    }
    .Header--Node {
        /* background: transparent url('/assets/img/hero-node_1.svg') no-repeat top center; */
        background-position: center 60px;
    }
    .Header--Rails {
        /* background: transparent url('/assets/img/hero-rails_1.svg') no-repeat top center; */
        background-position: center 60px;
    }
    .Header--Features {
        /* background: transparent url('/assets/img/hero-features_1.svg') no-repeat top center; */
        background-position: center 60px;
    }
}

/* Text with a background gradient */

.u-bgGrad {
    -webkit-background-clip:text;
    background-clip:text;
    background-image:linear-gradient(to right,var(--tw-gradient-stops));
    color:transparent
}

.u-inlineKubernetes,
.u-inlineDocker,
.gradient-blue {
 --tw-gradient-from:#6664df;
 --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(102,100,223,0));
 --tw-gradient-to:#4f9fff
}

.u-inlineChangelog,
.u-inlineNode,
.u-gradientGreen {
 --tw-gradient-from:#4a8bc5;
 --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(74,139,197,0));
 --tw-gradient-to:#2ac459
}

.u-inlineFeatures,
.u-inlineRails,
.u-gradientRed {
 --tw-gradient-from:#a54ac1;
 --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(165,74,193,0));
 --tw-gradient-to:#ff4f4f
}

.u-inlineCase,
.u-inlineFull,
.u-gradientPurple {
 --tw-gradient-from:#6664df;
 --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(102,100,223,0));
 --tw-gradient-to:#de4fff
}