#v1-url {
    display: none;
    position: relative;
    height: 50%;
    width: 50%;
    resize: both;
    opacity: 0;
}

/* nothing */
.navbar-nav.navbar-right {
    visibility: inherit;
}

#dynamic-traffic,
#deployment-distillation,
#carousel-container-xx,
#contact-us,
#why-kubefox {
    visibility: visible;
    /* padding-right: 1em !important; */
}

#intro {
    padding-right: 0em !important;
}

.header-xx {
    visibility: visible;
    /* padding-right: 1em !important; */
    /* max-width: 1308px !important; */
}

#splash-kubefox {
    visibility: visible;
    width: 95%;
    /* padding-right: .5em; */
}

#splash-banner-box {
    z-index: 0;
    fill: none;
    opacity: 0;
}

#splash-kubefox-banner {
    z-index: 1;
    fill-opacity: 1 !important;
    stroke-opacity: 1 !important;
    text-wrap: wrap !important;
    line-height: 0;
}

#thank-you {
    height: 50vw;
}

.container-x {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 5px; /* Adjust the value to add space between the image and text */
    align-items: center;
}

.container-product-info {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 5px !important; /* Adjust the value to add space between the image and text */
    align-items: center;
}

#kubefox-logo-products {
    visibility: visible;
    /* border: 4px solid rgb(250, 114, 211);
    background-color: aquamarine; */
}

.span-xx {
    transition: .25s;
}

.span-xx:hover {
    color: black !important;
    font-weight: bold;
    letter-spacing: .3px;
}

#splash-getting-started:hover,
#splash-learn-more:hover,
#splash-why-kubefox:hover,
#splash-kubefox-hasura:hover,
#splash-docs:hover{
    transition: .25s !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
}

#splash-getting-started,
#splash-learn-more,
#splash-why-kubefox,
#splash-kubefox-hasura,
#splash-docs {
    transition: .25s;
    cursor: pointer;
}

/* Get rid of funky underscore created by <a> tag */
a  {
    text-decoration: none !important;
}

/* carousel css */

/* .carousel-item-xx affects main carousel */
.carousel-item-xx {
    height: 35rem;
}

.row-xx {
    visibility: visible;
    /* height: 30% !important; */
}

#kubefox-products-svg {
    /* border: 4px solid rgb(114, 250, 125); */
    visibility: visible;
    /* position: relative; */
    margin: 0 auto;
    /* top: 0px; */
    /* left: 0px; */
    /* height: 25vw; */
    /* max-width: 1320px; */
    /* background-color: #4e4a4a; */
    width: 40%;
    height: 40%;
    /* transform: scale(1); */
    transform: translateX(.5rem);
    /* height: 35vw; */
    resize: both;
    /* border will show the viewport */
    /* border: 4px solid rgb(114, 250, 125); */
    z-index: -1;
}

#why-kubefox-svg {
    /* border: 4px solid rgb(114, 250, 125); */
    visibility: visible;
    /* position: relative; */
    margin: 0 auto;
    /* top: 0px; */
    /* left: 0px; */
    /* height: 25vw; */
    /* max-width: 1320px; */
    /* background-color: #4e4a4a; */
    width: 25%;
    height: 25%;
    /* transform: scale(1); */
    transform: translateX(.5rem);
    /* height: 35vw; */
    resize: both;
    /* border will show the viewport */
    /* border: 4px solid rgb(114, 250, 125); */
    z-index: -1;
}

/* #thank-you-svg-div {
    background-color: lightpink;
    z-index: 1;
} */

/* #thank-you-text {
    background-color: lightgoldenrodyellow;
} */

#thank-you-text-div {
    display: inline-flex;
    z-index: 1;
    /* background-color: lightblue; */
}
#product-info-text-div {
    display: inline-flex;
    z-index: 1;
    padding-left: 3rem;
    padding-top: 1rem;
    height: 100%;
    /* background-color: lightblue; */
}

#product-info-text {
    padding-top: 10px;
    margin-bottom: -12px !important;
}


#svg-thank-you-icon
{
    visibility: visible;
    /* position: relative; */
    margin: 0 auto;
    /* top: 0px; */
    /* left: 0px; */
    /* height: 25vw; */
    /* max-width: 1320px; */
    /* background-color: #4e4a4a; */
    width: 40%;
    height: 40%;
    /* height: 35vw; */
    resize: both;
    /* border will show the viewport */
    /* border: 4px solid rgb(114, 250, 125); */
    z-index: -1;
    transform: scale(1.3);
}

/* This is the form  */
#contact {
    display: block;
}

