/*
 * Primary color:      #8BC34A
 * Dark primary color: #689F38
 * Primary text:       #212121
 * Secondary text:     #757575
 * Divider color:      #BDBDBD
 * Light divider color: #F3F3F3
 */

body {
	/*font-family: "Merriweather Sans";*/
	font-family: 'Open Sans';
	color: #212121;
	background-color: #212121;
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Oleo Script Swash Caps';
	font-weight: normal;
	font-size: 175%;
	color: #757575;
}

a {
	transition: 0.5s;
	color: #689F38;
	text-decoration: none;
}

a:hover {
	color: #8BC34A;
	text-decoration: underline;
}

.button {
	cursor: pointer;
	transition: 0.5s;
	display: inline-block;
	color: white;
	background-color: #689F38;
	padding: 0.5em 1em;
	border-radius: 3px;
}

.button:hover {
	background-color: #8BC34A;
}



/*
 * Main header and title
 */
#title {
	background: radial-gradient(circle, #8BC34A, #689F38);
	margin: 0;
	padding: 0.2em 0;
}

#title.overflow {
	background: linear-gradient(rgba(0,0,0,0.5) 25%, rgba(0,0,0,0));
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6em;
}

#title h1 {
	font-size: 1.75em;
	font-family: 'Oleo Script Swash Caps';
	margin: 0;
	padding: 0;
}

#title h2 {
	color: white;
	font-size: 0.75em;
	font-family: 'Open Sans';
	position: relative;
	margin: 0;
	top: -0.5em;
}

#title a {
	color: white;
	text-decoration: none;
}

#title a:hover {
	color: white;
	text-decoration: underline;
}


/*
 * Main navigation bar
 */
#menu {
	padding: 0;
	margin: 0;
	background: none;
	font-size: 1em;
	position: absolute;
	display: block;
	text-align: right;
	top: 0;
	right: 0;
}

#menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#menu li {
	margin-left: 0.75em;
	display: inline-block;
}

#menu a {
	display: inline-block;
	color: white;
	text-decoration: none;
	padding: 0.5em;
	margin-top: 0.75em;
	border-radius: 3px;
}

#menu a:hover
{
	background-color: rgba(255,255,255,0.2);
}

#menu .social {
	/*margin-left: 1em;*/
	margin-top: auto;
	margin-bottom: auto;
}

#menu .social a {
	display: inline-block;
	color: white;
	background-color: #BDBDBD;
	border-radius: 3px;
	padding: 0;
}

#menu .social a:hover {
	background-color: #212121;
}


/***************/
/* Static page */
/***************/
main#static {
	background-color: white;
	padding-top: 4em;
	padding-bottom: 4em;
}

main#static article header {
	padding-bottom: 2em;
}

main#static article header h1 {
	font-size: 2.25em;
	font-family: 'Oleo Script Swash Caps';
	/*font-weight: normal;*/
	margin: 0;
}


/***************************/
/* static page with banner */
/***************************/
main#static-with-banner {
}

main#static-with-banner h2 {
	text-align: center;
	color: #689F38;
}

main#static-with-banner section {
	padding-top: 2em;
	padding-bottom: 2em;
}

main#static-with-banner section .floating-section {
	display: flex;
	margin: 1em 0;
	text-align: left;
}

/*main#static-with-banner section .floating-image:nth-child(2n+2) {
	flex-direction: row-reverse;
	text-align: right;
}*/

main#static-with-banner section .text {
	display: inline-block;
	margin: 1em 0;
	/*flex: 2;*/
	padding: 0 2em;
}

main#static-with-banner section .floating {
	display: inline-block;
	/*flex: 1;*/
	margin-top: auto;
	margin-bottom: auto;
}

main#static-with-banner img.popup {
	border-radius: 3px;
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.3);
	width: 100%;
}

main#static-with-banner section .columns h3 {
	font-size: 1em;
	/*font-family: 'Open Sans';*/
	/*font-weight: lighter;*/
}

main#static-with-banner section .columns p {
	font-size: 0.8em;
	font-family: 'Open Sans';
}

main#static-with-banner #banner {
	padding: 0;
	background-color: rgba(0,0,0,0.2);
	min-height: 40em;
	display: flex;
}

main#static-with-banner #banner #backgrounds {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	text-align: center;
}

main#static-with-banner #banner #backgrounds img {
	margin: auto;
	min-width: 100%;
	min-height: 100%;
}

main#static-with-banner #banner #message {
	font-family: 'Oleo Script Swash Caps';
	font-size: 1.75em;
	text-shadow: 0 0 5px #000;
	display: inline-block;
	width: 100%;
	text-align: center;
	color: white;
	margin-top: auto;
	margin-bottom: auto;
}

main#static-with-banner section:nth-child(2n+2) {
	background-color: white;
	font-size: 111%;
	/*-moz-column-count: 2;
	column-count: 2;*/
}

main#static-with-banner section:nth-child(2n+3) {
	background-color: #F3F3F3;
	font-size: 111%;
	/*-moz-column-count: 2;
	column-count: 2;*/
}



/*main#static-with-banner section:nth-child(even) {
	background-color: #F3F3F3;
}*/

