/*====================================================
    LG - SMALL LAPTOPS : 1024px - 1280px
    Create breakpoint at 1152px

    1150px / 16px = 71.875.... Just round up to 72rem
    72rem x 16px = 1152px
    Break at 72rem
====================================================*/
@media ( max-width: 72rem )
{
    html{ 
         /* we want 9px font size.....   9px / 16px = 56.25% */ 
        font-size:56.25%;
    }
}
    


/*====================================================
    MD - TABLETS : 768px - 1024px
    Create breakpoint at 816px
    
    815px / 16px = 50.9375.... Just round up to 51rem
    51rem / 16px = 816px
====================================================*/
@media ( max-width: 51rem )
{
    html{ 
         /* we want 8px font size.....   9px / 16px = 56.25% */ 
        font-size:50%;
    }
}



/*====================================================
    SM - PHONE LANDSCAPE : 576px - 768px
    Create breakpoint at 688px
    
    680px / 16px = 41.5rem ...  Rounding up to 43
    43rem x 16px = 688px
====================================================*/
@media ( max-width: 43rem )
{
    html{ 
         /* we want 7px font size.....   7px / 16px = 43.75% */ 
        font-size: 43.75%;
    }
    .pageSectionBody li{ padding: 0.5rem; }
    /*.pageSectionBody ul{padding-inline-start: 10px;}*/
}



/*====================================================
    XS - PHONE PORTRIATE : < 576px
    Create breakpoint at 34px
    
    530px / 16px = 33.125rem ...  Rounding up to 34rem
    34rem x 16px = 544px
====================================================*/
@media ( max-width: 34rem )
{
    html{ 
         /* we want 6px font size.....   6px / 16px = 37.5% */ 
        font-size: 37.55%;
    }
    .pageSectionBody li{ padding: .25rem; }
}




/*
@media only screen and ( min-width: 1070 )
{
    #rustyBucketPano
    { 
        width: 610px;
    }
}
*/


/* For tablets: */
/*@media only screen and (min-width: 600px) and (max-width: 768px) 
{
    .pageTopHeaderText{ font-size: 2.0rem; }
    .pageSectionHeader{font-size: 1.5rem; }
    .pageTopHeaderYellowBar#yellowBarLarge{ font-size: 1.5rem; }
    .pageTopHeaderYellowBar#yellowBarSmall{ font-size: 1.0rem; }
    .pageSectionTable{ font-size: .75rem; }
    #ratchetLogo, #rustyBucketLogo { width: 150px; }
    #rustyBucketPano{ width: 610px; }
}
*/
/* For mobile phones: */

/*@media only screen and (max-width: 600px) 
{
    .fullPageContainer{ width: 768px; }
    .pageSectionTable{ font-size: .5rem; }
    .pageTopHeaderText{ font-size: 1.5rem; }
    .pageSectionHeader{font-size: 1.0rem; }
    .pageTopHeaderYellowBar#yellowBarLarge{ font-size: 1.0rem; }
    .pageTopHeaderYellowBar#yellowBarSmall{ font-size: .75rem; }
    #ratchetLogo, #rustyBucketLogo { width: 100px; }
    #rustyBucketPano{ width: 510px; }
    #menuItem a{ font-size: .75rem;}
}

*/
/* things that will need to be responsive.  

        .pageTopHeaderText
        .pageSectionHeader

        .pageTopHeaderYellowBar#yellowBarSmall
        .pageTopHeaderYellowBar#yellowBarLarge

        .cvma3PatchLogoSmall
        .cvma3PatchLogoLarge
        #ratchetLogo
        #campImage, 
        #rideMapImage
*/