:root{
    --header-height: 100px;
    --palate-color1: #274c80;
    --palate-color2: #066bb5;
    --palate-color3: #066bb5;   
    --palate-color4: #ffffff;
    --palate-color5: #ffde59;
    --palate-color6: #f2f5f7;
    --palate-color7: #fafbfc;
    --palate-color8: #ffffff;

    --palate-button1color: #066bb5;
    --palate-button1color_hover: #0693e3;
    --palate-button2color: #ffde59;
    --palate-button2color_hover: #ffe885;

    --button-border-radius: 10px;

    --header-height: 80px;
}

/*Text settings*/
body{
    font-family: "Figtree", sans-serif;
    font-size: 16px; 
}
h1{
    font-size: 48px;
    font-weight: bold;
    color: var(--palate-color2);
}
h2{
    font-size:24px;
    font-weight: bold;
    color: black;
}
p{
    font-size:16px;
    font-weight:normal;
    color:black;
}
a{
    color:var(--palate-color2);
}
li{
    margin-bottom:10px;
}

/*Buttons*/
button{
    font-family: "Figtree", sans-serif;
}
.planblock_button_blue{
    margin-top:20px;
    color:white;
    border:none;
    border-radius:var(--button-border-radius);
    background-color: var(--palate-button1color);
    padding-top:20px;
    padding-bottom:20px;
    width:100%;
    font-size:24px;
    font-weight:bold;
    cursor:pointer;
}
.planblock_button_blue:hover{
    background-color: var(--palate-button1color_hover);
}

.planblock_button_yellow{
    margin-top:20px;
    color:var(--palate-color1);
    border:none;
    border-radius:var(--button-border-radius);
    background-color: var(--palate-color5);
    padding-top:20px;
    padding-bottom:20px;
    width:100%;
    font-size:24px;
    font-weight:bold;
    cursor:pointer;
}
.planblock_button_yellow:hover{
    background-color: var(--palate-button2color_hover);
}
.whiteblue_button{
    margin-top:20px;
    color:var(--palate-color1);
    border:solid white 2px;
    border-radius:var(--button-border-radius);
    background-color: white;
    padding-top:20px;
    padding-bottom:20px;
    width:180px;
    margin-right:20px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
}
.bluewhite_button{
    margin-top:20px;
    color:white;
    border:solid white 2px;
    border-radius:var(--button-border-radius);
    background-color: rgba(0,0,0,0);
    padding-top:20px;
    padding-bottom:20px;
    width:180px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
}
.cu_headerbutton{
    position:absolute;
    right:0%;
    top:50%;
    transform:translate(0%,-50%);
    color:white;
    border:none;
    border-radius:var(--button-border-radius);
    background-color: var(--palate-button1color);
    min-width:120px;
    padding:10px;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
}
.cu_headerbutton:hover{
    background-color: var(--palate-button1color_hover);
}



/*Main blocks*/
.outercontainer{
    position:absolute;
    top:0px;
    left:0vw;
    width:99vw;
    
    
    overflow-x:hidden;
    overflow-y:auto;
}
.oc2{
    position:absolute;
    top:0px;
    left:0px;
    width:100vw;
    
    
    overflow:hidden;
   
}

.main{
    position:relative;
    top:0px;
    left: 0%;
    width:100%;
    
    min-height:1200px;
    overflow:hidden;
    background-color:var(--palate-color4);
    z-index:1;
}

.sticky{
    position: sticky;
    top: 0px;
}

.block{
    position:relative;
    width:100%;
    min-height:100px;
    left:0%;
    z-index:1;
    text-align:center;
}
.textcontainer{
    position:relative;
    padding-top:20px;
    width:95%;
    left:50%;
    transform:translate(-50%,0%);
}

/*Blockmodifiers*/
.background-blue{
    background-color: var(--palate-color2);
}
.background-white{
    background-color: white;
}
.whitetext{
    color:white;
}

/*Header*/
.header {
    position: sticky;
    top: 0;
    width:100%;
    height:var(--header-height);
    background-color:white;
    z-index:100;
}
#header_inner{
    position:relative;
    top:0%;
    left:50%;
    height:100%;
    transform:translate(-50%,0%);    
    width: 90%;
}
#header_left{
    position: absolute;
    top:50%;
    left: 1%;
    width: 10vw;
    height:auto;
    transform:translate(0%,-50%);
    z-index:100;
}