/* #kf-logo1 {
    position: absolute;
    top: 10%;
    left: 10%;
} */

#splash-kubefox-intro {
    /* display: inline-block; */
    /* flex-direction: column; */
    align-items: center;
    /* justify-content: center; */
    /* position: relative; */
    /* padding-left: 0em; */
    /* padding-right: 0em; */
    /* If browser doesn't support dynamic units, first value is used */
    /* height: 30vw;
    height: 30svw; */

    /* Was doing 95% width, then 30vw for height.  Changed to 23/70 below.      */
    /* The SVG is actually  284 x 96, so height is 34% of width (23/70 = .34).  */
    width: 100%;
    /* height: 50vw; */
    /* height: 35vw; */
    /* height: 50vw; */

    /* If browser doesn't support dynamic units, first value is used */
    /* (actually ended up liking percentage width better)        */
    /* width: 95vh; */
    /* width: 95svh; */
    /* width: 95%; */
    /* top: 0;
    left: 0; */
    z-index: -1;
    /* The background-color was just to enable visualization of the div  */
    /* background-color: #b2bbbb; */
    resize: both;
    opacity: 1;
    /* line-height: 0; */
    padding: 0px;
    /* padding-left: 0px !important; */

}

/* Badge SVG */
#badge-kf-intro {
    /* display: inline-block; */
    visibility: visible;
    /* position: relative; */
    margin: 0 auto;
    /* top: 0px; */
    /* left: 0px; */
    /* height: 25vw; */
    /* max-width: 1320px; */
    color: #4e4a4a;
    width: 100%;
    height: 100%;
    /* height: 35vw; */
    resize: both;
    /* border will show the viewport */
    border: none;
    z-index: -1;
    transform: scale(.95);
    stroke: black;
    /* background-image: url('../assets/diagrams/v10.svg'); */
}

.bird-cage {
    height: 100px;
    width: 100px;
    border: 1px solid green;
    margin-left: 150px;
}

/* #git_v3-repo-dep-group-1,
#git_v3-repo-dep-group-2,
#git_v2-repo-dep-group-1,
#git_v2-repo-dep-group-2,
#git_v2-repo-dep-group-2,
#git_v1-repo-dep-group-1,
#git_v1-repo-dep-group-2,
#git_v0-repo-dep-group-1,
#git_v0-repo-dep-group-2 {
    visibility: hidden;
} */


/* .git-v0-repo-dep,
.git-v1-repo-dep,
.git-v2-repo-dep,
.git-v3-repo-dep
{
    visibility: visible;
}

.git-v1-repo-dep {
    visibility: visible;
}

.git-v1 {
    visibility: visible;
    stroke: yellow;

} */


/* class of div container for svg120 */
.diagram-banner {
    /* display: inline-block; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* justify-content: center; */
    position: relative;
    /* padding-left: 0em; */
    /* padding-right: 0em; */
    /* If browser doesn't support dynamic units, first value is used */
    height: 10svw;
    height: 10vw;
    /* If browser doesn't support dynamic units, first value is used */
    /* (actually ended up liking percentage width better)        */
    /* width: 95vh; */
    /* width: 95svh; */
    /* top: 0;
    left: 0; */
    z-index: -1;
    max-width: 85vw;
    /* The background-color was just to enable visualization of the div  */
    /* background-color: lightgrey; */
    resize: both;
    opacity: 1;
    line-height: 0;
    background-color: none;
    white-space: normal !important;
}

/* h3 {
    font-size: 1vw !important;
} */

/* xs < 768 */
/* @media screen and (max-width: 767px) {
    body {
        font-size: 0.9em;
    }
} */

section {
    padding-top: 1vh;
    padding-bottom: 1vh;
}

/* Sets banner text attributes (for animations) */
#svg120-banner-text,
#svg144-banner-text {
    visibility: visible;
    font-size: 2.3vw !important;
    font-weight: 300;
}

/* this is a bit much and should be investigated */
.btn-xx {
    height: 1.6vw !important;
    width: 8vw !important;
    font-size: 1.5vw !important;
    justify-content: center !important;
    padding-left: .5vw !important;
    align-items: center !important;
    padding-bottom: 2.5vw !important;
}


