html,body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
#content {
    font-family: "Helvetica Neue", Helvetica, Arial, 'san-serif';
    font-size: 16px;
    background: linear-gradient(180deg,  #6fc9e7 15%, #fff 15%); 
    margin:auto;
    width:100%;
}
h1 {
    font-size: 60px;
}
h2 {
    font-size:36px;
    font-weight: normal;
}

#logoDiv {
    text-align:center; 
    padding:20px; 
    position: relative;
}

#logoDiv img {
    width: 250px;
}

#tagLineDiv {
    text-align:center; 
    padding:20px; 
    color:#ffffff;
}

#formDiv {
    text-align:center; 
    padding:20px; 
    color:#ffffff;
}

#formDiv form input{
    padding:10px;
}

#formDiv span {
    font-weight:bold;
    padding:10px;
}

form {
    max-width: 500px;
    margin: auto;
}

#submitBtn, #openBtn { 
    background-color:#af570b; 
    border:none;
    color:#ffffff;
}

#submitBtn:hover, #openBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

#imageSection {
    text-align:center; 
    padding:20px; 
    color:#ffffff;
}
.videoSection {
    text-align: center;
    padding: 20px;    
}
.videoSection video {
    border-radius:5px;
    width: 100%;
    max-width: 768px;
    border: 1px solid #af570b;
}
#imageSection img {
    width: 100%;
    max-width: 768px;
}
#imageSection2 {
    margin-bottom:20px;
}
#imageSection2 img {
    width: 100%;
    max-width: 400px;
}
#bottomPage {
    text-align:center; 
    width:100%; 
    position: relative;
}

.subSections {
    /* width:30%;  */
    text-align:center;
}

.sectionImage img{
    width:50px;
    max-width: 50px;
}

.sectionText {
    padding:10px; 
    width:100%;
}

/* #leftSection {
    float:left;
}

#centreSection {
    display: inline-block; 
    margin:0 auto; 
}

#rightSection {
    float:right;
} */
#logoContainer {
    margin: auto;
    text-align: center;
    background: #ffffff;
    border-radius: 5px;
    width: 90%;
    max-width: 820px;
    margin-top: 30px;
    padding:5px;
}
#logoContainer2 {
    margin: auto;
    text-align: center;
    background: #ffffff;
    border-radius: 5px;
    width: 90%;
    max-width: 820px;
    margin-top: 30px;
    padding: 5px;
}
#footer {
    height: 200px; 
    /* left: 0;  */
    /* bottom: 0;  */
    padding:50px;
}

.logoStyle1 {
    height:50px;
    margin:10px;
}
.logoStyle2 {
    height:72px;
}
.logoStyle3 {
    height: 50px;
}
.logoStyle4 {
    height:72px;
    padding-left:20px;
}

.modal-header {
    background-color: #132f76;
    border-bottom: none;
    color: #ffffff;
}

.modal-body {
    background-color: #132f76;
}

.modal-footer {
    background-color: #132f76;
    border-top: none;
}

.close {
    color: #ffffff;
}

.close:hover {
    color: #ffffff;
}

#successMessage {
    display: none;
}

#errorMessage {
    display: none;
}

.nobreak {
    white-space: nowrap;
}

#pricingTable {
    display: table;
    text-align: center;
    /*table-layout:fixed;*/
}

.planColumn {
    padding-bottom: 15px;
}

.pricingTextCell, .pricingTickCrossCell {
    display: table-cell;
    padding: 10px;
    word-wrap: break-word;
}

.infinityCell {
    display: table-cell;
    padding: 0px;
    word-wrap: break-word;
}

.pricingTextCell {
    width: 75%;
    text-align: left;
}

.pricingTickCrossCell {
    width: 25%;
    text-align: center;
}

.priceSpan {
    font-size: 50px;
}

.smallPriceText {
    font-size: 14px;
}

.pricingHeaderRow, .pricingRow {
    display: table-row;
    padding: 5px;
}

.priceTickIcon {
    font-size: 40px;
    color: green;
}
.infoButton {
    border: none;
    background: none;
}
.infoIcon {
    font-size: 40px;
    color: #132f76;
}
.priceCrossIcon {
    font-size: 40px;
    color: red;
}
.modalintegration-body {
    background-color: #ffffff;
    padding:5px;
    text-align:center;
}
.modalmodules-body {
    background-color: #ffffff;
    padding: 20px;
}

#sageInvoicesLink {
    background-color: #af570b;
}

#sagePayrollLink {
    background-color: #132f76;
}


#bronze {
    background-color: #b08d57;
}

#silver {
    background-color: #A9A9A9;
}

#gold {
    background-color: #d4af37;
}

.numberCellSpan {
    font-size: 25px;
}

.columnBorderDiv {
    min-width: 192px;
    border: solid 2px #e0e0e0;
    border-radius: 15px;
    margin: 5px;
}

.planHeaderColumn {
    color: #ffffff;
    font-size: 25px;
    text-align: center;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 150px;
}

.smallTextBrTag {
    display: block;
    margin: 10px 0;
}



.planContainer {
    max-width: 100%;
}

#topBtn, #openBtn2 {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    top: 5px; /* Place the button at the bottom of the page */
    right: 5px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #af570b; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#topBtn:hover, #openBtn2:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

#plan1,#plan2,#plan3,#plan4,#plan5 {
    min-width:194px;
}

#openBtnBronze, #openBtnSilver, #openBtnGold {
    background-color: #af570b; /* Set a background color */
    color: white; /* Text color */
    margin:10px;
    border: none;
}

.close span {
    color: #ffffff;
}

.infinityLogo {
    font-size:35px;
    font-weight: bold;
}

@media screen and (max-width: 400px) {
    #content {
        background: linear-gradient(180deg, #6fc9e7 23%, #fff 23%);
    }
}

@media screen and (max-width: 600px) and (min-width: 401px) {
    #content {
        background: linear-gradient(180deg, #6fc9e7 20%, #fff 20%);
    }
}

@media screen and (max-width: 700px) and (min-width: 601px) {
    #content {
        background: linear-gradient(180deg, #6fc9e7 20%, #fff 20%);
    }
}
@media screen and (max-width: 767px) and (min-width: 701px) {
    #content {
        background: linear-gradient(180deg, #6fc9e7 20%, #fff 20%);
    }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
    #content {
        background: linear-gradient(180deg, #6fc9e7 20%, #fff 20%);
    }
}
@media screen and (max-width: 1045px) and (min-width: 992px) {
    #content {
        background: linear-gradient(180deg, 6fc9e7 30%, #fff 30%);
    }
}
@media screen and (min-width: 1046px) {
    #content {        
        background: linear-gradient(180deg, #6fc9e7 25%, #fff 25%);        
    }
}