/*	
Theme Name: Madagascar
Theme URI: http://noscope.com/
Description: A chameleon.
Author: Joen Asmussen
Author URI: http://noscope.com/
Version: 1.0
*/

/* CSS Mini Reset */
html, body, div, form, fieldset, legend, label {
	margin: 0;
	padding: 0; 
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th, td {
	text-align: left;
	vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img {
	border: 0; 
	vertical-align: middle;
}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}


/**
 * General
 */

body {
	font-family: "Work Sans", sans-serif;
	font-size: 12pt;
	color: #000;
}

#infinite-footer {
	display: none;
}


/**
 * Paragraphs & Headlines
 */

body {
	line-height: 1.8;
}

h1 {
	font-size: 64px;
	line-height: 1.2;
	margin-bottom: 30px;
	font-weight: bold;
}

h2 {
	font-size: 48px;
}

h3 {
	font-size: 36px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-top: 30px;
	margin-bottom: 30px;
}

@media only screen and ( max-width: 500px ) {

	h1 {
		font-size: 48px;
		margin-bottom: 0px;
	}
	
	h2 {
		font-size: 36px;
	}

	h2 {
		font-size: 30px;
	}

}


/**
 * Animation
 */

a {
	transition: all .1s ease-in-out;
}


/**
 * Header
 */

.menu-primary-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

#menu-primary {
	overflow: auto;
	white-space: nowrap;
}

body.logged-in .menu-primary-container,
body.logged-in #navigation #searchform {
	top: 32px;
}

@media only screen and ( max-width: 782px ) {

	body.logged-in .menu-primary-container,
	body.logged-in #navigation #searchform {
		top: 46px;
	}

}

.menu-primary-container {
	overflow: auto;
}

.menu-primary-container ul {
	margin: 0;
	padding: 0;
	text-align: center;
}

.menu-primary-container ul li {
	list-style: none;
	display: inline;
	margin: 0;
}

.menu-primary-container ul li a {
	display: inline-block;
	margin-top: 4px;
	padding: 20px 30px;
}

header#navigation {
	background: #fff;
	width: 300px;
	margin: 100px auto 60px auto;
	text-align: center;
}

header#navigation h1 {
	width: 256px;
	margin: 0 auto;
}

header#navigation a {
	text-decoration: none;
	color: #000;
}

header#navigation a:hover {
	text-decoration: none;
	color: #f05a3f;
	fill: currentColor;
}

header#navigation h1 a {
	display: block;
	height: 256px;
	overflow: hidden;
}

header#navigation h2 {
	font-size: 11pt;
	margin-bottom: 40px;
}

.search-form span,
.search-form input[type=submit] {
	display: none;
}

.search-form input[type=text] {
	width: 210px;
}

.menu-primary-container ul li.current-menu-item a {
	margin-top: 0;
	border-top: 4px solid #000;
}

a#random-post {
	display: block;
	width: 64px;
	height: 64px;
	position: fixed;
	z-index: 1;
	padding: 20px;
	top: 0px;
	right: 0px;
}

body.logged-in a#random-post {
	top: 32px;
}

@media only screen and ( max-width: 782px ) {

	body.logged-in a#random-post {
		top: 46px;
	}

}

@media only screen and ( max-width: 500px ) {

	.menu-primary-container ul li a {
		padding: 20px 15px;
	}

	header#navigation {
		margin: 70px auto 50px auto;
	}

	a#random-post {
		display: none;
	}

}


/**
 * General post design
 */

html,
body,
#container,
#main {
	height: 100%;
}


h1 a {
	text-decoration: none;
}

ol li, ul li {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 30px;
}

ul {
	list-style-type: square;
}

#content article {
	padding: 60px 0;
/*	min-height: 100%; */
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

body.single #content article,
body.page #content article {
	min-height: 0;
}

#content article.post {
	justify-content: center;
}

#nav-single,
#post-comments,
#content .syntaxhighlighter,
#content form,
.embed-twitter,
#content article .entry-meta,
#content article h1,
#content article h2,
#content article h3,
#content article h4,
#content article h5,
#content article h6,
#content article ol,
#content article ul,
#content article blockquote,
#content article pre,
#content article p,
#content hr,
#content span.rating,
.sharedaddy {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 600px;
}

body.home.infinity-success #nav-single {
	display: none;
}