/*********************/
/* main blog section */
/*********************/
main#blog {
	background: linear-gradient(to right, #E9E9E9, #F1F1F1, #E9E9E9);
	padding-top: 3em;
	padding-bottom: 3em;
}


/*********************/
/* Blog article list */
/*********************/
#article-list {
	-moz-column-count: auto;
  column-count: auto;
  -moz-column-width: 400px;
  column-width: 400px;
  -moz-column-gap: 2em;
  column-gap: 2em;
	font-size: small;
}

#article-list article {
	background: white;
	box-shadow: 0 0 3px 0px rgba(0,0,0,0.2);
	margin-bottom: 2em;
	border-radius: 3px;
	text-align: left;
	display: inline-block;
	width: 100%;
}

#article-list article h1,
#article-list article h2,
#article-list article h3,
#article-list article h4,
#article-list article h5,
#article-list article h6,
#article-list article p {
	margin-left: 1em;
	margin-right: 1em;
}

#article-list article figure {
	margin: 0;
	overflow: hidden;
	text-align: center;
	width: 100%;
}

#article-list article figure figcaption {
	display: none;
}

#article-list article figure a {
	display: flex;
}

#article-list article img {
	max-height: 300px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#article-list article header {
	background-color: #F3F3F3;
	text-align: center;
	padding: 0.5em 1em;
}

#article-list article header h1 {
	font-size: 1.5em;
	font-family: 'Oleo Script Swash Caps';
	margin: 0;
}

#article-list article header a {
	color: #212121;
	text-decoration: none;
}

#article-list article header a:hover {
	color: #8BC34A;
}

#article-list article footer {
	background-color: rgba(0,0,0,0.03);
	font-size: 75%;
	color: #757575;
	display: flex;
}

#article-list article footer .publication-info {
	margin: 0.75em;
	flex: 1;
	display: inline-block;
}

#article-list article footer .comments-info {
	margin: 0.75em;
	display: inline-block;
	margin-top: auto;
	margin-bottom: auto;
}

#pagination {
	font-size: small;
	text-align: center;
	display: flex;
	color: #757575;
}

#pagination a {
	display: inline-block;
	color: white;
	text-decoration: none;
	padding: 0.5em;
	border-radius: 3px;
	background-color: #BDBDBD;
}

#pagination a:hover {
	color: white;
	background-color: #689F38;
}

#pagination .p_page
{
	flex: auto;
	margin-top: auto;
	margin-bottom: auto;
}



/***********************/
/* Blog single article */
/***********************/

#single-article {
	background: white;
	border-radius: 3px;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.1);
}

#single-article article > header,
#single-article article > p,
#single-article article > figure,
#single-article article > footer > *,
#single-article #comments,
#single-article #new-comment {
	padding: 2em;
}

#single-article header {
	background: linear-gradient(#F3F3F3, white);
	text-align: center;
}

#single-article header h1 {
	font-size: 2.5em;
	font-family: 'Oleo Script Swash Caps';
	margin: 0;
}

#single-article header a {
	color: #212121;
	text-decoration: none;
}

#single-article header a:hover {
	color: #8BC34A;
}

#single-article .publication-info {
	color: #757575;
	font-size: 0.75em;
	margin: 0;
}

#single-article figure {
	text-align: center;
	color: #757575;
	font-size: smaller;
}

#single-article img {
	border: 1px solid #212121;
}

#single-article footer {
	background-color: #F3F3F3;
	font-size: 0.75em;
	color: #757575;
}

#single-article footer #categories-tags-comments-info {
	display: flex;
}

#single-article footer #categories-info,
#single-article footer #tags-info,
#single-article footer #comments-info {
	margin: 0;
	display: inline-block;
	margin-top: auto;
	margin-bottom: auto;
}

#single-article footer #categories-info,
#single-article footer #tags-info {
	margin-right: 1em;
}

#single-article footer #author-info {
	background-color: #757575;
	color: #F3F3F3;
}

#single-article footer #author-info h3 {
	font-family: 'Oleo Script Swash Caps';
	font-size: 1.5em;
	margin: 0;
}

#comments {
	border-top: 1px solid #F3F3F3;
	color: #757575;
}

#comments h2 {
	font-weight: normal;
	margin-top: 0;
}

#comments .comment {
	font-size: small;
	background-color: #F3F3F3;
	padding: 1em;
	margin-bottom: 1em;
	border-radius: 0 1.25em 1.25em 1.25em;
}

#comments .comment h3 {
	margin: 0;
	font-size: small;
	font-weight: bold;
}

#comments .comment h3 time {
	font-size: smaller;
	font-weight: lighter;
}

#comments .level-1 {
	margin-left: 1.5em;
}

#comments .level-2 {
	margin-left: 3em;
}

#comments .level-3 {
	margin-left: 4.5em;
}

#new-comment {
	border-top: 1px solid #F3F3F3;
	color: #757575;
}

#new-comment h2 {
	font-weight: normal;
	margin-top: 0;
}

#new-comment form {
	font-size: small;
}

#new-comment form * {
	margin-bottom: 0.75em;
}

