.mobile {
    /*display: none !important;*/
}
.notMobile {
    /*display: inherit !important;*/ /* initial? inherit? */
}

/* mobile */
@media only screen and (max-width: 600px) {
    body {
        min-width: 300px;
        font-size: 1em;
    }
    h1 {
        font-size: 1.5em;
    }

    .pageBody {
        margin-top: 48px;
    }

    .mobile {
        /*display: inherit !important;*/
    }
    .notMobile {
        /*display: none !important;*/
    }

    .section .sectionRow, .pageFooter .sectionRow {
        display: block;
    }

    .sectionColumn:not(:first-child) {
        margin-top: 1em;
    }

    .sectionButton {
        float: none;
        display: inline-block;
    }

    .sectionCenteredImage img {
        width: 100%;
    }

    .sectionHalfPicture {
        width: 100%;
    }
    .sectionHalfPicture img {
        width: 100%;
    }
    .sectionHalfList {
        width: 100%;
    }
    .sectionHalf {
        width: 100%;
    }
    .sectionHalf img {
        width: 100%;
    }
    .sectionHalf:not(:first-child) {
        padding-left: inherit;
    }
    .sectionThirds {
        width: 100%;
    }
    .sectionThirds:not(:first-child) {
        padding-left: inherit;
    }
    .sectionFourth {
        width: 100%;
    }
    .sectionFourth:not(:first-child) {
        padding-left: inherit;
    }

    .flexDirectionReverse {flex-direction: inherit;}
    .sectionTextWithImage {display: block;}
    .sectionTextWithImage > div:nth-child(1) {width: 100%;}

    /* padding ------------------------------------------------------------------------------------------------------------------- */
    .standardPadding {padding: 0.5em 1em;}
    .padding1 {padding: 0.5em;}
    .paddingLeft4 {padding-left: 2em;}
    .paddingRight1 {padding-right: 0.5em;}
    .hPadding1 {padding: 0 0.5em;}
    .marginBottom2 {margin-bottom: 1em;}
    .marginBottom4 {margin-bottom: 2em;}
    .marginTop1 {margin-top: 0.5em;}
    .marginTop2 {margin-top: 1em;}
    .marginTop3 {margin-top: 1.5em;}
    .marginTop4 {margin-top: 2em;}
    .marginW {margin-left: 0.5em; margin-right: 0.5em;}

    /* header ------------------------------------------------------------------------------------------------- */
    .pageHeader {border-bottom: 1px solid var(--colorDarkBlue);}

    /* SignIn footer ------------------------------------------------------------------------------------------------- */
    .signInBox, .signUpBox, .forgotPasswordBox {
        width: 90%;
        margin-top: 1em;
    }
    .signInUnderBox, .signUpUnderBox, .forgotPasswordUnderBox {
        width: 90%;
        margin: 1em auto;
    }
    
    /* ------------ */

    .profileSectionAccountInputs {
        display: block;
    }

    .mainSection > div {
        padding: 0.5em;
    }
    .mainSection h3 {
        margin: 0 0 0.5em 0;
    }
    .mainSection h4 {
        margin: 0.5em 0;
    }    

    .mainSection .addItemPhotoBox {
        width: 100%;
        margin-left: 0em;
    }

    .mainSection .mainProfilePhoto{
        width: 100%;
    }

    .mainSection .newItemForm {
        display: block;
        margin-top: 1em;
    }

    .mainGettingStarted {
        flex-direction: column;
    }
    .mainGettingStarted > div {
        width: 100%;
    }
    
    .changeForMobile {
        display: block;
    }
    .changeForMobile > div > div {
        display: block;
    }
    .changeForMobile > div > div:not(:first-child){
        border-top: none;
    }
    .changeForMobile > div > div:first-child{
    }
    .changeForMobile > div > div:last-child{
    }

}