body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    font-family: "Manrope", sans-serif;
}

.grad1 {
    background-image: linear-gradient(to bottom right, #3F84B9, #FCF7D7);
}

.grad2 {
    background-image: linear-gradient(to right, #03101F, #377FB8);
}

.grad3 {
    background-image: linear-gradient(-15deg, #FFFEF6, #377FB866, #377FB866, #FFFEF6);
}

.pageblock {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

.pagecontent {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    align-items: center;
    justify-content: center;
}

.hblock {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 0;
    align-items: start;
    justify-content: center;
    width: 100%;
}

.block {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
}

.container {
    display: flex;
    flex-direction: column;
}

.largepadding {
    padding: 90px;
}

.smallpadding {
    padding: 38px;
}

.pageimage {
    width: 450px;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 3px 3px 9px #4449;
}

.pageimagegroup {
    width: 450px;
    max-width: 100%;
    height: 400px;
    position: relative;
}

.pageimagegroup img { 
    max-width: 250px;
    width: 60%;
    position: absolute;
    border-radius: 20px;
    box-shadow: 3px 3px 9px #4449;
}


.vspace {
    height:38px;
}

.hspace {
    width: 38px;
}

/***************************/

h1 {
    font-size: 3.5rem;
    font-weight: 600;
    color: #042438;
    margin: 0px;
}

h2 { 
    font-size: 2.3rem;
    font-weight: 600;
    color: #1F4F7E;
    margin: 0px;
    line-height: 50px;
}

h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2D2F31;
    margin: 0px;
}

.largetext {
    font-size: 1.4rem;
    line-height: 2.5rem;
    color: #2D2F31;
}

.mediumtext {
    font-size: 1.1rem;
    line-height: 1.8rem;
    color: #2D2F31;
}

.smalltext {
    font-size: 1.0rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #2D2F31;
}

ul {
    margin: 0px;
    padding-left:20px;
    margin-bottom: 20px;;
}

li {
    line-height: 1.8rem!important;
    padding-left: 20px;
}

/***************************/

.heroimage {
    width: 50%;
    min-width: 300px;
    max-width: 900px;
}

/***************************/

.menu {
    display: flex;
    flex-direction: row;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 0.5vw 0px 0.5vw  3vw;
    align-items: center;
    z-index: 1;
}

.menuover {
    background-color: #3f84b9dd;
    box-shadow: 0px 0px 40px #3f84b9dd;
}

.menu img {
    margin-top: 5px;
}

.companyname {
    color: black;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0px;
    white-space: nowrap;
    text-decoration: none;
}

.menuitem {
    color: #2D2F31;
    padding: 0px 2vw;
    font-weight: 800;
    margin: 0px;
}

.menuitem:link { 
    text-decoration: none; 
} 
.menuitem:visited { 
    text-decoration: none; 
} 
.menuitem:hover { 
    text-decoration: none; 
    color: #FAF9F6;/* #FCF7D7;*/
} 
.menuitem:active { 
    text-decoration: none;  
}

.headerlink {
    color: #1F4F7E;
    padding: 0px 1vw;
    margin: 0px;
    font-weight: 500;
}

.headerlink:link { 
    text-decoration: none; 
} 
.headerlink:visited { 
    text-decoration: none; 
} 
.headerlink:hover { 
    text-decoration: none; 
    color: #FAF9F6;/* #FCF7D7;*/
} 
.headerlink:active { 
    text-decoration: none;  
}

/***************************/

.pricecostline {
    display: flex;
    flex-direction: row;
}

.pricedollar {
    font-size: 1.2rem;
}

.pricecost {
    font-size: 2.5rem;
    font-weight: 600;
}

.pricepermonth {
    font-size: 0.9rem;
    align-content: center;
    margin-left: 5px;
    font-weight: 300;
}

.pricebox {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 15px;
    background-color: #377FB8;
    width: 270px;
    height: 450px;
    margin: 10px;
    padding: 20px;
    color: #FCF7D7;
    line-height: 2.5rem;
    font-size: 0.95rem;
    box-shadow: 3px 3px 9px #4449;
}

.pricebox a {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.pricebox button {
    margin: 20px;
}

/***************************/

.profilephoto {
    border-radius: 20px;
    margin: 10px;
    box-shadow: 3px 3px 9px #4449;
    width: 250px;
}

/***************************/

.contactimage {
    width: 550px;
    max-width: 100%;
    min-width: 400px;
    border-radius: 20px;
    box-shadow: 3px 3px 9px #4449;
}

/***************************/

.formlabel {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    margin: 20px 0px 10px 0px;
}

.forminput {
    width: 450px;
    max-width: 95%;
    height: 32px;
    border: 0px;
    font-size: 1.1rem;
}

.formtextarea {
    width: 450px;
    max-width: 95%;
    border: 0px;
    font-size: 1.1rem;  
    resize: none;
    font-family: "Manrope", sans-serif;
}

/***************************/

.blogimage {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    background-size: cover;
    box-shadow: 3px 3px 9px #4449;
}

.bloglargeimage {
    width: 100%;
    border-radius: 20px;

}

.article-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 3.5rem;
    color: #2D2F31;
}

.article-para {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2.5rem;
    color: #2D2F31;
}

/***************************/

button {
    border-radius: 22px;
    border: 0px;
    display: flex;
    flex-direction: row;
    font-size: 1.1rem;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    height: 44px;
}

button:disabled {
    background-color: #aaa8!important;
    cursor: inherit!important;
}

button p {
    flex: 1 1 auto;
    margin: 0.8vw;
    text-align: start;
}

.bigbutton {
    width: 220px;
    height: 60px;
    border-radius: 30px;

}

.whitebutton {
    color: #222;
    background-color: white;
}

.bluebutton {
    background-color: #377FB8;
    color: white;
}

.yellowbutton {
    background-color: #FCF7D7;
    color: #2D2F31;
}

.buttonsub {
    border-left: 1px solid white;
    padding: 15px 13px;
}

/***************************/

a {
    outline-color: transparent;
}
  
a:link {
    text-decoration: none; 
}

a:visited {
    text-decoration: none;
}

a:focus {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    background: none;
}

  /***************************/


.tag { 
    background-color: #FCF7D7;
    border-radius: 0.9vw;
    border: 0px;
    display: flex;
    flex-direction: row;
    color: #004642;
    align-items: center;
    font-weight: 600;
    padding: 0.3vw 1vw;
}

hr {
    border: 1px 0px 0px 0px;
    border-style: solid;
    color: #0660A9;
}


/**************************/

.footerblock {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.footercontent {
    display: flex;
    flex-direction: column;
}

.footertext1 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 2.5rem;
    color: #FFFFFF;
    margin: 40px 0px;
}

.footertext2 {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.8rem;
    color: #FCF7D7;
    margin: 20px 0px;
}

.footertext3 {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #FFFFFF;
    margin: 20px 0px;
}

.footerbutton {
    margin: 10px 10px;
}


/**************************/

.flexrow { 
    flex-direction: row;
}

.flexrowreverse { 
    flex-direction: row-reverse;
}

.flexhalf { 
    flex: 10 10 0;
}

.flexsmall {
    flex: 4 4 0;
}

.flexlarge {
    flex: 6 6 0;
}

.alignstart {
    align-items: start;
}

.aligncenter {
    align-items: center;
}

.alignend {
    align-items: end;
}

.justifystart {
    justify-content: start;
}

.justifycenter {
    justify-content: center;
}

.justifyend {
    justify-content: end;
}

.justifyspacebetween {
    justify-content: space-between;
}

.textcenter {
    text-align: center;
}

.width80 {
    width:80%;
}

.width60 {
    width:60%;
}

.width40 {
    width:40%;
}

.widt600px {
    width:600px;
}

.minwidthsmall {
    min-width: 300px;
}

.minwidthmedium {
    min-width: 450px;
}

.minwidthlarge {
    min-width: 600px;
}

.maxwidth900px {
    max-width: 900px;
}

.fullheight {
    height: 100%;
}

.flexspace {
    flex: 1 1 0;
}

.wrapreverse {
    flex-wrap: wrap-reverse;
}


@media only screen and (max-width:1000px) {
    .hidesmall {
        display: none;
    }
}

@media only screen and (max-width:750px) {
    .heroimage {
        width: 80%;
    }

    .largepadding {
        padding: 60px 30px;
    }

    h1 {
        font-size: 2.5rem;
    }
}