#new-comment form fieldset {
	border: 1px solid #BDBDBD;
	border-radius: 3px;
	padding: 0.5em 1em;
}

#new-comment form fieldset legend {
	font-weight: bold;
}

#new-comment form #com_message {
	color: red;
	font-weight: bold;
}

#new-comment form input#id_name,
#new-comment form input#id_mail,
#new-comment form input#id_site,
#new-comment form textarea
{
	display: block;
	color: #757575;
	width: 50%;
	background-color: #F3F3F3;
	border: none;
	padding: 0.5em;
	border-radius: 3px;
}

#new-comment form textarea {
	width: 100%;
}

#new-comment form .capcha-word {
	color: #212121;
	font-weight: bold;
}

#new-comment form input[type=submit] {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
}

#blog-filter {
	text-align: center;
	color: #757575;
	padding-bottom: 1em;
	margin-bottom: 3em;
	border-bottom: 1px dashed #BDBDBD;
}

#blog-filter h2 {
	font-weight: normal;
}


/*
 * Aside blog content
 */
 #blog-sidebar {
	background-color: white;
	border-top: 1px dashed #BDBDBD;
	color: #757575;
	font-size: 0.8em;
	display: flex;
	flex-wrap: wrap;
	padding-top: 1em;
	padding-bottom: 1em;
}

#blog-sidebar a {
	color: #689F38;
	text-decoration: none;
}

#blog-sidebar a:hover {
	text-decoration: underline;
}

#blog-sidebar li {
	margin-bottom: 0.5em;
}

#blog-sidebar section {
	margin-top: 1em;
	margin-right: 1em;
}

#blog-sidebar section h3 {
	font-weight: normal;
	font-size: big;
	margin: 0;
}

#blog-sidebar section ul {
	list-style: none;
	padding: 0;
}

#blog-sidebar #category-list {
	min-width: 10em;
	flex: 1;
}

#blog-sidebar #tag-list
{
	min-width: 10em;
	flex: 2;
}

#blog-sidebar #category-list li,
#blog-sidebar #tag-list li
{
	display: inline-block;
	margin-right: 0.75em;
}

/*
 * Footer
 */
#footer {
	position: relative;
	bottom: 0;
	width: 100%;
}
#footer-misc {
	background-color: #212121;
	color: #757575;
	text-align: center;
	font-size: 0.75em;
	padding-top: 1em;
	padding-bottom: 1em;
}

#footer-misc a {
	color: #757575;
	text-decoration: underline;
}

#footer-misc a:hover {
	color: #689F38;
}

#footer-social {
	background: radial-gradient(circle, #8BC34A, #689F38);
	text-align: left;
	font-size: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
}

#footer-social a {
	border-radius: 3px;
	display: inline-block;
	color: #689F38;
	background: white;
	text-align: center;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

#footer-social a:hover {
	box-shadow: 0 0 10px white;
}

#footer-social ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#footer-social li {
	display: inline;
	margin-right: 1em;
}


/*****************************/
/* Responsiveness management */
/*****************************/

#title,
#menu,
#blog-sidebar,
#footer-social,
#footer-misc,
#blog {
	padding-left: 1em;
	padding-right: 1em;
}

@media (max-width: 550px){
 #blog img {
	 width: 200px;
 }

 #blog article {
	 padding: 1em;
 }
}

@media (min-width: 551px) and (max-width: 700px){
 #blog img {
	 width: 350px;
 }

 #blog article {
	 padding: 1em;
 }
}

@media (min-width: 701px) and (max-width: 900px){
 #blog img {
	 width: 500px;
 }
}


@media (max-width: 979px){
	#title h2 {
		display: none;
	}

	#menu a {
		margin-top: 0.55em;
	}

	#article-list article img,
	#single-article article img {
		max-width: 600px;
	}

	#article-list {
		-moz-column: none;
	  column: none;
	}

	#single-article {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (min-width: 980px){
	#blog {
		padding-top: 1em;
		padding-bottom: 1em;
	}

	#article-list {
		-moz-column-width: 400px;
	  column-width: 400px;
		-moz-column-gap: 1em;
		column-gap: 1em;
	}

	#single-article {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (min-width: 1280px){
	#title,
	#menu,
	#static,
	#static-with-banner section,
	#blog,
	#blog-sidebar,
	#footer-social,
	#footer-misc {
		padding-left: 10%;
		padding-right: 10%;
	}

	#article-list {
		-moz-column-width: 300px;
	  column-width: 300px;
		-moz-column-gap: 2em;
		column-gap: 2em;
	}

	#single-article {
		margin-left: 5%;
		margin-right: 5%;
	}
}

@media (min-width: 1920px){
	#title,
	#menu,
	#static,
	#static-with-banner section,
	#blog,
	#blog-sidebar,
	#footer-social,
	#footer-misc {
		padding-left: 15%;
		padding-right: 15%;
	}

	#static-with-banner {
		padding-left: 0;
		padding-right: 0;
	}

	#article-list {
		-moz-column-width: 400px;
		column-width: 400px;
	}

	#single-article {
		margin-left: 10%;
		margin-right: 10%;
	}
}