hr {
	border: none;
	border-top: 1px solid rgba(0,0,0,.2);
}

#content .syntaxhighlighter {
	padding: 20px 0 !important;
	margin: 1em auto !important;
}

blockquote {
	padding-left: 20px;
	padding-right: 20px;
	border-left: 3px solid currentColor;
}

#content article a:hover {
	color: currentColor !important;
}

@media only screen and ( max-width: 500px ) {

	#content article {
		padding: 0 20px;
	}

}

#nav-single {
	line-height: 100px;
	margin-bottom: 40px;
	overflow: hidden;
}

#nav-single>div>span {
	display: block;
	width: 50%;
}

#nav-single a {
	display: block;
	text-decoration: none;
	color: #000;
}

#nav-single a:hover {
	color: #f05a3f;
}

#nav-single .nav-previous {
	float: left;
}

#nav-single .nav-next {
	float: right;
	text-align: right;
}


/**
 * Masonry image posts
 */

body.page-template-page-projects #content {
	column-count: 4;
	column-gap: 0;
	margin-bottom: 200px;
}

@media only screen and ( max-width: 1600px ) {

	body.page-template-page-projects #content {
		column-count: 3;
	}

}

@media only screen and ( max-width: 920px ) {

	body.page-template-page-projects #content {
		column-count: 2;
	}

}

@media only screen and ( max-width: 640px ) {

	body.page-template-page-projects #content {
		column-count: 1;
	}

}

body.page-template-page-projects #content article img {
	width: 100%;
}

body.page-template-page-projects #content article {
	break-inside: avoid;
	padding: 0;
}

/* hover fade
body.page-template-page-projects #content article {
	transition: .2s opacity;
}

body.page-template-page-projects #content:hover article {
	opacity: .3;
}

body.page-template-page-projects #content article:hover {
	opacity: 1;
}
*/

body.page-template-page-projects #content article a.zoom {
	position: fixed;
	z-index: 10;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: black;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: none;
}

body.logged-in.page-template-page-projects #content article a.zoom {
	top: 32px;
}

@media only screen and ( max-width: 782px ) {

	body.logged-in.page-template-page-projects #content article a.zoom {
		top: 46px;
	}

}


body.page-template-page-projects #content article a.zoom img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

html.modal body {
	overflow-y: hidden;
}



/**
 * Sharedaddy
 */

.sharedaddy h3 {
	display: none !important;
}

div.jetpack-likes-widget-wrapper,
.sharedaddy iframe {
	min-height: 0 !important;
	height: 26px;
}


/**
 * Gallery design
 */

.entry-content .gallery {
	padding: 0 40px;
	display: flex;
	flex-wrap: wrap;
}

.entry-content .gallery dl {
	margin: auto;
	padding: 30px 20px;
}

.entry-content .gallery br {
	display: none;
}

.entry-content .gallery img {
	box-shadow: 0 0 0 rgba(0,0,0,.1);
}

.entry-content .gallery a:hover img {
	transition: all .2s ease-in-out;
}

.entry-content .gallery a:hover img {
	box-shadow: 0 10px 30px rgba(0,0,0,.4);
}


/**
 * Generic meta
 */

.entry-meta {
	margin-top: 60px;
	margin-bottom: 60px;
}

#content article .entry-meta>span {
	margin-right: 20px;
}

#content article .entry-meta span span {
	opacity: .5;
}

#content article .entry-meta a {
	color: currentColor;
}

.comments-link {
	display: none;
}


/**
 * Forms
 */

input,
textarea {
	font-family: "Work Sans", sans-serif;
	font-size: 11pt;
}

input,
textarea {
	padding: 8px 12px;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,.2);
}

input:focus,
textarea:focus {
	box-shadow: 0 0 0 4px rgba(0,0,0,.05);
	outline: none;
}

textarea {
	width: 100%;
}

input[type=submit] {
	border: none;
	background: #f5f5f5;
	padding: 16px 22px;
	color: #000;
	cursor: pointer;
}

input[type=submit]:hover {
	background: #000;
	color: #fff;
}

#content .contact-form label span {
	color: currentColor;
	opacity: .5;
}

#content .contact-form textarea {
	width: 100%;
}


/**
 * Post comments
 */

p.nocomments {
	display: none;
}

#post-comments {
	padding-bottom: 100px;
}

