/* Set up the basics ----------- */

.container {width:960px;position:relative; margin:auto;}
.full, .half, .threequarter, .quarter,.third,.twothird,.fifth,.twofifth,.threefifth,.fourfifth,.sixth,.fivesixth {float:left;display:inline;margin:0 10px 0 10px;padding:0;}
.first {margin-left:0;}
.last {margin-right:0;}
.nogutter {margin:0;}
.only1400, .only1200, .only960, .onlytablet, .onlysmartphone {display:none;}


/* large desktops 1400 grid----------- */
@media all and (min-width: 1400px) {
	.container {width:1380px;}
	.full {width:1360px;}
	.half {width:670px;}
	.threequarter {width:1015px;}
	.quarter {width:325px;}
	.third {width:440px;}
	.twothird {width:900px;}
	.fifth {width:256px;}
	.twofifth {width:532px;}
	.threefifth {width:808px;}
	.fourfifth {width:1084px;}
	.sixth {width:210px;}
	.fivesixth {width:1130px;}
	
	#debugcssgridvalue:before{left:100px;font-size:1em;color:white;content:"G1400";top:10px;}
	
	.notdesktop{display:none;}
	.not1400{display:none;}
	.only1400{display:block;}
}
/* widescreen desktops 1200 grid----------- */
@media all and (min-width: 1280px) and (max-width: 1399px) {
	.container {width:1200px}
	.full {width:1180px;}
	.half {width:580px;}
	.threequarter {width:880px;}
	.quarter {width:280px;}
	.third {width:380px;}
	.twothird {width:780px;}
	.fifth {width:220px;}
	.twofifth {width:460px;}
	.threefifth {width:700px;}
	.fourfifth {width:940px;}
	.sixth {width:180px;}
	.fivesixth {width:980px;}
	
	#debugcssgridvalue:before{left:100px;font-size:1em;color:white;content:"G1200";top:10px;}
	
	.notdesktop{display:none;}	
	.not1200{display:none;}
	.only1200{display:block;}
}
/* small desktops and laptops 960 grid----------- */
@media all and (min-width: 960px) and (max-width: 1279px)  {
	.container {width:960px;}
	.full {width:940px;}
	.half {width:460px;}
	.threequarter {width:700px;}
	.quarter {width:220px;}
	.third {width:300px;}
	.twothird {width:620px;}
	.fifth {width:172px;}
	.twofifth {width:364px;}
	.threefifth {width:556px;}
	.fourfifth {width:748px;}
	.sixth {width:140px;}
	.fivesixth {width:780px;}
	
	#debugcssgridvalue:before{left:100px;font-size:1em;color:white;content:"G960";top:10px;}

	.notdesktop{display:none;}
	.not960{display:none;}
	.only960{display:block;}	
}


/* Tablets  ----------- */
@media all and (min-width:720px) and (max-width:959px) {
	.container {width:720px;}
	.full {width:700px;}
	.half {width:340px;}
	.threequarter {width:520px;}
	.quarter {width:160px;}
	.third {width:220px;}
	.twothird {width:460px;}
	.fifth {width:124px;}
	.twofifth {width:268px;}
	.threefifth {width:412px;}
	.fourfifth {width:556px;}
	.sixth {width:100px;}
	.fivesixth {width:580px;}
	
	#debugcssgridvalue:before{left:100px;font-size:1em;color:white;content:"GTAB";top:10px;}
	.notdesktop {display:block;}
	
	.onlytablet{display:block;}	
	.nottablet{display:none;}	
}

/* Smartphones  ----------- */

@media only screen and (max-width:719px) {
	HTML {max-width:500px;margin:auto;background:black;}
	.container {width:100%; }
	.full, .half, .threequarter, .quarter,.third,.twothird,.fifth,.twofifth,.threefifth,.fourfifth,.sixth,.fivesixth {clear:both;width:90%;margin:0 5% 0 5%;}
	
	#debugcssgridvalue:before{left:100px;font-size:1em;color:white;content:"GSMP";top:10px;}	
	
	.onlysmartphone{display:block;}
	.notsmartphone {display:none;}
	
}