/* TMI Thing */
.info {
	position: relative;
	padding-left: 20px;
	margin-bottom: 20px;
}

.info-label {
	position: absolute;
	left: -10px;
	width: 2px;
	top: 0;
	bottom: 0;
	background: purple;
	display: block;
}

.info .info-label span {
	text-transform: uppercase;
	font-size: 10px;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	display: block;
	position: absolute;
	left: 13px;
	white-space: nowrap;
	width: 100%;
}

.useful .info-label span {
	bottom: 0;
}

.tmi .info-label span {
	top: 0;
	margin-top: 129px;
}

/*@media (min-width: 768px) {
	#header {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background: rgb(235,235,230);
		background: rgba(235, 235, 230,0.95);
		z-index: 100;
	}
	
	#header #logo,
	#header #nav {
		padding: 20px;
	}
	
	#wrapper {
		padding-top: 100px;
	}
}

 about colors 
#logo a:hover .first .b {
	color: orange;
}

#logo a:hover .first .e {
	color: #FF8844;
}

#logo a:hover .first .c {
	color: coral;
}

#logo a:hover .first .k {
	color: tomato;
}

#logo a:hover .first .y {
	color: #ff6666;
}

#logo a:hover .last .a {
	color: #ff6699;
}

#logo a:hover .last .i {
	color: #ff66bb;
}

#logo a:hover .last .k {
	color: #ff0099;
}

#logo a:hover .last .e {
	color: #cc00cc;
}

#logo a:hover .last .n {
	color: #9900CC;
}*/

section {
	margin-bottom: 30px;
}

.bio {
  	display: flex;
}

