/*Grid*/
.socialgrid {
	margin: 0 -1em;
	overflow: hidden;
}
.socialgri h2{
	font-color:#999;
	color:#999;
	
}
.grid:target {
	-webkit-animation: fadeout 5s 1 ease-out;
	-moz-animation: fadeout 5s 1 ease-out;
	-o-animation: fadeout 5s 1 ease-out;
	animation: fadeout 5s 1 ease-out;
}
.socialgrid > h2 {
	margin-left: 0.45em;
}
.socialgrid > section {
	padding: 1em 1em 0.5em;
}
.socialgrid > section:target {
	-webkit-animation: fadeout 5s 1 ease-out;
	-moz-animation: fadeout 5s 1 ease-out;
	-o-animation: fadeout 5s 1 ease-out;
	animation: fadeout 5s 1 ease-out;
}
.socialgrid ul {
	overflow: hidden;
}
.socialgrid ul li {
	margin-bottom: 0.3em;
}
.featured:after {
	content: "*";
	color: #e51837;
}
/*Patterns*/
.mod {
	padding: 1em;
}
.pattern {
	background: #FFF;
	margin-bottom: 1em;
	overflow: hidden;
}
.pattern-description h1 {
	font-size: 3.4em;
	margin-bottom: 0.5em;
}
.pattern-description {
	max-width: 40em;
	margin: 0 auto;
}
.pattern-description ul,.pattern-description ol {
	margin-bottom: 2em;
}
.pattern-description li {
	margin-bottom: 1em;
}
******Media Queries*******/
/* Medium Screens*/
@media all and (min-width:40em) {.socialgrid ul li {
	width: 50%;
	float: left;
}
.socialgrid ul li:nth-child(odd) {
	padding-right: 1em;
	clear: left;
}

}
/* Large Screens */
@media all and (min-width:54em) {h1 {
	font-size: 6.4em;
}
.socialgrid > section {
	float: left;
	width: 33.3333333%;
}
.socialgrid > section:nth-of-type(3n+1) {
	clear: left;
}
.socialgrid ul li {
	width: auto;
	float: none;
	text-align:left;
}
.socialgrid ul li:nth-child(odd) {
	padding-right: 0;
}

}
/* CSS Animations */
@-webkit-keyframes fadeout {0% {
	background: #fff;
}
10% {
	background: #eee;
}
100% {
	background: #fff;
}

}
@-moz-keyframes fadeout {0% {
	background: #fff;
}
10% {
	background: #eee;
}
100% {
	background: #fff;
}

}
@-o-keyframes fadeout {0% {
	background: #fff;
}
10% {
	background: #eee;
}
100% {
	background: #fff;
}

}
@keyframes fadeout {0% {
	background: #fff;
}
10% {
	background: #eee;
}
100% {
	background: #fff;
}

}
.entry-content {
	text-align: center;
	background-color: none;
}
.socialgrid {
	overflow: hidden;
	padding: 0.5em 0 0 0.5em;
	max-width: 80em;
	margin: 0 auto;
}
.socialgrid li {
	padding: 0 0.5em 0.5em 0;
}
.socialgrid li > div {
background: 
#FFF;
padding: 4.4em 2em;
text-align: left;
}
.socialgrid li.wide {
	width: 98%;
}
.socialgrid li a {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	font-weight: 800;
	font-size: 1.5em;
}

.socialgrid li .greybar {
	position: relative;
	bottom: -73px;
	background-color: 
	rgba(0,0,0,.5);
	width: 119%;
	left: -9.8%;
}



.socialgrid li .nobar {
	position: relative;
	bottom: -73px;
	background-color: 
	rgba(0,0,0,.0);
	width: 119%;
	left: -9.8%;
}
@media all and (min-width:27em) {.socialgrid li {
	width: 100%;
	float: left;
}

}
@media all and (min-width:40em) {.socialgrid li {
	width: 100%;
	display: inline-block;
	float: left;
}
.socialgrid li.wide {
	width: 100%;
}
.socialgrid li .greybar_wide {
	position: relative;
	bottom: -55px;
	background-color: 
	rgba(0,0,0,.5);
	width: 120%;
	left: -10.2%;
}

}
@media all and (min-width:60em) {.socialgrid li {
	width: 32%;
	display: inline-block;
}
.socialgrid li.wide {
	width: 65%;
}
.socialgrid li .greybar_wide {
	position: relative;
	bottom: -73px;
	background-color: 
	rgba(0,0,0,.5);
	width: 108%;
	left: -4.3%;
}


}