#header_center{
    position:absolute;
    top:50%;
    left:50%;
    width:60vw;
    min-height:0px;
    max-height:70px;
    transform:translate(-50%,-50%);
    visibility:visible;
    z-index:100;
}
#header_right{
    position: absolute;
    top:50%;
    left: calc(99% - 10vw);
    width: 10vw;
    height:auto;
    transform:translate(0%,-50%);
    z-index:100;
    visibility:visible;
}
#header_right_alt{
    position: absolute;
    top:50%;
    left: calc(99% - 10vw);
    width: 10vw;
    height:auto;
    transform:translate(0%,-50%);
    z-index:-1;
    visibility:hidden;
}
.pticon{
    width:100%;
    height:calc(10vw * 437/1454);
}
#header_menu{
    position: absolute;
    left:50%;
    transform: translate(-50%,0%);
    top: calc(var(--header-height) + 0px);
    min-height:0px;
    max-height:200px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:20px;
    padding-right:20px;
    transition:.3s;
    width:50vw;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    background-color:white;
    visibility:visible;
    z-index:99;
}

.headermenu{
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:left;
}
.headermenuitem{
    position:relative;
    background-color:rgba(0,0,0,0);
    border:none;
    margin-top:5px;
    margin-bottom:5px;
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
    cursor:pointer;
    color:var(--palate-color1);
    width:150px;
}
.headermenuitem:hover{
    color:var(--palate-button1color_hover);
}
.headermenusublink{
    color:var(--palate-color1);
    text-decoration:none;
    margin-bottom:10px;
}
.headermenusublink:hover{
    color:var(--palate-button1color_hover);
}
a.headermenu{
    font-size:20px;
    font-weight:bold;
    text-decoration:none;
    color:var(--palate-color1);
}
.headermenudesc{
    font-size:16px;
    font-weight:normal;
    color:black;
}
.ddmenu{
    width:100%;
    min-height:0px;
    max-height:1000px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
}
.ddmenuitem{
    position:relative;
    width:200px;
    margin:20px;
    height:auto;
}

a.menu_alt{
    color:white;
    text-decoration:none;
}
a.menu_alt:hover{
    color:var(--palate-color3);
}



/*Footer*/
.footer{
    position:sticky;
    min-height:200px;
    width:100%;
    bottom:0px;
    padding-top:20px;
    background-color:var(--palate-color6);
    z-index:1;
}
.footerptiton{
    width:10vw;
    height:auto;
}
.footer_topgrid{
    position:relative;
    left:2vw;
    width:96vw;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    min-height:200px;
}
.footer_gridleft{
    position:relative;
    width:400px;
    flex-grow:1
}
.footer_gridright{    
    position:relative;    
    width:calc(100% - 400px);
    height:auto;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:right;  
    flex-grow:1
}
.footer_icongrid1{
    margin-top:20px;
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
}
.footer_icongrid2{
    margin-top:20px;
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
}
.footericon{
    margin-top:5px;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;
    position:relative;
    height:60px;
    width:auto;
}
.footericon_taller{
    margin-top:5px;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;
    position:relative;
    height:80px;
    width:auto;
}

.footer_gridrightcol{
    position:relative;
    width:190px;
    margin-left:20px;
    margin-right:20px;
    
}
a.footer_primarylink{
    color:var(--palate-color1);
    font-size:20px;
    font-weight:bold;
    text-decoration:none;
}
a.footer_primarylink:hover{
    color:var(--palate-color2);
}
a.footer_sublink{
    color:black;
    font-size:14px;
    font-weight:normal;
    text-decoration:none;
    margin-bottom:10px;
}
a.footer_sublink:hover{
    color:var(--palate-button1color_hover);
}
.footer_bottom{
    position:relative;
    width:100%; 
    min-height:50px;    
    border-top:solid lightgray 1px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:stretch;
}
.footer_bottom_left{
    position:relative;
    margin-top:10px;    
    text-align:left;
    flex-grow: 1;
}
.footer_bottom_right{
    position:relative;
    margin-top:10px;
    text-align:right;

}
.dcaa{
    font-size:20px;
    font-weight:bold;
}
.social{
    position:relative;
    width:35px;
    height:35px;
    margin-top: -10px;
    margin-left:5px;
    margin-right:5px;
    background-color:rgba(0,0,0,0);
    border:none;
    cursor:pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
}