/* I could not get font-size to take hold without !important */
/* -  */
/* sm */
@media screen and (max-width: 600px) {
    /* this is a bit much and should be investigated */
    .btn-xx {
        height: 1.4vw !important;
        line-height: 1.2vw !important;
        width: 12vw !important;
        font-size: 2.5vw !important;
        font-weight: bold;
        justify-content: center !important;
        padding-left: 1vw !important;
        align-items: center !important;
        padding-bottom: 2.4vw !important;
        padding-top: 1.2vw !important;
    }

    /* Sets banner text attributes (for animations) */
    #svg120-banner-text,
    #svg144-banner-text {
    visibility: visible;
    font-size: 2.8vw !important;
    font-weight: 300;
    }

}

    
@media screen and (max-width: 768px) {
    /* .h3-xx {
        font-size: 2.4vw !important;
    } */
    #svg120,
    #svg144 {
        max-width: 960px !important;
    }
    /* #kubefox-products-svg {
        transform: translateX(50px);
    } */



}

/* md */
@media screen and (max-width: 992px) {
    /* body {
        font-size: 1.2em;
    } */
    /* .h3-xx {
        font-size: 1.8vw !important;
    } */
    /* get rid of vert divider before icons in nav on collapse */
    .noshow-xx {
        display: none !important;
    }
    /* pull icons to the center on collapse */
    .center-xx {
        justify-content: center;
    }
    #svg120,
    #svg144 {
        max-width: 1140px !important;
    }
    /* #kubefox-products-svg {
        transform: translateX(2rem);
    } */

}

/* lg */
@media screen and (max-width: 1200px) {
    /* body {
        font-size: 1.3em;
    } */
    /* .h3-xx {
        font-size: 1.6vw !important;
    } */
    /* this did not work - set max width on #svg120, #svg144 */
    /* the issue likely is the max-width in the media being too low */
    #svg120,
    #svg144 {
        max-width: 1308px !important;
    }
    /* #kubefox-products-svg {
        transform: translateX(-2rem);
    } */

}

.button-div-blank {
    background-color: none;
}

.button-div-xx {
    position: relative;
    /* If browser doesn't support dynamic units, first value is used */
    /* height: 5vw;
    height: 5cqb; */
    /* If browser doesn't support dynamic units, first value is used */
    /* (actually ended up liking percentage width better)        */
    /* width: 95vh; */
    /* width: 95svh; */
    width: 75vw;
    max-width: 1600px;
    z-index: -1;
    /* The background-color was just to enable visualization of the div  */
    /* background-color: lightgrey; */
    resize: both;
    opacity: 1;
    line-height: 1;
    background-color: none;
    white-space: nowrap;
}

/* id of svg that contains diagram */
#svg120, #svg144 {
    display: block;
    visibility: visible;
    position: relative;
    margin-top: 0em;
    top: 0px;
    /* left: 0px; */
    /* height: 25vw; */
    /* max-width: 1320px; */

    /* The aspect ratio of the SVGs is .34 (h/w) */
    width: 90vw;
    max-width: 1800px;
    height: 31vw;
    resize: both;
    /* border will show the viewport */
    /* border: 2px solid greenyellow; */
    z-index: -1;
    /* background-image: url('../assets/diagrams/v10.svg'); */
}


/* class of div container for svg120 */
.revealy {
    /* display: inline-block; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* justify-content: center; */
    position: relative;
    /* padding-left: 0em; */
    /* padding-right: 0em; */
    /* If browser doesn't support dynamic units, first value is used */
    /* height: 30vw;
    height: 30svw; */

    /* Was doing 95% width, then 30vw for height.  Changed to 23/70 below.      */
    /* The SVG is actually  284 x 96, so height is 34% of width (23/70 = .34).  */
    width: 90vw;
    height: 31vw;

    /* If browser doesn't support dynamic units, first value is used */
    /* (actually ended up liking percentage width better)        */
    /* width: 95vh; */
    /* width: 95svh; */
    /* width: 95%; */
    /* top: 0;
    left: 0; */
    z-index: -1;
    /* The background-color was just to enable visualization of the div  */
    /* background-color: #b2bbbb; */
    resize: both;
    opacity: 1;
    line-height: 0;
    padding-left: 4vw !important;

}


/* id of svg tag that contains circle */
#svgxyz {
    display: inline-block;
    position: relative;
    /* original settings in comments */
    /* height: 15px;
    width: 15px; */
    /* following settings set the initial position of the circle */
    top: 0%;
    left: 0%;
    /* adjust size of circle based upon screen size */
    height: 1.5%;
    width: 1.5%;
    z-index: 6;
    /* height: 0;
    width: 0; */
}

/* id of svg tag that contains circle */
#svgabc, #svgdef {
    /* display: inline-block; */
    display: none;
    position: relative;
    visibility: hidden;
    /* original settings in comments */
    /* height: 15px;
    width: 15px; */
    /* following settings set the initial position of the circle */
    /* top: 0%;
    left: 0%; */
    /* adjust size of circle based upon screen size */
    height: 1.5%;
    width: 1.5%;
    z-index: 6;
    /* height: 0;
    width: 0; */
}