#post-comments a {
	color: #888;
}

#post-comments a:hover {
	color: #f25a43;
}

#post-comments a:visited {
	color: #48268e;
}

p.comment-subscription-form {
	margin: 0;
}

ol.comment-list {
	list-style: none;
	padding: 0;
}

ol.comment-list>li {
	margin-left: 0;
}

.comment-body {
	position: relative;
	margin-bottom: 40px;
}

.children {
	list-style: none;
	padding: 0;
}

li.comment #respond {
	border-top: 1px solid rgba(0,0,0,.2);
	margin-bottom: 60px;
}

#respond {
	position: relative;
}

#respond h3 {
	margin-top: 20px;
	margin-bottom: 0;
}

#respond>p {
	margin: 0;
}

#cancel-comment-reply a {
	display: block;
	width: 36px;
	height: 36px;
	overflow: hidden;
	text-indent: 100%;
	position: absolute;
	top: 36px;
	right: 0;
	white-space: nowrap;
}

#cancel-comment-reply a:before,
#cancel-comment-reply a:after {
	content: "";
	display: block;
	background: black;
	width: 100%;
	height: 2px;
	position: absolute;
	top: 16px;
	transition: all .2s ease-in-out;
}

#cancel-comment-reply a:before {
	transform: rotate(45deg);
}

#cancel-comment-reply a:after {
	transform: rotate(135deg);
}

#cancel-comment-reply a:hover:before,
#cancel-comment-reply a:hover:after {
	background: #f25a43;
}

#cancel-comment-reply a:hover:after {
	animation: jiggle1 1s infinite;
}

#cancel-comment-reply a:hover:before {
	animation: jiggle2 1s infinite;
}

@keyframes jiggle1 {
	0% {
		transform: rotate(135deg);
	}
	50% {
		transform: rotate(45deg);
	}
	0% {
		transform: rotate(135deg);
	}
}

@keyframes jiggle2 {
	0% {
		transform: rotate(45deg);
	}
	50% {
		transform: rotate(135deg);
	}
	0% {
		transform: rotate(45deg);
	}
}

img.avatar {
	border-radius: 50%;
	margin-right: 10px;
}

.comment-author, .comment-meta {
	line-height: 32px;
}

.comment-author cite {
	font-style: normal;
}

.comment-meta {
	position: absolute;
	top: 0;
	right: 0;
}

#post-comments .comment-meta a {
	color: #ccc;
	display: inline-block;
	width: 10px;
	overflow: hidden;
	white-space: nowrap;
}

#post-comments .comment-meta a:first-child:before {
	content: "#";
}

#post-comments .comment-meta a.comment-edit-link,
#post-comments .comment-meta a:hover {
	width: auto;
}


/**
 * Responsive
 */

img {
	max-width: 100%;
	height: auto;
}

img.size-full,
img.size-large {
	max-width: 100%;
	width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}


/**
 * Footnotes
 */

.footnote-link {
  font-weight: bold;
  padding: 0 0 0 3px;
}

ol.footnotes {
	padding: 20px 0 0 0;
}

hr.footnotes {
	display: none;
}

ol.footnotes:before {
	content: "";
	display: block;
	border-top: 1px solid rgba(0,0,0,.2);
	max-width: 300px;
	margin: 0 0 20px 0;
}


/**
 * Other Stylings
 */