.s_bluesky{
    background-image:url("../images/square-bluesky-brands-solid-full.svg");
}
.s_facebook{
    background-image:url("../images/square-facebook-brands-solid-full.svg");
}
.s_instagram{
    background-image:url("../images/square-instagram-brands-solid-full.svg");
}
.s_linkedin{
    background-image:url("../images/square-linkedin-brands-solid-full.svg");
}
.s_twitter{
    background-image:url("../images/square-x-twitter-brands-solid-full.svg");
}
.s_youtube{
    background-image:url("../images/square-youtube-brands-solid-full.svg");
}

.centeredtext{
    text-align:center;
}

/*Plan columns and lead in text*/

.callistoicon{
    margin-top:90px;
    position:relative;
    left:50%;
    transform:translate(-50%,0%);
    width:30vw;
   
    margin-bottom:90px;
    height:calc(30vw * 178/540);
}
.poppara{
    margin:30px;
    font-size:24px;
}
.zingercontainer{
    position:relative;
    left:50%;
    transform:translate(-50%,0%);
    max-width:90%;
    border:none;
    border-radius:20px;
    /*background-color:white;*/
    font-weight:bold;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-evenly;
    margin-top:20px;
    margin-bottom:20px;
}
.zinger{
    position:relative;
    top:0px;
    width:450px;
    height:140px;
    font-size:32px;
    margin-top:5px;
    margin-bottom:5px;
    position:relative;
    color:white;
    padding:20px;
    
}
.zingersub{
    position:relative;
    bottom:0px;
    color:white;
    font-size:18px;
}
a.zsub{
    color:white;
}
a.zsub:hover{
    color:var(--palate-button2color);
}
.productcontainer{
    position:relative;
    max-width:900px;
    left:50%;
    transform:translate(-50%,0%);
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-evenly;
    
}
.productcolumn{
    position:relative;
    background-color:white;
    border-radius:20px;
    min-height:200px;
    width:300px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    padding:40px;
}

.producttitle{
    margin-top:0px;
    font-size:24px;
    font-weight:bold;
    color:black;
    text-align:center;
}
.productprice{
    margin-top:20px;
    font-size:48px;
    font-weight:bold;
    color:black;
    text-align:center;
}
.userscale{
    margin-top:10px;
    font-size:20px;
    font-family: "Figtree", sans-serif;
    font-weight:normal;
    color:black;
    text-align:center;
}
.userscale select{
    margin-top:0px;
    font-size:20px;
    font-family: "Figtree", sans-serif;
    font-weight:normal;
    color:black;
    border:none;
    text-align:center;
}
.userscale select:focus{
    border:none;
}

.pricesub{
    margin-top:20px;
    font-size:12px;
    font-weight:normal;
    color:black;
    text-align:center;
}

.product_shortdesc{
    margin-top:20px;
    font-size:16px;
    width:100%;
    font-weight:normal;
    color:black;
    text-align:center;
    border-bottom: solid lightgray 1px;
}
.productfeatures{
    margin-top:20px;
    font-size:16px;
    line-height:24px;
    width:100%;
    font-weight:normal;
    color:black;
    text-align:left;
}

/*Keyfeatures flex*/
.kfflexcontainer{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-evenly;
}
.kfflextext{
    width:400px;
}
.kfflexgraphic{
    width:300px;
    text-align:center;
}
h2.kfflex{
    margin-bottom:-10px;
}
.kfflexicon{
    height:75%;
    width:auto;    
}

/*Addons*/
.popadd{
    margin:30px;
    font-size:28px;
}
.addoncontainer{
    position:relative;
    width:97%;
    left:1.5%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-evenly;
}

.addoncard{
    position:relative;
    background-color:white;
    border-radius:20px;
    border:solid lightgray 1px;
    min-height:200px;
    width:400px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    padding-left:40px;
    padding-right:40px;
    padding-top:20px;
    padding-bottom:20px;
    text-align:center;
}

