html{ margin:0; padding:0; height:100%; position:relative;font:16px/1.75em Verdana, Arial, Helvetica, sans-serif }
body { margin:0; padding:0;position:relative;font:16px/1.75em Verdana, Arial, Helvetica, sans-serif;-webkit-animation:androidbugfix infinite 1s }
@-webkit-keyframes androidbugfix { from {padding:0} to {padding:0} }
#header { position:relative; top:0; left:0; right:0; height:4.0625em; background:#222 }
#header span{position:absolute; top:1.175em;left:1em;color:#fff}
#header label { padding:0 0.125em; font:2.875em/1.4375em Arial }/* http://fofwebdesign.co.uk/freebies-for-websites/css/multi-rwd-drop-down-menu.htm */
#menu label { padding:0 0.25em; font:3.125em/1.375em Arial }
#header label:hover, #menu label:hover { color:#ccc }
#main-nav-check { position:absolute; top:-9999px; left:-9999px }
.toggle { position:absolute; right:0.15em; cursor:pointer; color:#fff }
.container { background:#fff; min-height:100%; padding:0; margin:0;-webkit-transform:translate3d(0,0,0)  }
#menu { position:absolute; top:0; bottom:0; width:13.75em; background:#222; z-index:9999; left:-13.75em;-webkit-transform:translate3d(0,0,0)  }
.container, #menu{   
	-webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0);
	-webkit-transition:-webkit-transform .25s ease; transition:transform .25s ease;
	}
#menu ul { background:#222; line-height:2.75em; text-decoration:none; padding:0; list-style:none; margin-top:4.0625em; border-top:1px solid #444 }
#menu li { border-bottom:1px solid #444 }
#menu li a { display:block; font-size:0.875em; padding-left:1.5em; color:#fff; text-decoration:none }
#menu li a:hover{ background:#777 }

/* #### - corrects 'unfixing' bug in Safari - uncomment if you have position:fixed elements inside .container - #### */
#main-nav-check:checked ~ .container,#main-nav-check:checked ~ #menu{	-webkit-transform:translate(13.75em,0); -ms-transform:translate(13.75em,0); transform:translate(13.75em,0)}


@media ( min-width:60em ) { /* #### - switch to desktop menu at 960px (960/16=60 - 16px being default browser font-size) - #### */
	.container, #menu { -webkit-transform:translate(0,0) !important; -ms-transform:translate(0,0) !important; transform:translate(0,0) !important }
	#menu label, #header label { display:none }
	#menu { left:auto; bottom:auto; height:0; width:100% }
	#menu ul li:hover > label { color:#ccc }
	#menu > ul { float:right; position:relative; z-index:1; top:0.4285em; right:1em; margin-top:0; display:inline-table; border-left:1px solid #444; border-right:0; font-size:0.875em }
	#menu ul:after { content:""; clear:both; display:block }
	#menu ul li { float:left; position:relative; text-align:left; border-right:1px solid #444 }
	#menu ul li a { padding:0.5em 3.75em 0.5em 1.5em }
	#menu ul li a:only-child { padding-right:1.5em }
	#menu ul li:hover > a { background:#777; -webkit-transition:background-color .25s ease; transition:background-color .25s ease }
}
 
 img, embed, object, video {max-width: 100%;height:auto;}
/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img { vertical-align: middle;}
.imgWrap {position: relative;border:10px solid #eee;}
.imgDescription {position: absolute;top:0;bottom:0;left:0;right:0;background: rgba(29, 106, 154, 0.72);color: #fff;
margin:0px;padding:10px;visibility: hidden;opacity: 0;}
.imgWrap:hover .imgDescription {visibility: visible;opacity: 1;}

.container {width: 100%;}
.container div {box-sizing: border-box;min-height: 150px;min-width: 150px;}
.container div p{padding:10px;margin-top:0px;}
.container div h1{padding:0px 10px;margin-bottom:.5em;margin-top:1em;}
.container div a{text-decoration:none;color:#fff;min-height:100px;}

.c1 {color: #888;background-color: #fff;}
.c2 {color: #ddd;background-color: #eee;}
.c3 {color: #333;background-color: #eee;}
.c4 {color: #333;background-color: #eee;}
.c5 {color: #333;background-color: #eee;}
.c6 {color: #333;background-color: #ffeaea;}
.c11 {color: #333;background-color: #eee;}
.c12 {color: #333;background-color: #fff;}
 
.container {display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;flex-flow: row wrap; }

 .c1, .c2, .c3, .c4, .c5, .c6, .c11, .c12 {width: 100%;border:2px solid #fff;}
 .c11, .c12{width: 100%;}
 .c12{width: 100%;}
		
@media (min-width: 600px) {
        .c2, .c3, .c4, .c5 , .c11, .c12 {
          width: 50%;
        }
      }

@media (min-width: 800px) {
        .c1 {
          width: 100%;
        }
        .c2 {
          width: 33.33%;
        }
        .c3, .c4, .c5 {
          width: 33.33%
        }
		.c6 {
          width: 100%;
		}
		.c11 {
          width: 50%;
		}
		.c12 {
          width: 50%;
		}
		
      }

@media (min-width: 800px) {
        .container {
          width: 800px;
          margin-left: auto;
          margin-right: auto;
        }
      }