@media screen and (max-width:1000px)
         {
             #header #logo
             {
                  width             : 30%;
             }
             #header div.menu ul
             {
                  margin-top        : 13px;
             }

             #hero_text
             {
                  font-size          : 5vw;
             }
         }

         @media screen and (max-width:800px)
         {
             h2
             {
                font-size           : 8vw;
             }

            
             #header div.menu
             {
                 display            : block;
                 position           : absolute;
                 top                : 2px;
                 right              : 0;
             }

             #header div.menu ul
             {
                width               : 70px;
                left                : auto;
                right               : 0;
                padding             : 7px 0 5px 0;
                position            : absolute;
                margin-top          : 0;
                border              : solid 1px #fff;
                background          : #3184de url(/v2/images/icon-menu.png) no-repeat 5px 11px;
                border-radius       : 5px;
             }


             #header div.menu ul li
             {
                 display            : none;
             }

             #header div.menu ul:hover
             {
                background-image    : none;
                width               : 100px;
                background-color    : #3184de;
                font-size          : 12pt;
                font-weight        : normal;
                cursor             : pointer;
             }

             #header div.menu ul:hover li
             {
                  display             : block;
                  padding             : 10px;
                  border-bottom       : 1px solid #aaa;
                  font-weight         : normal;
                  background-color    : #eee;
                  color               : #3184de;
                  text-align          : left;
             }

             #header div.menu ul:hover li a
             {
                  color               : #3184de;
                  font-weight          : normal;
                  text-decoration      : none;
             }

             #header div.menu .current
             {
                  display             : block;
                  color               : #d8e3ec;
             }

             #header div.menu ul:hover li.current
             {

                  padding              : 2px 15px 7px 0;
                  background-color     : #3184de;
                  text-align           : right;
                  color                : #d8e3ec;
                  font-weight          : bold;
             }


             div.headline h1
             {
                 font-size          : 7vw;
             }



             #hero
             {
                  height            : 60vw;
                  background-image  : url("/v2/themes/pub2/images/woman-bringing-meal-for-elderly-neighbour_600x400.jpg");
             }

             div.cta-block
             {
                display            : inline-block;
                width              : 100%;
             }


             #whatis
             {
                max-width         : 100%;
                padding           : 0 10px;

             }

             #benefits div
             {
                width         : 100%;
             }

             #use_stats
             {
                background-image : none !important;
                background-color : #3184de;
             }


             #usebyfor2_wrapper 
             {
                 display            : block;
             }

             #usebyfor2_wrapper div.block
             {
                width         : 100%;
                max-width     : 100%;
                margin        : 10px 0;
             }
             #testimonials div
             {
                width          : 90%;
             }

             #footer_links a
             {
                   display        : block;
                   margin         : 20px;
             }

         }



/*   ===============================================  */
/*   PHONE or TABLET size screen in PORTRAIT mode     */
/*   ===============================================  */

@media screen and (max-width: 499px) 
{

    .button_single
    {
         width             : 100%;
         max-width         : 96%;
         min-width         : 50%;
         float             : right;
         font-size         : 16pt;
         -webkit-appearance: none;      /* apple devices show buttons with a washed-out color - this will make it show up normal */
    }


    .button_primary
    {
         max-width         : 50%;
         float             : right;
         font-size         : 16pt;
         -webkit-appearance: none;      /* apple devices show buttons with a washed-out color - this will make it show up normal */

    }

    .button_secondary
    {
         margin            : 0 10px;
         max-width         : 50%;
         font-size         : 16pt;
         -webkit-appearance: none;      /* apple devices show buttons with a washed-out color - this will make it show up normal */
         float             : left;
    }


}



@media screen and (max-width: 700px) 
{


    /*  ----------------------------------------- */
    /*  logon and get started boxes on home page  */
    /*  ----------------------------------------- */

    textarea
    {
        width            : 100%;
    }

    #box
    {
        border            : none;
        padding           : 0 10px;
        font-size         : 12pt;
        max-width         : none;
    }

    #maincontent
    {
        width             : 100%;
        padding           : 0;
        margin            : 0;
    }

	
}   /* END of PORTRAIT media screen section  */