.addoncardicon{
    position:relative;
    left:50%;
    transform:translate(-50%,0%);
    height:50px;
    width:50px;
}
.addoncardtitle{
    position:relative;
    margin-top:20px;
    font-size:24px;
    color:black;
    font-weight:bold;
    
}
.addoncardshortdesc{
    position:relative;
    margin-top:20px;
    font-size:16px;
    color:black;
    font-weight:normal;
    
}
.addoncardlearnmore{
    margin-top:20px;
    font-size:16px;
    color:black;
}
.addoncardlongdesc_hidden{
    margin-top:0px;
    font-size:0px;
    color:black;
    visibility:hidden;
    z-index:-1;
}
.addoncardlongdesc{
    margin-top:20px;
    font-size:16px;
    color:black;
    visibility:visible;
    z-index:0;
}

/*Stinger block*/
.stinger{
    color:black;
    text-align:center;
    font-size:30px;
    margin-bottom:20px;
}


/*Weird graphic floaty text deal*/
.fixedheight400{
    height:400px;
    margin-left:0px;
    
    background-image:url('../images/updatedHomepageBanner_1a1.png');
    background-size:cover;
    
    background-position-y:50%;
    background-position-x:50%;
    background-repeat:no-repeat;
    z-index:1;
}
.cover{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;

    background-color:var(--palate-color2);
    opacity:.8;
    z-index:2;
}
.floatspan{
    position:absolute;
    top:50%;
    transform:translate(0%,-50%);
    left:5%;
    height:auto;
    width:90%;
    z-index:3;
    text-align:left;
}
h2.bigwhite{
    color:white;
    font-size:55px;
    margin-bottom:0px;
}


/*mobile menu css*/
.tree {
  margin-top:40px;
  width: 70vw;
  visibility:hidden;
  z-index:-1;
}

.node {
  margin-left: 20px;
  visibility:hidden;
}

.node-label {
  cursor: pointer;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: black;
  color:white;
  border-radius: 5px;
  margin: 2px 0;
}

.node-label:hover {
  background: darkgray;
}

.node-label:hover menu_alt:hover{
    color:var(--palate-button1color_hover);
}

.caret {
  position:relative;
  font-size: 48px;
  top:-20px;
  user-select: none;
}

.caret::before {
  content: "\2304"; /* Down caret */
  display: inline-block;
  transition: transform 0.2s ease;
}

.caret.up::before {
  transform: rotate(-180deg) translate(0,-40px);
}

/* Hide children by default */
.children {
  display: none;
  margin-left: 15px;
}

/* Root nodes are always visible */
.root {
  margin-left: 0;
}

.altmenuclose{
    position:absolute;
    top:5px;
    right:5px;
    font-size:32px;
    color:white;
    border:none;
    background-color:rgba(0,0,0,0);
    cursor:pointer;
}
.altmenuclose:hover{
    color:var(--palate-color2);
}
.openAltMenu{
    font-size:32px;
    border:none;
    background-color:rgba(0,0,0,0);
    cursor:pointer;
    color:var(--palate-color1);
}
.openAltMenu:hover{
    color:var(--palate-color3);
}

@media screen and (max-width: 899px) {
    #header_left{
        position: absolute;
        top:50%;
        left: 1%;
        width: 25vw;
        height:auto;
        transform:translate(0%,-50%);
        z-index:100;
    }
    .pticon{
        width:100%;
        height:calc(25vw * 437/1454);
    }
    #header_center{
        position:absolute;
        top:50%;
        left:50%;
        width:60vw;
        min-height:0px;
        max-height:70px;
        transform:translate(-50%,-50%);
        visibility:hidden;
        z-index:-1;
    }
    #header_right{
        position: absolute;
        top:50%;
        left: calc(99% - 10vw);
        width: 10vw;
        height:auto;
        transform:translate(0%,-50%);
        z-index:-1;
        visibility:hidden;
    }
    #header_right_alt{
        position: absolute;
        font-size:24px;
        text-align:right;
        color:var(--palate-color1);
        top:50%;
        left: calc(99% - 10vw);
        width: 10vw;
        height:auto;
        transform:translate(0%,-50%);
        cursor:pointer;
        z-index:100;
        visibility:visible;
    }
    #menu_alt{
        position: absolute;
        top:0px;
        right:0px;
        font-size:32px;
        line-height:36px;
        background-color:black;
        min-height:300px;
        width:80vw;
        text-align:left;
        color:white;
        visibility:hidden;
    }
    .node{
        visibility:hidden;
    }
    h2.bigwhite{
        color:white;
        font-size:45px;
        margin-bottom:0px;
    }
}