/* id of svg tag that contains circle */
#svghij, #svgklm {
    display: inline-block;
    position: relative;
    /* original settings in comments */
    /* height: 15px;
    width: 15px; */
    /* following settings set the initial position of the circle */
    /* top: 0%;
    left: 0%; */
    /* adjust size of circle based upon screen size */
    height: .5vh;
    width: .5vh;
    z-index: 6;
    /* height: 0;
    width: 0; */
}

/* circle  */
#circle1 {
    stroke: yellow;
    fill: yellow;
    z-index: 7;
}

/* div containing svgs */
.revealx {
    display: flexbox;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-left: 2em;
    padding-right: 2em;
    height: 50vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #666c6c;
    border: 2px solid greenyellow;
    opacity: 1;
}



#state-store-adapter,
#http-adapter,
#cron-adapter {
    fill: "#99ccff";
    stroke: "#82b366";
    fill-opacity: 1;
}

#order-worker-v1-dep,
#api-server-v1-dep,
#order-ui-v1-dep,
#api-server-v2-dep,
#review-v1-dep,
#order-ui-v2-dep
{
    fill: "#d5e8d4";
    stroke: "#82b366";
    /* fill: yellow; */
}

#order-worker-v1,
#api-server-v1,
#order-ui-v1,
#api-server-v2,
#order-ui-v2,
#review-v1
{
    fill: "#d5e8d4";
    stroke: "#82b366";
    fill-opacity: 1;
}

#api-server-v1-dep-text,
#order-ui-v1-dep-text,
#api-server-v2-dep-text,
#review-v1-dep-text,
#order-ui-v2-dep-text
{
    fill: yellow;
    fill-opacity: 1;
}

/* #order-worker-v1-dep-text
{
    color: rgb(255, 47, 224);
    opacity: 1;
} */

/* .v1-dep,
.v2-dep,
.v3-dep,
.v1-dep-text,
.v2-dep-text,
.v3-dep-text, */
/* .v1-comp-group,
.v2-comp-group,
.v3-comp-group,
.adapter-group,
.v1-path,
.v2-path,
.v3-path, */
.v1-group-dep,
.v2-group-dep,
.v3-group-dep {
    visibility: visible;
}

/* left this here - VERY IMPORTANT to understand that  */
/* . fill won't work dynamically without !important.   */
/* #order-worker-v1-text {
    fill: red !important;
} */

/* #api-server-v1-text,
#order-ui-v1-text,
#api-server-v2-text,
#order-ui-v2-text,
#review-v1-text
{
    fill: yellow !important;
    fill-opacity: 1;
} */

#order-worker-v1-api-server-v1-path,
#order-worker-v1-api-server-v2-path,
#http-adapter-api-server-v2-path,
#order-ui-v1-api-server-v2-path,
#api-server-v2-state-store-path,
#api-server-v2-order-ui-v2-path,
#http-adapter-order-ui-v2-path,
#order-ui-v2-review-v1-path,
#api-server-v2-review-v1-path,
#cron-adapter-order-worker-v1-path,
#api-server-v1-order-ui-v1-path,
#api-server-v1-state-store-path,
#http-adapter-api-server-v1-path,
#http-adapter-order-ui-v1-path
{
    visibility: visible;
}

/* .v3-path {
    stroke: red;
} */

#deployments-header-text {
    fill: purple;
    fill-opacity: 1;
}

#traffic-shaping-header-text,
#kubernetes-pods-header-text {
    color: white;
}

/* #http-adapter-text,
#cron-adapter-text,
#state-store-adapter-text
{
    color: green;
} */


/* #cron-adapter-text
{
    fill: green !important;
} */

.v1 {
    color: yellow;
}


/* #curve1 {
    stroke: red;
}

#my-square {
    stroke: greenyellow;
    fill: aquamarine;
    height: 20%;
    width: 20%;
} */

/* body {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    min-height: 150vh;
}
 */


/* #container {
    width: 100px;
    height: 100px;
    position: relative;
    background: yellow;
}

#animate {
    width: 50px;
    height: 50px;
    position: relative;
    background: red;
} */

/* body {
    background-color: white;
    display: grid;
    place-content: center;
    height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
} */

/* .asvg {
    height: 10%;
    width: 10%;
} */

/* .box {
    height: 50%;
    width: 50%;
} */


/* .bubbles {
    display: none;
} */