/* DIVS and LARGE BUTTONS */
html {
  scroll-padding-top: 80px; /* Adjust based on your header height */
}

div {
    margin: 0;
    padding:0;
    border: 0;
}

.padded{
    padding-left: 22px;
    padding-right: 22px;
}
.padded-less{
    padding-left: 10px;
    padding-right: 10px;
}

.padded-header{ 
    padding-left: 16px;
    padding-right: 16px;
}

.padded-header4{ 
    padding-left: 10px;
    padding-right: 10px;
}

.padded-top{
    margin-top: 25px;
}
.padded-top-less{
    margin-top: 21px;
}
.padded-top-more{
    margin-top: 27px;
}
.padded-top-h1{
    margin-top: 13px;
}
.padded-top-special{
    margin-top: 13px;
}
.margined-top{
    margin-top: 15px;
}

.align-left{
    display: flex;
    justify-content: flex-start;
}

.align-top{
    display: flex;
    align-items: flex-start;
}

.mainContainer{
    display: flex;
    flex-wrap: wrap;
    margin-left: 3%; /*if you change this, cahnge .nav_margin */
    margin-right: 3%;
    align-items: flex-start;
}

.column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.column3rd {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.column66 {
    width: 66.666667%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}
.column33 {
    width: 33.333333333%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.main-div-inside-container {
    justify-content: start;
    width: 100%;
}

.secondContainer{
    float: left;
    width: 100%; /* Default width */ 
}

.advertFooter {
    width: 40%;
    bottom: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: right;
}
.advertFooter2{
    height: 100px;
    width: 100%;
    bottom: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: right;
}

.inline-flex{
    display: inline-block;
    width: 100%;
    display: flex;
    align-items: center;
    padding:0;
}

.inline_flex{
    display: inline-block;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.amount-of-days{
    background-color: #e6e6ff;
    width: 98%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
}

.width98-for-background-colour{
    width: 98%;
}
.width98-for-background-colour-inside{
    padding: 16px;
}

.hr100{
    border: none;
    height: 2px;
    background-color: #590af2;
    width: 100%;       
    margin: 0;        
    display: block; 
}

/*buttons*/
button {
    font-family: 'Work Sans', Tahoma, Helvetica, Arial, sans-serif;
    font-size: 19px;
    cursor: pointer;
}
a{
    text-decoration: none;
}
.calculate{
    background-color: #590af2;
    width: 98%;
    height: 55px;
    border: none;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.calculate:active{
    transform: translateY(4px);
}
.calculate-hover{
    background-color: #2a0393;
}
.category-header-button{
    background-color: #e6e6ff;
    width: 98%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    cursor: pointer;
}
.category-header-button-hover{
    background-color: #d2d2ff;
}
.subcategory-header-button{
    background-color: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    cursor: pointer;
}

.results-header-button{
    background-color: #fff6cc;
    width: 98%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    cursor: pointer;
}
.results-header-button-hover{
    background-color: #fcea9d;
}
.horizontal-scroll{
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

/* Desktop & laptop */
@media (min-width: 1200px) { /*desktop*/
    .column {
        width: 50%;
    }
    .column66, .column3rd{
        width: 100%;
    }
    .padded-top-special{
        margin-top: 25px;
    }
}

/* Tablet horizontal */
@media only screen and (max-width: 1199px) {
    .column {
        width: 50%;
    }
    .column66{
        width: 100%
    }
    .padded-header4{ 
        padding-left: 16px;
        padding-right: 16px;
    }
    .advertFooter2{
        height: 150px;
    }
    .padded-top-special{
        margin-top: 25px;
    }
}

/* Tablet vertical, Old Mobile, Small Desktop window */
@media only screen and (max-width: 999px) {
    .advertFooter{
        width: 100%;
    }
    .column, .column66, .column3rd {
        width: 100%;
    }
    .padded-header4{ 
        padding-left: 16px;
        padding-right: 16px;
    }
    .column33 {
        width: 50%;
    }
    .padded-top-special{
        margin-top: 25px;
    }
}

/* Mobile horizontal */
@media only screen and (max-width: 999px) and (max-height: 799px) and (min-resolution: 190dpi) {
    .advertFooter{
        width: 100%;
    }
    .advertFooter2{
        height: 80px;
    }
    button {
        font-size: 25px;
    }
    .calculate{
        font-size: 36px;
        font-weight: 700;
    }
    .column, .column66, .column3rd {
        width: 100%;
    }
    .padded-top, .padded-top-special{
        margin-top: 29px;
    }
    .padded-top-less{
        margin-top: 22px;
    }
    .padded-top-more{
        margin-top: 32px;
    }
    .padded-top-h1{
        margin-top: 13px;
    }
    .padded-header{ 
        padding-left: 14px;
        padding-right: 14px;
    }
    .padded-header4{
        padding-left: 14px;
        padding-right: 14px;
    }
    
}

/* Mobile vertical */
@media only screen and (max-width: 1100px) and (min-width: 800px) and (min-height: 800px) and (min-resolution: 190dpi) {
    .advertFooter{
        width: 100%;
    }
    .advertFooter2{
        height: 150px;
    }
    button {
        font-size: 48px;
    }
    .column, .column66, .column3rd {
        width: 100%;
    }
    .topnav{
        height: 7vh;
    }
    .calculate{
        font-size: 70px;
        font-weight: 700;
    }
    .category-header-button, .calculate, .amount-of-days, .results-header-button, .width98-for-background-colour{
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
    }
    .category-header-button, .calculate, .amount-of-days{
        height: 120px;
    }
    .results-header-button{
        height: 90px;
    }
    .category-header-button, .results-header-button{
        margin-top: 20px;
    }
    .padded, .padded-less{
        padding-left: 21px;
        padding-right: 21px;
    }
    .padded-top, .padded-top-special{
        margin-top: 60px; 
    }
    .padded-top-less{
        margin-top: 45px;
    }
    .padded-top-more{
        margin-top: 70px;
    }
    .padded-top-h1{
        margin-top: 27px;
    }
    .padded-header{ 
        padding-left: 22px;
        padding-right: 22px;
    }
    .padded-header4{
        padding-left: 25px;
        padding-right: 22px;
    }
    .width98-for-background-colour-inside{
        padding: 22px;
    }
    .margined-top{
        margin-top: 30px;
    }
    .mainContainer{
        margin-left: 2.5%; /*if you change this, cahnge .nav_margin */
        margin-right: 2.5%;
    }
    .column33 {
        width: 100%;
    }
    .hr100{
        height: 4px;
    }
}