/* */
@font-face { font-family: anmari; src: url("fonts/ANMARI__.TTF");} 

body {
	font-family: serif;
	text-align: center;
	margin: auto;
}

h2.fn,
#banner {
	font-family: anmari, serif;
	font-size: 2em;
	padding: 0;
	margin: 1em
}

#banner {
	font-size: 4em;
	padding: 0;
	margin: 0.5em 0;
	}

.social {
	text-align: center;
	margin: auto;
	padding: 0 1em 1em 0;
}

.social div {
	display: inline-block;
}

.social a {
	text-decoration: none;
	padding: 1em 0 1em 0;
	display: inline-block;
}

.social a:before {
	display: inline-block;
	font-family: FontAwesome;
	font-size: 2em;
	width: 2em;
	}

.social a[href*="mailto"]:before {content:"\f0e0";		color: #f05d21; }	
.social a[href*="profiles.wordpress"]:before {content:"\f19a";	color: #21759b;}
.social a[href*="twitter"]:before {content:"\f099"; 		color: #007bb6;}
.social a[href*="facebook"]:before {content:"\f09a"; 	color: #3b5998;}
.social a[href*="linkedin"]:before {content:"\f0e1"; 	color: #0077b5;} 
.social a[href*="plus.google"]:before {content:"\f0d5"; 	color: #d34836;}
.social a[href*="stackexchange"]:before {content:"\f18d";color: #91d8f4;}
.social a[href*="smarterer"]:before {content:"\f164";color: #69b5e1;}

.social a[href*="mailto"]:hover { background:		 		#f05d21;}	
.social a[href*="profiles.wordpress"]:hover { background: 	#21759b;}
.social a[href*="twitter"]:hover { background:				#007bb6;}
.social a[href*="facebook"]:hover { background: 				#3b5998;}
.social a[href*="linkedin"]:hover { background: 				#0077b5;} 
.social a[href*="plus.google"]:hover { background: 			#d34836;}
.social a[href*="stackexchange"]:hover { background: 		#91d8f4;}
.social a[href*="smarterer"]:hover { background:				#69b5e1;}

.social a:hover::before {color: #fff; }

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
	}

#cf4a {
	clear: both;
}	

#links img,
#cf4a img {
  left:0;
  padding: 0; /* to make shadow show */
  margin: 1em;
}

.shadow, 
#links img,
#cf4a img {
    -webkit-box-shadow: 5px 5px 5px #aaa;
    -moz-box-shadow: 5px 5px 5px #aaa;
    box-shadow: 5px 5px 5px #aaa;
    margin-bottom: 10px;
}	

	
#links  a:hover img {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}	


@media all and (min-width: 800px) {
}

/* for 700px or less */
@media screen and (max-width: 600px) {
}