/* Basic styles rwd-example*/
.responsive-grid .ui-body {
    text-align: left;
    /*border-color: #ddd;*/
    border: none;
}
.responsive-grid p {
    color: #777;
    line-height: 140%
}
/* Stack all blocks to start */
.responsive-grid .ui-block-a,
.responsive-grid .ui-block-b,
.responsive-grid .ui-block-c {
    width: 100%;
    float: none;
}
/* Collapsing borders */
.responsive-grid > div + div .ui-body {
    /*border-top-width: 0;*/
}




	.toggle {
		visibility: hidden;
	}


/* 1st breakpoint - Float B and C, leave A full width on top */
/*@media all and (min-width: 42em) {*/
@media all and (min-width: 40em) {
    .responsive-grid {
        overflow: hidden; /* Use this or a "clearfix" to give the container height */
    }
    .responsive-grid .ui-body {
       min-height: 14em;
    }
    .responsive-grid .ui-block-b,
    .responsive-grid .ui-block-c {
      float: left;
      width: 99.95%;
      /*width: 49.95%;*/
    }
    .responsive-grid .ui-block-a p,
    .responsive-grid .ui-block-b p,
    .responsive-grid .ui-block-c p {
      font-size: .9em;
    }
    .responsive-grid > div + div .ui-body {
        /*border-top-width: 1px;*/
    }
    .responsive-grid > div:first-child .ui-body {
        /*border-bottom-width: 0;*/
    }
    .responsive-grid > div:last-child .ui-body {
        /*border-left-width: 0;*/
    }
    
    
	.toggle {
		visibility: visible;
	}
    
}
/* 2nd breakpoint - Float all, 50/25/25 */
@media all and (min-width: 55em) {
    .responsive-grid .ui-body {
       min-height: 18em;
    }
    .responsive-grid .ui-block-a,
    .responsive-grid .ui-block-c {
      float: left;
      width: 49.95%;
    }
    .responsive-grid .ui-block-b,
    .responsive-grid .ui-block-c {
      float: left;
      width: 49.95%;
      /*width: 24.925%;*/
    }
    .responsive-grid > div:first-child .ui-body {
        /*border-bottom-width: 1px;*/
    }
    .responsive-grid > div + div .ui-body {
        /*border-left-width: 0;*/
    }
    
    .toggle {
		visibility: visible;
	}
}
/* 3rd breakpoint - Bump up font size at very wide screens */
@media all and (min-width: 75em) {
    .responsive-grid .ui-body {
      font-size: 125%;
    }
    .responsive-grid .ui-block-a,
    .responsive-grid .ui-block-c {
      float: left;
      width: 49.95%;
    }
    .responsive-grid .ui-block-b,
    .responsive-grid .ui-block-c {
      float: left;
      width: 49.95%;
      /*width: 24.925%;*/
    }
    
    .toggle {
		visibility: visible;
	}
    
}