img.centered img,
.aligncenter img,
div.aligncenter img {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

img.alignright,
img.alignleft {
	display:inline;
}

.alignright img {
	float: right;
	margin-left: 24pt;
}

.alignleft img {
	float:left;
	margin-right: 24pt;
}

img.fullbleed {
	max-width: 100%;
	height: auto;
}

span.rating {
	display: block;
}

span.rating span {
	color: currentColor;
}

span.rating span.empty {
	color: currentColor;
	opacity: .2;
}


.image.alignright,
.image.alignleft {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

.image.size-large {
	text-align: center;
}


/**
 * Responsive video and big images
 */

.embed {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.embed {
	position: relative;
	padding-top: 56.25%;
}

.embed,
.image.size-full {
	margin: 0 100px;
}

.image.size-full {
	text-align: center;
}

@media only screen and ( max-width: 820px ) {
	.embed,
	.image.size-full {
		margin: 0 auto;
	}
}

.embed iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


/**
 * Assign 9 color sets based on random seeds
 */

/* blue + light blue */
article.colors-1 {
	background: #281d31;
	color: #dde1e6;
}

article.colors-1 a,
article.colors-1 h2,
article.colors-1 h3,
article.colors-1 h4 {
	color: #696a8b;
}


/* green + olive */
article.colors-2 {
	background: #688781;
	color: #f6fafc;
}

article.colors-2 a,
article.colors-2 h2,
article.colors-2 h3,
article.colors-2 h4 {
	color: #eaed96;
}


/* white + gray */
article.colors-3 {
	background: #f3f1e8;
	color: #5d6383;
}

article.colors-3 a,
article.colors-3 h2,
article.colors-3 h3,
article.colors-3 h4 {
	color: #be6978;
}


/* brown + firered */
article.colors-4 {
	background: #3d2333;
	color: #C3B8CB;
}

article.colors-4 a,
article.colors-4 h2,
article.colors-4 h3,
article.colors-4 h4 {
	color: #ec6d55;
}


/* pink + bordeaux */
article.colors-5 {
	background: #79384E;
	color: #DD9F93;
}

article.colors-5 a,
article.colors-5 h2,
article.colors-5 h3,
article.colors-5 h4 {
	color: #2d1f33;
}


/* indigo + black */
article.colors-6 {
	background: #393D6E;
	color: #E2CEB8;
}

article.colors-6 a,
article.colors-6 h2,
article.colors-6 h3,
article.colors-6 h4 {
	color: #ab91d2;
}


/* sand + sea */
article.colors-7 {
	background: #bdd6dc;
	color: #4F5C77;
}

article.colors-7 a,
article.colors-7 h2,
article.colors-7 h3,
article.colors-7 h4 {
	color: #5699B0;
}


/* salmon + soda */
article.colors-8 {
	background: #e8574d;
	color: #fff;
}

article.colors-8 a,
article.colors-8 h2,
article.colors-8 h3,
article.colors-8 h4 {
	color: #b8c8cc;
}


/* brown + pink */
article.colors-9 {
	background: #9e5244;
	color: #eddeca;
}

article.colors-9 a,
article.colors-9 h2,
article.colors-9 h3,
article.colors-9 h4 {
	color: #d88a60;
}


/**
 * Assign headline fonts based on random seeds
 */

/* now just 1 font,
	- Abril Fatface
*/


article h1,
article h2,
article h3,
article h4 {
	font-family: "Abril Fatface";
	font-weight: normal;
}

/* 
	10 fonts:
	- Playfair Display
	- Fredoka One
	- Oswald
	- Old Standard TT
	- Abril Fatface
	- Ultra
	- Permanent Marker
	- Monoton
	- Sofia
*/

/*article.fonts-1 h1,
article.fonts-1 h2,
article.fonts-1 h3,
article.fonts-1 h4 {
	font-family: "Paytone One";
}

article.fonts-2 h1,
article.fonts-2 h2,
article.fonts-2 h3,
article.fonts-2 h4 {
	font-family: "Playfair Display";
}

article.fonts-3 h1,
article.fonts-3 h2,
article.fonts-3 h3,
article.fonts-3 h4 {
	font-family: "Old Standard TT";
}

article.fonts-4 h1,
article.fonts-4 h2,
article.fonts-4 h3,
article.fonts-4 h4 {
	font-family: "Fredoka One";
}

article.fonts-5 h1,
article.fonts-5 h2,
article.fonts-5 h3,
article.fonts-5 h4 {
	font-family: "Abril Fatface";
}

article.fonts-6 h1,
article.fonts-6 h2,
article.fonts-6 h3,
article.fonts-6 h4 {
	font-family: "Oswald";
}

article.fonts-7 h1,
article.fonts-7 h2,
article.fonts-7 h3,
article.fonts-7 h4 {
	font-family: "Ultra";
}

article.fonts-8 h1,
article.fonts-8 h2,
article.fonts-8 h3,
article.fonts-8 h4 {
	font-family: "Sofia";
}

article.fonts-9 h1,
article.fonts-9 h2,
article.fonts-9 h3,
article.fonts-9 h4 {
	font-family: "Monoton";
	font-weight: normal;
}

article.fonts-10 h1,
article.fonts-10 h2,
article.fonts-10 h3,
article.fonts-10 h4 {
	font-family: "Permanent Marker";
}

*/