.bio .photo,
.bio .text {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.bio .photo {
	width: 60%;
}

.bio .photo img {
	width: 100%;
	height: auto;
}

.bio .photo {
	position: relative;
}

.bio .photo .catlady {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.bio .photo.reveal .catlady {
	opacity: 1;
}

.bio .text {
	width: 39%;
	font-size: 18px;
	line-height: 1.5;
}

.bio .text p:first-child {
	margin-top: 0;
}

@-webkit-keyframes heartswell {
  0%   { -webkit-transform: scale(0.75); }
  50%  { -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(0.75); }
}

@-webkit-keyframes rainbow {
  0%   { color: orange;  }
  10%  { color: #FF8844; }
  20%  { color: coral;   }
  30%  { color: tomato;  }
  40%  { color: #ff6666; }
  50%  { color: #ff6699; }
  60%  { color: #ff66bb; }
  70%  { color: #ff0099; }
  80%  { color: #cc00cc; }
  90%  { color: #9900CC; }
  100% { color: orange;  }
} 

@-moz-keyframes heartswell {
  0%   { -moz-transform: scale(0.75); }
  50%  { -moz-transform: scale(1); }
  100% { -moz-transform: scale(0.75); }
}

@-moz-keyframes rainbow {
  0%   { color: orange;  }
  10%  { color: #FF8844; }
  20%  { color: coral;   }
  30%  { color: tomato;  }
  40%  { color: #ff6666; }
  50%  { color: #ff6699; }
  60%  { color: #ff66bb; }
  70%  { color: #ff0099; }
  80%  { color: #cc00cc; }
  90%  { color: #9900CC; }
  100% { color: orange;  }
} 

@keyframes heartswell {
  0%   { transform: scale(0.75); }
  50%  { transform: scale(1); }
  100% { transform: scale(0.75); }
}

@keyframes rainbow {
  0%   { color: orange;  }
  10%  { color: #FF8844; }
  20%  { color: coral;   }
  30%  { color: tomato;  }
  40%  { color: #ff6666; }
  50%  { color: #ff6699; }
  60%  { color: #ff66bb; }
  70%  { color: #ff0099; }
  80%  { color: #cc00cc; }
  90%  { color: #9900CC; }
  100% { color: orange;  }
} 

.bio .photo-label {
	position: absolute;
	right: 25px;
	bottom: 20px;
	-webkit-animation: heartswell 3s infinite, rainbow 20s infinite;
	   -moz-animation: heartswell 3s infinite, rainbow 20s infinite;
	        animation: heartswell 3s infinite, rainbow 20s infinite;
	z-index: 100;
	cursor: pointer;
}

.bio .photo-label span {
	display: none;
}

.bio .photo-label:before {
	content: "\33";
	font-family: 'icomoon',arial;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	font-size: 30px; 
	cursor: pointer;
}

.bio .text {
	padding: 1em;
}

.bio .contact-links {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: block;
	text-align: center;
	display: table;
	width: 100%;
}

.bio .contact-links li {
	display: table-cell;
	text-align: center;
	padding: 10px;
	width: 33%;
}

.bio .contact-links a {
	text-transform: uppercase;
	color: #404040;
	background: #D1D1CD;
	padding: 15px 20px;
	border-radius: 5px;
	display: block;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.bio .contact-links a:hover {
	background: #ffbb00;
	color: #fff;
}

.social-links .social {
	display: inline-block;
	*display: inline;
	zoom:1;
	width: 33%;
	text-align: center;
	position: relative;
	vertical-align: top;
	/*padding-top: 30px;*/
}

.social-links .social .subtext {
	filter: alpha(opacity=0);
	opacity: 0;
}

.social-links .social a {
	text-transform: uppercase;
	color: #404040;
	display: block;
	font-size: 18px;
	line-height: 1.25;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
	position: relative;
	padding-bottom: 40px;
	margin: 0 20%;
}

.social-links .social a:after {
	font-family: 'icomoon',arial;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	cursor: pointer;
	display: block;
	font-size: 120px;
	margin-top: 20px;
}

.social-links .instagram a:after {
	content: "i";
}

.social-links .pinterest a:after {
	content: "p";
}

.social-links .twitter a:after {
	content: "#";
}

.social-links .twitter .label {
	/*text-decoration: line-through;*/
}

.social-links .social .label,
.social-links .social .subtext {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
   	transition: all 0.2s ease;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.social-links .social a:hover,
.social-links .social a:hover .label {
	color: orange;
}

.social-links .social a:hover .label {
	/*color: #404040;*/
}

.social-links .social a:hover .label {
	/*opacity: 0;*/
}

.social-links .social a:hover .subtext {
	/*opacity: 1;*/
}

.social-links .twitter .label:after {
	font-family: 'icomoon',arial;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	content: "x";
	color: #EBEBE6;
	position: absolute;
	right: 50%;
	margin-right: -34px;
	bottom: 115px;
	-webkit-transform: rotate(-25deg);
	-moz-transform: rotate(-25deg);
	transform: rotate(-25deg);
	font-size: 24px;
}

.social-links,
.fav,
.nouns {
	min-width: 700px;
}

section h1,
.noun-heading h1 {
	text-transform: uppercase;
	margin: 0 0 10px 10px;
	font-size: 28px;
}

section.fav {
	margin-bottom: 40px;
}

section.noun h1,
.noun-heading h1 {
	padding-left: 5px;
	font-size: 22px;
}

.fav:before,
.fav:after {
    content: " ";
    display: table;
}

.fav:after {
    clear: both;
}

.media {
	float: left;
	width: 33%;
	position: relative;
	text-align: center;
	padding: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.media a {
	display: block;
	line-height: 0;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.media img {
	width: 100%;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
	-webkit-backface-visibility: hidden;
}

.media .name {
	position: absolute;
	left: 13px;
	right: 13px;
	top: 50%;
	margin-top: -14px;
	font-size: 28px;
	line-height: 1;
	height: 28px;
	filter: alpha(opacity=0);
	opacity: 0;
	color: #fff;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
	z-index: 20;
}

.media a:hover .name {
	filter: alpha(opacity=100);
	opacity: 1;
}

.media a:hover img {
	filter: alpha(opacity=15);
	opacity: 0.15;
}

.media.title a {
	background: #ff66bb;
}

.media.author a {
	background: #ff6699;
}

.media.radio a {
	background: #ff6666;
}


.media.music a {
	background: tomato;
}

.media.movie a {
	background: coral;
}

.media.tv a {
	background: #FF8844
}

.nouns {
	display: table;
	width: 100%;
}

.noun {
	display: table-cell;
	padding: 5px;
	width: 33%;
	/* text-align: center; */
	vertical-align: top;
}

.noun ul,
.noun-heading ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.noun-heading {
	display: table;
	width: 100%;
	margin-bottom: 10px;
}

.noun-heading h1,
.noun-heading .key {
	display: table-cell;
	vertical-align: middle;
}

.noun-heading .key {
	text-align: right;
	white-space: nowrap;
}


.noun-heading .key .label,
.noun-heading .key ul,
.noun-heading .key li {
	display: inline-block;
	*display: inline;
	zoom:1;
}

.noun-heading .key .label:before {
	content: "k";
	font-family: 'icomoon',arial;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	color: #7C7C7A;
}

.noun-heading .key .label span {
	display: none;
}

.noun-heading .key a {
	cursor: default;
}

.noun-heading .key a:hover {
	color: #404040;
	background: transparent;
}

.noun a,
.noun-heading a {
	background: #ddd;
	padding: 5px 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin: 0 3px 5px 0;
	display: block;
	color: #404040;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.noun a:hover,
.noun-heading a:hover {
	background: #404040;
	color: #fff;
}

.noun a:before,
.noun-heading a:before {
	content: "";
	width: 8px;
	height: 8px;
	display: inline-block;
	*display: inline;
	zoom:1;
	background: tomato;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	vertical-align: middle;
	margin-right: 5px;
	position: relative;
	top: -1px;
}

.people a:before {
	background: #ff66cc;
}

.people .real a:before {
	background: #ff0099;
}

.places a:before {
	background-color: #cc33cc;
}

.places .food a:before {
	background-color: #ff66ff;
}

.things a:before {
	background-color: #9900CC;
}

.things .service a:before {
	background-color: #cc00cc;
}

/* fixed float */
.nouns-heading {
	display: none;
	background: rgba(235, 235, 230,0.95);
	top: 98px;
	z-index: 200;
	position: fixed;
	left: 0;
	right: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 0 20px;
}

.nouns-heading.fixed {
	display: table;
}

.nouns-heading .noun-heading {
	float: left;
	box-sizing: border-box;
	width: 33%;
	padding: 5px;
	vertical-align: top;
	position: relative;
}

.nouns-heading .key {
	position: absolute;
	right: 0;
	top: 5px;
}

.noun-heading a {
	background: transparent;
}

/* touch */
.touch .media .name {
	opacity: 1;
}

.touch .media img {
	opacity: 0.4;
}

/* mq */
@media (min-width: 600px) and (max-width: 1000px) {
	.media .name { 
  		font-size: 22px; 
  		height: 22px;
  		margin-top: -11px;
  	}

  	.media .long .name {
	  	height: 44px;
	  	margin-top: -22px;
	  }
}

@media (min-width: 1001px) and (max-width: 1150px) {
	.media .name {
		font-size: 28px;
		/* height: 28px;
		margin-top: -14px; */
	}

}

@media (min-width: 1151px) {
	.media .name {
		font-size: 32px;
		height: 32px;
		margin-top: -16px;
	}
}

@media (max-width: 1024px) {
  .bio {
    display: block;
  }
  
	.bio .photo,
	.bio .text {
		display: block;
		width: 100%;
	}
	
	.bio .text {
		padding: 1em 0;
	}
		
	.noun-heading h1 {
		font-size: 18px;
	}
}

@media (max-width: 400px) {
	.media .name {
		font-size: 18px;
		height: 18px;
		margin-top: -8px;
		font-family: 'LatoBlack',arial,sans-serif;
	}

}

@media (min-width: 768px) and (max-width: 1200px) {
	.media {
		width: 50%;
	}
}


@media (max-width: 880px) {
	.noun li {
		display: inline-block;
	}
	
	.nouns, .noun {
		display: block;
	}
	
	.noun {
		width: auto;
	}
}

@media (max-width: 767px) {
	.bio .contact-links li {
		padding: 5px;
		font-size: 16px;
	}
	
	.bio .contact-links a {
		padding: 10px;
	}
	
	.social-links, .fav, .nouns {
		min-width: 0;
	}
	
	.social-links .social {
		width: 32%;
		padding-top: 0;
	}
	
	.social-links .social a {
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.social-links .social a:after {
		font-size: 60px;
	}
	
	.social-links .social svg {
  	width: 60px;
  	margin-top: 0!important;
	}
	
	.social-links .social .label, .social-links .social .subtext {
		display: none;
	}
	
	
	.media {		
		float: none;
		width: 100%;
	}
}

.read-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}

section .read-heading p {
  margin: 0 1em 0 0;
}

.read-heading h1 {
  margin-right: 1em;
}