@charset "utf-8";
/* CSS Document */
/*  --  css reset  --  */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
}
/* 
    vendor prefixes 

    -webkit-   Safari      
    -moz-      Firefox
    -ms-       IE10+/Edge

    font conversion 
    
    24pt = 32px = 3.2rem - H1
    22.5pt = 30px = 3rem
    18pt = 24px = 2.4rem - H2
    14.5pt = 20px = 2rem
    13.5pt = 18px = 1.8rem - H3, Label, Button
    12pt = 16px = 1.6rem - H4, P
    10.5pt = 14px = 1.4rem
    9pt = 12px = 1.2rem
    7.5pt = 10px = 1rem (base)

*/
#startSubmitHomeContactAnimation,
#recievedSubmitHomeContactAnimation{
    display: none;
}
html{
    font-size: 62.5%;
}
h1{
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 7rem;
}
h2{
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 5rem;
}
h3{
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 3rem;
}
p, a, button, label, input, textarea, li{
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
}
.inputContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 25px;
}
label{
    float: left;
    width: 100%;
    height: auto;
    color: #2b3e50;
    margin-bottom: 10px;
}
input{
    float: left;
    width: 100%;
    height: 50px;
    color: #2b3e50;
    padding: 10px;
    background-color: rgba(109, 188, 219, 0.6);
    border: 4px solid transparent;
    transition-duration: 0.3s;
}
input:hover, input:focus,
textarea:hover, textarea:focus{
    border: 4px solid #2b3e50;
    background-color: rgba(250, 250, 250, 0.6);
}
button{
    float: left;
    width: auto;
    height: auto;
    min-height: 50px;
    background-color: #fc4349;
    color: #fdfdfd;
    padding: 10px;
    border-radius: 25px;
    transition-duration: 0.3s;
}
button:hover, button:focus{
    background-color: #2b3e50;
    font-size: 2rem;
    cursor: pointer;
}
button span{
    margin-left: 10px;
}
.wrapper{
    float: left;
    width: 100%;
    height: auto;
    min-height: 100vh;
    position: relative;
}

/* - header - */
header{
    float: left;
    width: 100%;
    height: auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logoContainer{
    float: left;
    width: 20%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    order: 1;
}
.mobileMenuButton{
    display: none;
    order: 4;
}
.menuContainer{
    float: left;
    width: 65%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    order: 2;
}
.menuItem{
    float: left;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menuItem p{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    font-weight: bold;
}
.menuItem a{
    float: left;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.menuItem:hover p, .menuItem:focus-within p{
    color: #2b3e50;
}
.menuItem:active p{
    color: #2b3e50;
}
.currentPage p{
    color: #2b3e50;
}

/* - home page - */
.homePageWrapper{
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/bg_img_1.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.homePageMessageContainer{
    float: left;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 200px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 100px;
}
.homePageMessageContainer h1{
    float: left;
    width: 80%;
    height: auto;
    color: #fdfdfd;
    text-align: center;
}
.homePageMessageContainer p{
    float: left;
    width: 90%;
    height: auto;
    color: #fdfdfd;
    margin-top: 50px;
    font-size: 3rem;
}
.homePageMessageContainer a{
    text-decoration: underline;
    color: #fdfdfd;
    font-size: 3rem;
}
.homePageMessageButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
.homePageMessageButtonContainer button{
    width: 25%;
}
.homePageMessageImageContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: rgba(253,253,253,0.3);
}
.homePageMessageImageContainer img{
    display: block;
    width: 25%;
    height: auto;
}
.donateContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}
.donateBox{
    float: left;
    width: 50%;
    height: auto;
    background-color: rgba(250, 250, 250, 0.6);
    padding: 25px;
    padding-bottom: 50px;
}
.donateBox input{
    width: 40%;
    height: auto;
    margin-top: 40px;
    margin-left: 30%;
}
.donateBox button{
    float: left;
    width: 50%;
    height: auto;
    min-height: 50px;
    margin-left: 25%;
    margin-top: 25px;
}
.homePageSection{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
    padding-top: 50px;
    padding-bottom: 50px;
}
.homePageSection .leftSection{
    float: left;
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.homePageSection .leftSection h2{
    color: #2b3e50;
    padding: 25px;
}
.homePageSection .rightSection{
    float: left;
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 100px;
}
.homePageSection .rightSection a{
    float: left;
    width: 100%;
    height: auto;
    color: #fc4349;
    margin-top: 50px;
}
.homePageSection .rightSection a p{
    font-weight: bold;
    font-size: 3rem;
}
.homePageQuoteCotnainer{
    float: left;
    width: 100%;
    height: auto;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 50px;
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/bg_img_2.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.homePageQuoteCotnainer img{
    float: left;
    display: block;
    width: 100px;
    height: 100px;
}
.quoteTextContianer{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 100px;
    padding-right: 100px;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.quoteTextContianer p{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    text-align: center;
    margin-bottom: 50px;
    font-size: 3rem;
}
.homePageLinkSection{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background-color: #6dbcdb;
    padding: 50px;
    margin-bottom: 80vh;
}
.homePagelinkContainer{
    float: left;
    width: 25%;
    height: auto;
    background-color: #2b3e50;
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
}
.homePagelinkContainer h3{
    float: left;
    width: 100%;
    height: auto;
    color: #fc4349;
    text-align: center;
    order: 1;
}
.homePagelinkContainer p{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    order: 2;
}
.homePageLinkImageContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 3;
}
.homePageLinkImageContainer a{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.homePagelinkContainer img{
    display: block;
    width: 20%;
    height: auto;
}
.homePageContactContainer{
    float: left;
    width: 100%;
    height: auto;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 50px;
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/bg_img_3.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.homePageContactBox{
    float: left;
    width: 50%;
    height: auto;
    background-color: rgba(250, 250, 250, 0.6);
    padding: 25px;
    padding-bottom: 50px;
}
.homePageContactBox textarea{
    float: left;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 125px;
    color: #2b3e50;
    padding: 10px;
    background-color: rgba(109, 188, 219, 0.6);
    border: 4px solid transparent;
    transition-duration: 0.3s;
}
.homePageContactBox textarea:hover, .homePageContactBox textarea:focus-within{
    border: 4px solid #2b3e50;
    background-color: rgba(250, 250, 250, 0.6);
}
.homePageContactBox button{
    float: left;
    width: 50%;
    height: auto;
    min-height: 50px;
    margin-left: 25%;
    margin-top: -25px;
    background-color: #2b3e50;
    color: #fdfdfd;
    padding: 10px;
    transition-duration: 0.3s;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.homePageContactBox button:hover, .homePageContactBox button:focus{
    background-color: #81decd;
    cursor: pointer;
    color: #2b3e50;
    font-size: 1.8rem;
}
.homePageContactBox button:active{
    background-color: #2b3e50;
    color: #fdfdfd;
}
.homePageContactFormSentContainer{
    position: absolute;
    float: left;
    width: 50%;
    height: 90%;
    background-color: #528da4;
    padding: 25px;
    padding-bottom: 50px;
    animation: homePageContactAnimation 0.5s forwards ease-in-out;
    transition-duration: 0.3s;
}
@keyframes homePageContactAnimation{
    0% { 
        scale: 0;
        opacity: 0;
        width: 0;
        height: 0;
    }
    100%{
        opacity: 1;
        width: 50%;
        height: 90%;
    }
}
.homePageContactFormSentContainer h3{
    text-align: center;
    color: #fdfdfd;
}
.homePageContactFormSentContainer button{
    width: 50%;
    margin-left: 25%;
    margin-top: 50px;
}
.animatedDots{
    display: inline-block;
}
.animatedDots::after {
    text-align: left;
    margin-left: 5px;
    width: 75px;
    content: '';
    display: inline-block;
    animation: dots 1.5s steps(3, end) infinite;
}
@keyframes dots {
    0% {
      content: '';
    }
    33% {
      content: '.';
    }
    66% {
      content: '..';
    }
    100% {
      content: '...';
    }
  }
.homePageFacebookContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}
.featuredNewsProgramsContainer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
    padding-bottom: 50px;
}
.featuredNewsProgramsContainer h3{
    float: left;
    width: 100%;
    height: auto;
    color: #2b3e50;
    margin-bottom: 50px;
    text-align: left;
    padding-left: 20px;
    padding-top: 20px;
    text-align: center;
}
.newsLogoContainer{
    float: left;
    width: 70%;
    height: auto;
    margin-left: 15%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.newsLogo{
    float: left;
    width: 33.33%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.newsLogo img{
    display: block;
    width: auto;
    height: 150px;
}
/* - about page - */
.aboutHeader{
    background-color: #6dbcdb;
}
.howItStartedContainer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #2b3e50;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 50px;
}
.howItStartedContainer h1{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    text-align: center;
    margin-bottom: 50px;
}
.howItStartedContainer .leftSection{
    float: left;
    width: 40%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
}
.howItStartedImageContainer{
    float: left;
    width: auto;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.howItStartedImageContainer img{
    display: block;
    float: left;
    width: auto;
    height: 500px;
}
.howItStartedContainer .rightSection{
    float: left;
    width: 60%;
    height: auto;
    padding: 25px;
    padding-left: 50px;
    padding-right: 50px;
}
.howItStartedContainer .rightSection p{
    float: left;
    width: 100%;
    height: auto;
    color: #f2f2f2;
    margin-bottom: 20px;
}
.howItStartedButtonContainer{
    float: left;
    width: 50%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 50px;
}
.howItStartedButtonContainer button{
    width: 33.33%;
}
.maraleeSection{
    float: left;
    width: 100%;
    height: auto;
    background-color: #6dbcdb;
    padding: 50px;
}
.maraleeBox{
    float: left;
    width: 60%;
    height: auto;
    margin-left: 20%;
}
.maraleeBox h2{
    float: left;
    width: 100%;
    height: auto;
    color: #2b3e50;
    text-align: center;
    margin-bottom: 50px;
}
.maraleeBox p{
    float: left;
    width: 100%;
    height: auto;
    color: #2b3e50;
}
.youtubeVideoContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
.maraleeButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 50px;
}
.maraleeButtonContainer button{
    width: 60%;
    margin-left: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.heidiSection{
    float: left;
    width: 100%;
    height: auto;
    background-color: #2b3e50;
    padding: 50px;
}
.heidiBox{
    float: left;
    width: 60%;
    height: auto;
    margin-left: 20%;
}
.heidiBox h2{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    text-align: center;
    margin-bottom: 50px;
}
.heidiBox p{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    margin-bottom: 25px;
}
.heidiButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 50px;
}
.heidiButtonContainer button{
    width: 60%;
    margin-left: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ourWhySection{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
    padding: 50px;
}
.ourWhyBox{
    float: left;
    width: 60%;
    height: auto;
    margin-left: 20%;
}
.ourWhyBox h2{
    float: left;
    width: 100%;
    height: auto;
    color: #6dbcdb;
    text-align: center;
    margin-bottom: 50px;
}
.ourWhyBox p{
    float: left;
    width: 100%;
    height: auto;
    color: #6dbcdb;
    margin-top: 25px;
}
.ourWhyBox p.redText, .redText{
    color: #fc4349;
    font-weight: bold;
}
.ourWhyLogoContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}
.ourWhyLogoContainer img{
    display: block;
    float: left;
    width: 50%;
    height: auto;
}

/* - Family Court Reform - */
.familyCourtReformHeader{
    background-color: #6dbcdb;
}
.familyCourtReformTopSection{
    float: left;
    width: 100%;
    height: auto;
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/bg_img_1.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
}
.topSectionBox{
    float: left;
    width: 60%;
    height: auto;
    margin-left: 20%;
}
.topSectionBox h1{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    text-align: center;
    margin-bottom: 50px;
}
.topSectionBox p{
    float: left;
    width: 100%;
    height: auto;
    color: #f2f2f2;
    margin-bottom: 20px;
}
.familyCourtReformButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}
.familyCourtReformButtonContainer button{
    width: 50%;
}
.julieLawContainer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #6dbcdb;
    padding: 50px;
}
.julieLawBox{
    float: left;
    width: 60%;
    height: auto;
    margin-left: 20%;
}
.julieLawBox h2{
    float: left;
    width: 100%;
    height: auto;
    color: #2b3e50;
    text-align: center;
    margin-bottom: 50px;
}
.julieLawSectionContainer{
    float: left;
    width: 100%;
    height: auto;
}
.julieLawSection{
    float: left;
    width: 100%;
    height: auto;
    padding: 50px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
}
.julieLawSection:hover .leftSection p, .julieLawSection:focus-within .leftSection p,
.julieLawSection:hover .rightSection p, .julieLawSection:focus-within .rightSection p,
.julieLawSection:hover .rightSection span.redText, .julieLawSection:focus-within .rightSection span.redText{
    color: black;
}
.julieLawSection:hover .julieLawSectionBox, .julieLawSection:focus-within .julieLawSectionBox{
    top: 10px;
}
.julieLawSectionBox{
    position:relative;
    top: 25px;
    float: left;
    width: 100%;
    height: auto;
    transition-duration: 0.3s;
    margin-bottom: 50px;
}
.julieLawSection .leftSection{
    float: left;
    width: 20%;
    height: auto;
}
.julieLawSection .leftSection p{
    color: #2b3e50;
    font-size: 5rem;
    transition-duration: 0.3s;
}
.julieLawSection .rightSection{
    float: left;
    width: 80%;
    height: auto;
    padding-bottom: 50px;
    border-bottom: 3px solid #2b3e50;
}
.julieLawSection .rightSection p{
    color: #fdfdfd;
    transition-duration: 0.3s;
}
.julieLawSection .rightSection span{
    transition-duration: 0.3s;
}
.julieLawButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 50px;
}
.julieLawButtonContainer button{
    width: 50%;
}
.familyCourtReformLinkSection{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background-color: #6dbcdb;
    padding: 100px;
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/bg_img_2.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.familyCourtReformlinkContainer{
    float: left;
    width: 25%;
    height: auto;
    background-color: #2b3e50;
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
}
.familyCourtReformlinkContainer h3{
    float: left;
    width: 100%;
    height: auto;
    color: #fc4349;
    text-align: center;
    order: 1;
}
.familyCourtReformlinkContainer p{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    order: 2;
}
.familyCourtReformLinkImageContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 3;
}
.familyCourtReformLinkImageContainer a{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.familyCourtReformLinkImageContainer img{
    display: block;
    width: 20%;
    height: auto;
}

/* - get help - */
.getHelpWrapper{
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/bg_img_2.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.officialPartnersContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 50px;
    background-color: #6dbcdb;
}
.officialPartnersContainer h1{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    text-align: center;
    margin-bottom: 50px;
}
.officialPartnersLogoContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 25px;
}
.officialPartnersImageContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.officialPartnersImageContainer img{
    display: block;
    float: left;
    width: 60%;
    height: auto;
}
.officialPartnersTextContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 25px;
}
.officialPartnersTextContainer p{
    float: left;
    width: 100%;
    height: auto;
    color: #f2f2f2;
    margin-bottom: 20px;
    font-weight: bold;
}
.officialPartnersButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 50px;
    padding: 25px;
}
.officialPartnersButtonContainer button{
    width: 33.33%;
}
.resourcesContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 50px;
}
.resourcesBox{
    float: left;
    width: 80%;
    height: auto;
    margin-left: 10%;
}
.resourcesBox h2{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    margin-bottom: 50px;
}
.resourcesBox ul{
    float: left;
    width: 100%;
    height: auto;
}
.resourcesBox li{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    color: #fdfdfd;
}
.resourcesBox a, .resourcesBox p{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    font-size: 2rem;
    font-weight: bold;
}
.bookACallContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.bookACallContainer .leftSection{
    float: left;
    width: 50%;
    height: auto;
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/Maralee01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.bookACallContainer .rightSection{
    float: left;
    width: 50%;
    height: auto;
    background-color: #6dbcdb;
}
.bookACallTextContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 50px;
}
.bookACallTextContainer h2{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    margin-bottom: 50px;
    text-align: right;
}
.bookACallTextContainer p{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    color: #fdfdfd;
    text-align: right;
}
.bookACallTextContainer button{
    width: 80%;
    margin-left: 10%;
    margin-top: 50px;
}
.notSilencedContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.notSilencedContainer .leftSection{
    float: left;
    width: 50%;
    height: auto;
    background-color: #6dbcdb;
    order: 1;
}
.notSilencedTextContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 50px;
}
.notSilencedTextContainer h2{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    text-align: left;
}
.notSilencedTextContainer h3{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    margin-bottom: 50px;
    text-align: left;
}
.notSilencedTextContainer p{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    color: #fdfdfd;
    text-align: left;
}
.notSilencedButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 50px;
}
.notSilencedButtonContainer button{
    width: 80%;
    margin-bottom: 40px;
}
.notSilencedContainer .rightSection{
    float: left;
    width: 50%;
    height: auto;
    order: 2;
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/MaraleeWithBook.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* - news - */
.newsPageWrapper{
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/bg_img_1.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}
.newsSection{
    float: left;
    width: 100%;
    height: auto;
    padding: 50px;
}
.newsSection:nth-child(even){
    background-color: #2b3e50;
}
.newsSection:nth-child(odd){
    background-color: #6dbcdb;
}
.newsBox{
    float: left;
    width: 60%;
    height: auto;
    margin-left: 20%;
}
.newsBox p{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    color:#fdfdfd;
}
.newsBox h2{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    color:#fdfdfd;
}
.newsBox button{
    width: 33.33%;
}
.newsSection:nth-child(even) button:hover{
    background-color: #6dbcdb;
}
.newsSection:nth-child(odd) button:hover{
    background-color: #2b3e50;
}

/* - blog page - */
.blogPageWrapper{
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/bg_img_1.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    position: relative;
}
.blogHeaderContainer{
    float: left;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #6dbcdb;
    position: sticky;
    top: 0;
    z-index: 10;
}
.blogHeaderItem{
    float: left;
    width: 20%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.blogHeaderItem p{
    color: #fdfdfd;
    text-align: center;
}
.blogHeaderItem:hover{
    background-color: #2b3e50;
    cursor: pointer;
}
.blogHeaderItem.currentPage{
    color: #2b3e50;
}
.blogHeaderItem a{
    text-decoration: none;
}
.blogContainer{
    float: left;
    width: 80%;
    height: auto;
    margin-left: 10%;
    background-color: #fdfdfd;
    padding: 25px;
    margin-bottom: 20px;
}
.blogSection{
    float: left;
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 520px;
    background-color: #6dbcdb;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.blogImageContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.blogImageContainer img{
    display: block;
    width: auto;
    height: auto;
    min-height: 100%;
}
.blogTextContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 25px;
    padding-left: 50px;
    padding-right: 50px;
}
.blogTopSection{
    float: left;
    width: 100%;
    height: auto;
    min-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.blogMenuContainer{
    float: left;
    width: 35%;
    height: 50px;
    position: relative;
}
.blogMenuButton{
    float: right;
    width: 25%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.blogMenuButton img{
    display: block;
    width: auto;
    height: 20px;
}
.blogMenuButton:hover{
    cursor: pointer;
}
.blogMenuContainer:hover .blogMenuDropdown,
.blogMenuContainer:focus .blogMenuDropdown,
.blogMenuContainer:focus-within .blogMenuDropdown{
    display: flex;
}
.blogMenuDropdown{
    position: absolute;
    top: 50px;
    right: 0;
    width: 250px;
    height: 50px;
    display: none;/*flex*/
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #fdfdfd;
    z-index: 5;
    border: 2px solid #6dbcdb;
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.25);
}
.blogMenuDropdown img{
    display: block;
    width: auto;
    height: 90%;
}
.blogMenuDropdown p{
    width: 75%;
    margin-left: 10px;
}
.blogMenuDropdown:hover, .blogMenuDropdown:focus-within{
    cursor: pointer;
    box-shadow: none;
}
.blogMenuDropdown:active{
    background-color: #6dbcdb;
}
.blogMenuDropdown:active p{
    color: #fdfdfd;
}
.blogTextContainer h2{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    font-size: 3rem;
    margin-bottom: 25px;
}
.blogTextContainer p{
    float: left;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.blogPostTagBanner{
    float: left;
    width: auto;
    height: 30px;
    padding: 10px;
    background-color: #fc4349;
    color: #fdfdfd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.blogTextSection{
    float: left;
    width: 100%;
    height: auto;
}
.blogSection:hover{
    cursor: pointer;
}
.blogTextSection:hover h2, .blogTextSection:focus-within h2,
.blogTextSection:hover p, .blogTextSection:focus-within p{
    color: #fc4349;
}

/* - blog post page - */
.blogPostPageContainer{
    background-color: #6dbcdb;
}
.blogPostPageSection{
    background-color: #fdfdfd;
    flex-wrap: wrap;
    max-height: unset;
}
.blogPostPageSection .blogTextContainer{
    width: 100%;
    margin-bottom: 50px;
}
.blogPostPageSection h1{
    margin-bottom: 50px;
    font-size: 6rem;
}
.blogPostPageSection h2{
    color: black;
    font-size: 4rem;
}
.blogPostPageSection h3{
    float: left;
    width: 100%;
    height: auto;
    font-size: 3rem;
}
.blogPostPageSection:hover{
    cursor: unset;
}
.blogPostPageImageContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 50px;
}
.blogPostPageImageContainer img{
    display: block;
    width: 100%;
    height: auto;
}
.previewTextLink{
    float: left;
    width: 100%;
    height: auto;
    color: #fc4349;
}
.websiteLink{
    float: left;
    width: 100%;
    height: auto;
    color: #999999;
}
.previewTextLink:hover p, .previewTextLink:focus p,
.websiteLink:hover p, .websiteLink:focus p{
    text-decoration: underline;
}
.blogArticleText{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 25px;
}
.blogPostSocialMediaContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 50px;
    padding-bottom: 25px;
}
.blogPostSocialMediaBox{
    float: left;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 2px solid #999999;
    border-bottom: 2px solid #999999;
}
.blogPostSocialMediaItem{
    float: left;
    width: 15%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid transparent;
    margin-right: 10px;
}
.blogPostSocialMediaItem:hover,
.blogPostSocialMediaItem:focus-within,
.blogPostSocialMediaItem iframe:focus{
    border-color: #6dbcdb;
}
.blogPostSocialMediaItem .blogPostCopyLink{
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
}
.blogPostCopyLink img{
    display: block;
    width: auto;
    height: 20px;
}
.blogPostCopyLink:hover{
    cursor: pointer;
}
.blogPostCopyLink:hover img,
.blogPostCopyLink:focus img{
    cursor: pointer;
}
.blogPostTagLinkContainer{
    float: right;
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.bullet{
    margin-left: 10px;
    margin-right: 10px;
}
.boldAndUnderlinedText{
    font-weight: bold;
    text-decoration: underline;
}
.underlineText{
    text-decoration: underline;
}
.boldText{
    font-weight: bold;
}
.blogPostBulletList{
    float: left;
    width: 90%;
    height: auto;
    margin-left: 5%;
}
.blogPostBulletList li{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 25px;
}
.blogPostBottomSection{
    float: left;
    width: 100%;
    height: auto;
    padding: 50px;
    padding-top: 0;
}
.commentCountSection{
    float: left;
    width: 50%;
    height: auto;
}
.heartIcon{
    color: #fc4349;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
.relatedPostsContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 25px;
}
.relatedPostsTopSection{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 50px;
}
.relatedPostsTopSection a:hover, .relatedPostsTopSection a:focus{
    color: #fdfdfd;
    text-decoration: none;
}
.relatedPostsLinkContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.relatedPostsLink{
    float: left;
    width: 30%;
    height: auto;
    background-color: #fdfdfd;
}
.relatedPostsLinkTopSection{
    float: left;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.relatedPostsLinkTopSection img{
    display: block;
    float: left;
    width: auto;
    height: 250px;
}
.relatedPostsLinkTopSection img.genericBlogPostImage{
    height: 200px;
}
.relatedPostsLinkBottomSection{
    float: left;
    width: 100%;
    height: auto;
    padding: 20px;
}
.relatedPostsLinkTitle{
    float: left;
    width: 100%;
    height: 50px;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
}
.relatedPostsLinkBottomSection a{
    text-decoration: none;
}
.relatedPostsLinkBottomSection a p{
    color: black;
}
.relatedPostsLinkBottomSection a:hover p,
.relatedPostsLinkBottomSection a:focus p{
    color: #fc4349;
}
.relatedPostsLinkBottomSectionCommentFavorite{
    float: left;
    width: 100%;
    height: 50px;
    border-top: 2px solid #999999;
    margin-top: 20px;
    padding-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.commentComtainer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
    padding: 50px;
    position: relative;
}
.commentComtainer h3{
    float: left;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #999999;
}
.commentComtainer .homePageContactFormSentContainer h3{
    border-bottom: none;
}
.commentComtainer .homePageContactFormSentContainer{
    animation: blogPageContactAnimation 0.5s forwards ease-in-out;
    transition-duration: 0.3s;
}
@keyframes blogPageContactAnimation{
    0% { 
        scale: 0;
        opacity: 0;
        width: 0;
        height: 0;
        left: 50%;
        right: 50%;
        top: 50%;
    }
    100%{
        opacity: 1;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
    }
}
.createCommentContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 50px;
}
.commentTextarea{
    float: left;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100px;
    border: 4px solid #999999;
    padding: 10px;
}
.commentButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.commentCancelButton{
    float: left;
    width: 33.33%;
    height: 50px;
    background-color: #fdfdfd;
    color: #fc4349;
    border-radius: 0;
}
button.commentCancelButton:hover{
    background-color: #fc4349;
    color: #fdfdfd;
}
.commentPublishButton{
    float: left;
    width: 33.33%;
    height: 50px;
    background-color: #fc4349;
    color: #fdfdfd;
    border-radius: 0;
    margin-left: 10px;
}
.commentSection{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 20px;
}
.comment{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    border-bottom: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.commentDate{
    float: left;
    width: 100%;
    font-size: 1.6rem;
}
.comment p{
    border-bottom: none;
}
.loadMoreCommentsButton{
    float: left;
    width: 50%;
    height: auto;
    margin-left: 25%;
    margin-top: 20px;
}
/*  --  Animation: Fly up from bottom Animation  --  */
.flyInBottomAnimationModal{
    display: none;
    position: fixed;
    z-index: 1200;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
}
.flyInBottomAnimationContent{
    display: block;  
    width: 100%;
    height: 100%;
    margin: auto auto;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transition-duration: 0.3s;
    animation: popUpBottomMessage 2.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    background: rgb(51,51,51);
    background: linear-gradient(0deg, rgba(51,51,51,0.8) 90%, rgba(51,51,51,0) 100%);
}
.flyInBottomAnimationContent h1{
    display: block;
    float: left;
    width: 100%;
    height: 100px; 
    font-size: 3.2rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    color: #f2f2f2;
}
@keyframes popUpBottomMessage{
    0% {
        opacity: 0;
        top: 150px;
        left: 0;
    }
    15%{ 
        opacity: 1;
        top: 0; 
        left: 0;  
    }
    85%{ 
        top: 0;   
        left: 0;  
        opacity: 1; 
    }
    100%{ 
        opacity: 0;
        top: 150px;   
        left: 0;   
    }
}

/* - blog categories page - */
.postComingSoonContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 60vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 50px;
}
.postComingSoonContainer h1{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
}
.postComingSoonContainer p{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
}

/* - contact page - */
.contactPageWrapper{
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/bg_img_3.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}
.contactFormContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    position: relative;
}
.contactForm{
    float: left;
    width: 60%;
    height: auto;
    padding: 50px;
    background-color: #fdfdfd;
    margin-bottom: 50px;
}
.contactForm h1{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 25px;
    color: #fc4349;
    font-size: 5rem;
}
.contactFormInputContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 25px;
}
.halfWidth{
    width: 45%;
}
.contactFormTopSection{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contactFormInputContainer label{
    float: left;
    width: 100%;
    height: auto;
    color: #2b3e50;
}
.contactFormInputContainer input{
    float: left;
    width: 100%;
    height: 50px;
    background-color: #acd9ea;
}
.contactFormInputContainer textarea{
    float: left;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 75px;
    background-color: #acd9ea;
    padding: 10px;
    border: 4px solid transparent;
}
.contactFormInputContainer textarea:hover, .contactFormInputContainer textarea:focus{
    border: 4px solid #2b3e50;
}
.contactFormButtonContainer{
    float: left;
    width: 100%;
    height: auto;
}
.contactFormButtonContainer button{
    width: 50%;
    margin-left: 25%;
}
.contactFormContainer .homePageContactFormSentContainer{
    animation: contactPageContactAnimation 0.5s forwards ease-in-out;
    background-color: #6dbcdb;
}
@keyframes contactPageContactAnimation{
        0% { 
            scale: 0;
            opacity: 0;
            width: 0;
            height: 0;
        }
        100%{
            opacity: 1;
            width: 60%;
            height: 100%;
        }
    }
.publicRelationsContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.publicRelationsContainer .leftSection{
    float: left;
    width: 50%;
    height: auto;
    background-color: #6dbcdb;
    order: 1;
}
.publicRelationsTextContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 50px;
}
.publicRelationsTextContainer h2{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    text-align: left;
}
.publicRelationsTextContainer h3{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    margin-bottom: 50px;
    text-align: left;
}
.publicRelationsButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 50px;
}
.publicRelationsButtonContainer button{
    width: 45%;
}
.publicRelationsImageContainer{
    float: left;
    width: 100%;
    height: auto;
    max-height: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.publicRelationsImageContainer img{
    display: block;
    float: left;
    width: 100%;
    height: auto;
}
.publicRelationsContainer .rightSection{
    float: left;
    width: 50%;
    height: auto;
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/NancyFingerhood.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    order: 2;
}

/* - terms and privacy page - */
.termsAndPrivacyPageWrapper{
    background-color: #6dbcdb;
    background-image: url(https://momsfightback.org/images/bg_img_3.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}
.termsAndPrivacyContainer{
    float: left;
    width: 70%;
    height: auto;
    margin-left: 15%;
    margin-top: 50px;
}
.termsAndPrivacyContainer h1{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    margin-bottom: 50px;
}
.termsAndPrivacyContainer p{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
}
.termsAndPrivacySection{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}
.termsAndPrivacySection h2{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    margin-bottom: 10px;
    font-size: 3rem;
}
.termsAndPrivacySection p{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    margin-bottom: 25px;
}
.termsAndPrivacySection ul{
    float: left;
    width: 95%;
    height: auto;
    margin-left: 5%;
}
.termsAndPrivacySection li{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    color: #fdfdfd;
}
.marginBottom25{
    margin-bottom: 25px;
}

/* - footer - */
footer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #6dbcdb;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footerLogoContainer{
    float: left;
    width: 20%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footerLogoContainer img{
    display: block;
    float: left;
    width: 80%;
    height: auto;
    max-width: 100px;
}
.footerMenuContainer{
    float: left;
    width: 50%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.footerMenuItem{
    float: left;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footerMenuItem p{
    float: left;
    width: 100%;
    height: auto;
    color: #fdfdfd;
    font-weight: bold;
    text-decoration: underline;
}
.footerMenuItem a{
    float: left;
    width: auto;
    height: auto;
}
.footerSocialMediaContainer{
    float: left;
    width: 30%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 25px;
    padding-right: 25px;
}
.footerSocialMediaBox{
    float: left;
    width: 25%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footerSocialMediaBox img{
    display: block;
    width: 25px;
    height: auto;
}
.footerSocialMediaContainer p{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    color: #fdfdfd;
    margin-top: 25px;
}
/* responsive screen code */
@media only screen and (min-width: 1500px) {
/* Extra large devices (large laptops and desktops, 1500px and up) */	
}
@media only screen and (max-width: 1499px) {
/* Extra large devices (large laptops and desktops, 1200px and up) */	
}
@media only screen and (max-width: 1199px) {
/* Large devices (laptops/desktops, 992px and up) */	
    .menuItem p{
        font-size: 1.6rem;
    }
    .blogHeaderItem p{
        font-size: 1.6rem;
    }
    .howItStartedButtonContainer{
        width: 70%;
    }
    footer{
        flex-wrap: wrap;
    }
    .footerLogoContainer{
        width: 25%;
    }
    .footerMenuContainer{
        width: 75%;
    }
    .footerSocialMediaContainer{
        width: 33.33%;
        margin-left: 66.66%;
        margin-top: 50px;
    }
}
@media only screen and (max-width: 991px) {
/* Medium devices (landscape tablets, 768px and up) */
    header{
        flex-wrap: wrap;
    }
    .logoContainer{
        order: 1;
    }
    .menuContainer{
        order: 3;
        width: 100%;
        margin-top: 20px;
    }
    .homePageMessageContainer h1{
        font-size: 5rem;
    }
    .homePageMessageButtonContainer button{
        width: 50%;
    }
    .donateBox,
    .homePageContactBox,
    .homePageContactFormSentContainer{
        width: 80%;
    }
    @keyframes homePageContactAnimation{
        0% { 
            scale: 0;
            opacity: 0;
            width: 0;
            height: 0;
        }
        100%{
            opacity: 1;
            width: 80%;
            height: 90%;
        }
    }
    @keyframes contactPageContactAnimation{
        0% { 
            scale: 0;
            opacity: 0;
            width: 0;
            height: 0;
        }
        100%{
            opacity: 1;
            width: 100%;
            height: 100%;
        }
    }
    .homePageSection .leftSection{
        width: 100%;
        padding: 50px;
    }    
    .homePageSection .rightSection{
        width: 100%;
        padding-right: 0;
        padding: 50px;
    }
    .homePageLinkSection, .familyCourtReformLinkSection{
        flex-wrap: wrap;
    }
    .homePagelinkContainer, .familyCourtReformlinkContainer{
        width: 100%;
        margin-bottom: 20px;
    }
    .homePageLinkImageContainer, .familyCourtReformLinkImageContainer{
        order: 1;
        width: 25%;
    }
    .homePagelinkContainer h3, .familyCourtReformlinkContainer h3{
        order: 2;
        width: 75%;
        text-align: left;
    }
    .homePagelinkContainer p, .familyCourtReformlinkContainer p{
        order: 3;
        width: 100%;
    }
    .howItStartedContainer .leftSection{
        width: 100%;
        justify-content: center;
    }
    .howItStartedContainer .rightSection{
        width: 100%;
    }
    .howItStartedButtonContainer{
        width: 100%;
    }
    .howItStartedButtonContainer button{
        width: 40%;
    }
    .maraleeBox, .heidiBox, .ourWhyBox{
        width: 90%;
        margin-left: 5%;
    }
    .julieLawContainer{
        padding: 20px;
    }
    .topSectionBox, .julieLawBox{
        width: 90%;
        margin-left: 5%;
    }
    .julieLawSection .leftSection, .julieLawSection .rightSection{
        width: 100%;
    }
    .julieLawButtonContainer button, .familyCourtReformButtonContainer button{
        width: 80%;
    }
    
    .newsBox{
        width: 80%;
        margin-left: 10%;
    }
    .contactForm{
        width: 80%;
    }
    .publicRelationsButtonContainer{
        flex-wrap: wrap;
    }
    .publicRelationsButtonContainer button{
        width: 80%;
        margin-bottom: 40px;
    }
    .blogContainer{
        width: 90%;
        margin-left: 5%;
    }
    .blogHeaderContainer{
        flex-wrap: wrap;
        height: 100px;
        justify-content: flex-start;
    }
    .blogHeaderItem{
        width: 33.33%;
        height: 50px;
    }
    .blogPostPageSection h1{
        font-size: 4rem;;
    }
    .blogPostTagLinkContainer{
        width: 100%;
        justify-content: flex-start;
    }
    .commentCancelButton, .commentPublishButton{
        width: 33.33%;
    }
    footer, .footerMenuContainer{
        flex-wrap: wrap;
    }
    .footerLogoContainer, .footerMenuContainer, .footerSocialMediaContainer{
        width: 100%;
    }
    .footerLogoContainer{
        margin-bottom: 20px;
    }
    .footerMenuItem{
        width: 100%;
        justify-content: flex-start;
        padding-left: 20px;
        height: 50px;
    }
    .footerSocialMediaContainer{
        margin-top: 20px;
    }
    .newsLogoContainer{
        width: 80%;
        margin-left: 10%;
    }
}
@media only screen and (max-width: 767px) {
/* Small devices (portrait tablets and large phones, 600px and up) */
    .menuContainer{
        flex-wrap: wrap;
    }
    .menuItem{
        width: 33.33%;
        height: 50px;
        margin-bottom: 10px;
    }
    .donateBox input{
        width: 60%;
        margin-left: 20%;
    }
    .officialPartnersButtonContainer{
        flex-wrap: wrap;
    }
    .officialPartnersButtonContainer button{
        width: 80%;
        margin-bottom: 40px;
    }
    .bookACallContainer, .notSilencedContainer, .publicRelationsContainer{
        flex-wrap: wrap;
    }
    .bookACallContainer .leftSection, 
    .notSilencedContainer .rightSection,
    .publicRelationsContainer .rightSection{
        width: 100%;
        height: 500px;
    }
    .publicRelationsContainer .leftSection,
    .bookACallContainer .rightSection,
    .notSilencedContainer .leftSection{
        width: 100%;
    }
    .notSilencedContainer .rightSection,
    .publicRelationsContainer .rightSection{
        order: 1;
    }
    .notSilencedContainer .leftSection,
    .publicRelationsContainer .leftSection{
        order: 2;
    }
    .blogContainer{
        width: 90%;
        margin-left: 5%;
    }
    .blogSection{
        flex-wrap: wrap;
        max-height: unset;
    }
    .blogImageContainer{
        width: 100%;
    }
    .blogImageContainer img{
        min-width: 100%;
    }
    .blogPostPageSection h1{
        font-size: 3rem;
    }
    .blogTextContainer h2{
        font-size: 2.4rem;
    }
    .blogPostTagBanner{
        font-size: 1.2rem;
    }
    .blogPostSocialMediaItem{
        width: 25%;
    }
    .newsLogoContainer{
        width: 100%;
        margin-left: 0;
    }

}
@media only screen and (max-width: 600px) {
/* Extra small devices (phones, 600px and down) */
    header{
        position: relative;
    }
    .logoContainer{
        width: 40%;
        padding-right: 10px;
        order: 1;
    }
    .logoContainer img{
        display: block;
        width: 100%;
        height: auto;
    }
    .mobileMenuButton{
        float: left;
        width: 40%;
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        order: 2;
    }
    .mobileMenuButton:hover, .mobileMenuButton:focus{
        cursor: pointer;
    }
    .mobileMenuButton p{
        float: left;
        width: 100%;
        height: auto;
        color: #fdfdfd;
        font-weight: bold;
        text-align: right;
        order: 3;
        user-select: none;
    }
    .mobileMenuButton:hover p, .mobileMenuButton:focus p{
        color: #2b3e50;
    }
    #mobileMenuContainer{
        display: none;
    }
    .menuContainer{
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        order: 4;
        z-index: 5;
        background-color: #70bbda;
        margin-top: 0;
        width: calc(100% + 40px);
    }
    .menuItem{
        width: 100%;
        justify-content: flex-start;
        padding-left: 20px;
        height: 50px;
    }
    h1{
        font-size: 5rem;
    }
    .homePageMessageContainer{
        margin-top: 25px;
    }
    .homePageMessageContainer h1{
        font-size: 5rem;
    }
    .homePageMessageContainer p{
        font-size: 2rem;
        width: 100%;
        padding: 50px;
    }
    .homePageMessageButtonContainer button{
        width: 80%;
    }
    .donateBox{
        width: 80%;
    }
    .donateBox input{
        width: 80%;
        margin-left: 10%;
    }
    .quoteTextContianer{
        padding: 0;
    }
    .homePageLinkSection, .familyCourtReformLinkSection{
        flex-wrap: wrap;
        padding: 40px;
    }
    .homePagelinkContainer, .familyCourtReformlinkContainer{
        width: 100%;
        margin-bottom: 20px;
    }
    .homePageLinkImageContainer, .familyCourtReformLinkImageContainer{
        order: 3;
        width: 100%;
    }
    .homePagelinkContainer h3, .familyCourtReformlinkContainer h3{
        order: 1;
        width: 100%;
        text-align: center;
    }
    .homePagelinkContainer p, .familyCourtReformlinkContainer p{
        order: 2;
        width: 100%;
    }
    .homePageContactBox{
        width: 100%;
    }
    @keyframes homePageContactAnimation{
        0% { 
            scale: 0;
            opacity: 0;
            width: 0;
            height: 0;
        }
        100%{
            opacity: 1;
            width: 100%;
            height: 90%;
        }
    }
    @keyframes contactPageContactAnimation{
        0% { 
            scale: 0;
            opacity: 0;
            width: 0;
            height: 0;
        }
        100%{
            opacity: 1;
            width: 100%;
            height: 100%;
        }
    }
    .homePageContactBox button{
        width: 80%;
        margin-left: 10%;
    }
    .homePageContactBox textarea{
        min-height: 100px;
    }
    .howItStartedContainer .rightSection{
        padding: 20px;
    }
    .howItStartedButtonContainer{
        flex-wrap: wrap;
    }
    .howItStartedButtonContainer button{
        width: 80%;
        margin-bottom: 40px;
    }
    .maraleeButtonContainer button,
    .heidiButtonContainer button{
        width: 80%;
        margin-left: 10%;
    }
    .officialPartnersButtonContainer, .notSilencedButtonContainer{
        flex-wrap: wrap;
    }
    .officialPartnersButtonContainer button,
    .notSilencedButtonContainer button{
        width: 80%;
        margin-bottom: 40px;
    }
    .bookACallTextContainer button{
        width: 80%;
        margin-left: 10%;
    }
    .newsBox{
        width: 100%;
        margin-left: 0;
    }
    .newsBox h2{
        font-size: 3rem;
    }
    .newsBox button{
        width: 80%;
    }
    .contactForm{
        width: 100%;
        padding: 20px;
    }
    .contactFormTopSection{
        flex-wrap: wrap;
    }
    .contactFormInputContainer.halfWidth{
        width: 100%;
    }
    .blogContainer{
        width: 100%;
        margin-left: 0;
    }
    .blogPostSocialMediaBox{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .blogPostSocialMediaItem{
        width: 50%;
        margin-right: 0;
    }
    .relatedPostsLinkContainer{
        flex-wrap: wrap;
    }
    .relatedPostsLink{
        width: 100%;
        margin-bottom: 40px;
    }
    .relatedPostsLinkTopSection{
        height: 250px;
    }
    .relatedPostsLinkTopSection img{
        width: 100%;
        height: auto;
    }
    .footerSocialMediaContainer{
        width: 100%;
        margin-left: 0;
        margin-top: 50px;
    }
    .newsLogo img{
        width: 60%;
    }
}
@media only screen and (max-width: 400px) {
/* Super Extra small devices (phones, 400px and down) */
}