/**
 * Theme Name: Julie
 * Theme URI: https://clones.charliemerland.me
 * Author: Charlie MERLAND
 * Author URI: https://charliemerland.me
 * Description: A nice and colorful theme for a baby blog.
 * Version: 1.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Tags: 
 * Text Domain: julie
 */


body {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 20px;
}

h1, h2, h3, h4, h5 {
	font-family: 'Amatic SC', cursive;
	font-weight: 100;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong {
	font-weight: 800;
}

h1 {
	font-size: 4em;
}

h2 {
	font-size: 3em;
}

h3 {
	font-size: 2.5em;
}

h4 {
	font-size: 2em;
}

h5 {
	font-size: 1.5em;
}

.clear:after {
	content: '';
	clear: both;
	display: table;
}

.alignleft {
	float: left;
	margin: 1em 0 1em 1em;
}

.aligncenter {
	display: block;
	margin: 1em auto;
}

.alignright {
	float: right;
	margin: 1em 1em 1em 0;
}

/*
 * Sidebar
 */

#sidebar {
	background: #333538;
	display: none;
	height: 100vh;
	overflow: auto;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;
}

#menu {
	padding: 6em 4em;
	text-align: center;
}

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

#menu li {
	display: block;
	margin: 1em 0;
}

#menu a {
	border-bottom: 1px solid #3f4145;
	color: #b3d359;
	display: block;
	font-size: 1.25em;
	padding: .75em 1em .5em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .3s ease;
}

#menu a:hover {
	color: #fff;
}

#menu li:first-child a {
	border-top: 1px solid #3f4145;
}

/*
 * Header
 */

.site .header {
	background: #376d89 url(assets/img/cygogne.png) 100px center no-repeat;
	height: 100px;
}

.site.home .header {
	background: #376d89 url(assets/img/bg.jpg) bottom center no-repeat;
	background-size: cover;
	height: 100vh;
}

#burger {
	height: 48px;
	left: 30px;
	opacity: .4;
	position: fixed;
	top: 30px;
	width: 48px;
	z-index: 9999;
}

#burger:hover {
	opacity: .8;
}

#burger .line {
	background: #ccc;
	height: 4px;
	margin: 9px 0;
	width: 48px;
}

#burger.active .line {
	position: absolute;
	top: .5em;
}

#burger.active .line:nth-child(1) {
	transform: rotate(-45deg);
}

#burger.active .line:nth-child(2) {
	margin-left: -5em;
}

#burger.active .line:nth-child(3) {
	transform: rotate(45deg);
}

#burger .line,
#burger.active .line {
	transition: all .2s ease;
}

#player {
	background: #376d89 url(assets/img/video-player.png) center center no-repeat;
	bottom: 15%;
	height: 64px;
	left: 15%;
	position: absolute;
	width: 64px;
}

/*
 * Content
 */

.first,
.second,
.third,
.fourth,
.fifth,
.footer {
	color: #fff;
}

.first h1,
.second h1,
.third h1,
.fourth h1,
.fifth h1 {
	text-align: center;
}

/*
 * Primary block.
 */

.first {
	background: #8db339;
	overflow: hidden;
	padding: 6em 0;
}

.video {
	background: transparent url(assets/img/video-player.png) center center no-repeat;
	width: 100%;
}

.video iframe {
	width: 100%;
}

.card {
	border: 1px dashed #fff;
	clear: both;
	margin: 1em;
	padding: 2em;
}

.card h2,
.card h3,
.card h4 {
	margin: .5em 0;
}

.card h2 {
	text-align: center;
}

.path {
	border: 1px dashed #fff;
	border-top: 0;
	clear: both;
	height: 7em;
	margin: 0 auto 6em auto;
	position: relative;
	width: 50%;
}

.path:after {
	border-left: 1px dashed #fff;
	content: '';
	height: 6em;
	left: 50%;
	position: absolute;
	top: 7em;
}

/*
 * Second block.
 */

.second {
	background: #b4d45a;
	min-height: auto;
	padding: 2em 0 6em 0;
}

.second h1 {
	margin-bottom: 1em;
}

#timeline {
	position: relative;
}

#timeline:before {
	background: #8db339;
	bottom: -6em;
	content: '';
	position: absolute;
	left: calc( 50% - 2px );
	top: -2em;
	width: 4px;
}

#timeline .item {
	background: #8db339;
	margin: 4em 0 0;
	padding: 1em;
	position: relative;
	width: calc( 46% - 2em );
}

#timeline .item:after {
	content: '';
	border: .5em solid transparent;
	position: absolute;
	top: 1em;
}

#timeline .item:first-child {
	margin: 0 auto;
}

#timeline .item:nth-child(odd) {
	clear: left;
	float: left;
	text-align: left;
}

#timeline .item:nth-child(even) {
	clear: right;
	float: right;
	text-align: right;
}

#timeline .item:nth-child(odd)::after {
	border-left-color: #8db339;
	right: -1em;
}

#timeline .item:nth-child(even)::after {
	border-right-color: #8db339;
	left: -1em;
}

#timeline .date {
	color: #f2f2f2;
	font-weight: 600;
	margin: .5em;
}

#timeline .item:nth-child(odd) .date {
	float: right;
}

#timeline .item:nth-child(even) .date {
	float: left;
}

#timeline .title {
	margin: 0;
}

#timeline .tag {
	color: #b4d45a;
	display: inline-block;
	font-size: .675em;
	font-weight: 600;
	margin: 0 .25em;
	text-transform: uppercase;
}

/*
 * Third block.
 */

.third {
	background: #fff;
	padding: 2em 0 6em 0;
}

.third h1 {
	color: #b4d45a;
	margin-bottom: 1em;
}

/*
 * Comments
 */

#posts,
#comments {
	position: relative;
}

#posts:before,
#comments:before {
	background: #b4d45a;
	bottom: -6em;
	content: '';
	position: absolute;
	left: calc( 50% - 2px );
	top: -2em;
	width: 4px;
}

#comments:before {
	bottom: -6em;
	top: -2em;
}

#posts:before {
	bottom: -6em;
	top: -2em;
}

#posts .post,
#comments .comment {
	margin: 0;
	position: relative;
	width: 50%;
}

.post img {
	max-width: 100%;
}

#posts .post .title {
	margin: 0 0 1em 0;
	text-align: center;
}

#posts .post:first-child,
#comments .comment:first-child {
	margin: 0;
}

#posts .post:nth-child(odd),
#comments .comment:nth-child(odd) {
	clear: left;
	float: left;
	margin-top: 2em;
}

#posts .post:nth-child(even),
#comments .comment:nth-child(even) {
	clear: right;
	float: right;
	margin-top: 8em;
}

#posts .post.color9 .date,
#posts .post.color9 .content,
#comments .comment.color1 .date,
#comments .comment.color1 .content {
	background: #b4d45a;
}

#posts .post.color9 .content::before,
#comments .comment.color1 .content::before {
	border-color: #b4d45a;
}

#posts .post.color8 .date,
#posts .post.color8 .content,
#comments .comment.color2 .date,
#comments .comment.color2 .content {
	background: #8db339;
}

#posts .post.color8 .content::before,
#comments .comment.color2 .content::before {
	border-color: #8db339;
}

#posts .post.color7 .date,
#posts .post.color7 .content,
#comments .comment.color3 .date,
#comments .comment.color3 .content {
	background: #5a8fd4;
}

#posts .post.color7 .content::before,
#comments .comment.color3 .content::before {
	border-color: #5a8fd4;
}

#posts .post.color6 .date,
#posts .post.color6 .content,
#comments .comment.color4 .date,
#comments .comment.color4 .content {
	background: #5ac7d4;
}

#posts .post.color6 .content::before,
#comments .comment.color4 .content::before {
	border-color: #5ac7d4;
}

#posts .post.color5 .date,
#posts .post.color5 .content,
#comments .comment.color5 .date,
#comments .comment.color5 .content {
	background: #5ad471;
}

#posts .post.color5 .content::before,
#comments .comment.color5 .content::before {
	border-color: #5ad471;
}

#posts .post.color4 .date,
#posts .post.color4 .content,
#comments .comment.color6 .date,
#comments .comment.color6 .content {
	background: #d45a5a;
}

#posts .post.color4 .content::before,
#comments .comment.color6 .content::before {
	border-color: #d45a5a;
}

#posts .post.color3 .date,
#posts .post.color3 .content,
#comments .comment.color7 .date,
#comments .comment.color7 .content {
	background: #e68424;
}

#posts .post.color3 .content::before,
#comments .comment.color7 .content::before {
	border-color: #e68424;
}

#posts .post.color2 .date,
#posts .post.color2 .content,
#comments .comment.color8 .date,
#comments .comment.color8 .content {
	background: #995ad4;
}

#posts .post.color2 .content::before,
#comments .comment.color8 .content::before {
	border-color: #995ad4;
}

#posts .post.color1 .date,
#posts .post.color1 .content,
#comments .comment.color9 .date,
#comments .comment.color9 .content {
	background: #d45ac1;
}

#posts .post.color1 .content::before,
#comments .comment.color9 .content::before {
	border-color: #d45ac1;
}

#posts .post.format-image .date,
#posts .post.format-image .content {
	background: #616574;
}

#posts .post.format-image .content::before {
	border-color: #616574;
}

#posts .post.format-video .date,
#posts .post.format-video .content {
	background: #2b3236;
}

#posts .post.format-video .content::before {
	border-color: #2b3236;
}


#posts .date,
#comments .date {
	background: #b4d45a;
	border: .25em solid #fff;
	border-radius: 50%;
	height: 4em;
	position: absolute;
	text-align: center;
	top: -.25em;
	width: 4em;
}

#posts .post:nth-child(odd) .date,
#comments .comment:nth-child(odd) .date {
	right: -2.25em;
}

#posts .post:nth-child(even) .date,
#comments .comment:nth-child(even) .date {
	left: -2.25em;
}

#posts .day,
#comments .day {
	display: block;
	font-weight: 600;
	height: 2em;
	line-height: 3em;
}

#posts .month,
#comments .month {
	display: block;
	height: 2em;
}

#posts .content,
#comments .content {
	background: #b4d45a;
	padding: 1em;
	width: calc( 80% - 2em )
}

#posts .content:before,
#comments .content:before {
	border: .5em solid;
	border-bottom-color: transparent !important;
	border-top-color: transparent !important;
	content: '';
	position: absolute;
	top: 1.5em;
}

#posts .post:nth-child(odd) .content::before,
#comments .comment:nth-child(odd) .content::before {
	border-right-color: transparent;
	right: calc( 20% - 1em );
}

#posts .post:nth-child(even) .content::before,
#comments .comment:nth-child(even) .content::before {
	border-left-color: transparent;
	left: calc( 20% - 1em );
}

#posts .post:nth-child(odd) .content,
#comments .comment:nth-child(odd) .content {
	float: left;
}

#posts .post:nth-child(even) .content,
#comments .comment:nth-child(even) .content {
	float: right;
}

#posts .content p,
#comments .content p {
	line-height: 1.5;
}

#posts .content a,
#comments .content a {
	color: #fff;
	text-decoration: underline;
}

#posts .content iframe,
#comments .content iframe {
	max-width: 100%;
}

#comments .signature {
	text-align: right;
}

#posts .post.format-image .title,
#posts .post.format-video .title {
	display: none;
}

#posts .post.format-image p,
#posts .post.format-video p {
	margin: 0;
}

#posts .post.format-image img,
#posts .post.format-video iframe {
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

/*
 * Fourth block.
 */

.fourth {
	background: #7b5a4b;
	padding: 2em 0 6em 0;
}

/*
 * Fifth block.
 */

.fifth {
	background: #8db339;
	padding: 2em 0 6em 0;
}

#items {
	text-align: center;
}

#items .item {
	float: left;
	margin: 2em 2em 3em 2em;
	overflow: hidden;
	position: relative;
	width: calc( 33% - 4em );
}

#items .item .validated {
	background: #8db339;
	border: 8px solid rgba(255, 255, 255, .85);
	border-left: 0;
	border-right: 0;
	font-size: .675em;
	padding: 1.25em 0 1em 0;
	position: absolute;
	right: -100px;
	top: 20px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	text-transform: uppercase;
	width: 100%;
	z-index: 1;
}

#items .item .validated + .thumbnail a {
	background: rgba(255, 255, 255, .75);
}

#items .item .thumbnail {
	background-color: #7b5a4b;
	background-image: url(assets/img/box.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 280px;
	position: relative;
}

#items .item .thumbnail a {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

#items .item .title {
	font-size: 1.75em;
	margin: .25em 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#items .item .title a {
	color: #fff;
	text-decoration: none;
}

#items .item .tags {
	
}

#items .item .tags .tag a {
	color: #fff;
	font-size: .675em;
	font-weight: 600;
	opacity: .8;
	text-decoration: none;
	text-transform: uppercase;
}

#items .item .tags .tag a:hover {
	opacity: 1.0;
}

#all-items {
	background: #fff;
	box-shadow: 0 .35em 0 #b4d45a;
	border-radius: 2em;
	color: #8db339;
	display: inline-block;
	line-height: 1.5rem;
	margin: 4em auto 0;
	padding: .75em 2em;
	text-decoration: none;
}

#all-items:active {
	box-shadow: 0 .2em 0 #b4d45a;
	position: relative;
	top: .15em;
}

/*
 * Respond
 */

#respond {
	
}

#respond .field {
	margin: 1em auto 0;
	position: relative;
	text-align: center;
}

#respond .field.half {
	display: block;
	float: left;
	margin: 1em;
	width: calc( 49.9% - 2em );
}

#respond .field.full {
	clear: both;
	width: 96%;
}

#respond label {
	color: #cbb8b0;
	display: block;
	font-size: .675em;
	margin: 0 0 0.25em 1.5em;
	text-transform: uppercase;
}

#respond input[type="text"],
#respond input[type="email"] {
	background: #fff;
	border: 0;
	border-radius: 2em;
	box-shadow: 0 0 0;
	height: 1.5em;
	padding: .5em 1em;
	width: calc( 100% - 2em );
}

#respond textarea {
	background: #fff;
	border-radius: 2em;
	border: 0;
	box-shadow: 0 0 0;
	font-size: .765em;
	height: 12em;
	padding: 1em 1.25em;
	width: calc( 100% - 2.5em );
}

#respond label,
#respond input[type="text"],
#respond input[type="email"],
#respond textarea {
	text-align: left;
}

#respond input[type="checkbox"] {
	left: 0;
	opacity: 0;
	position: absolute;
}

#respond input[type="checkbox"] + label {
	font-size: 1em;
	font-weight: 300;
	left: 0;
	margin: 0;
	padding: .5em 1em .5em 4.5em;
	position: absolute;
	text-transform: none;
	top: 1em;
}

#respond input[type="checkbox"] + label::before,
#respond input[type="checkbox"] + label::after {
	border-radius: 1em;
	cursor: pointer;
	left: 0;
	padding: .55em 1em .35em 1em;
	position: absolute;
	text-align: center;
	top: -.05em;
	width: 2em;
}

#respond input[type="checkbox"] + label::before {
	background: #5f4945;
	box-shadow: 0 .25em 0 #4C3A37;
	content: 'Non';
}

#respond input[type="checkbox"] + label::after {
	background: #876f65;
	box-shadow: 0 .25em 0 #5f4945;
	content: 'Oui';
	display: none;
}

#respond input[type="checkbox"]:checked + label::after {
	display: block;
}

#respond button {
	background: #876F65;
	border: 0;
	border-radius: 2em;
	box-shadow: 0 .25em 0 #5F4945;
	color: #eee;
	float: right;
	font-weight: 200;
	margin: 1em auto;
	max-width: 14em;
	min-width: 8em;
	padding: .5em 1em;
	width: 50%;
}

#respond button img {
	margin-left: .25em;
	vertical-align: middle;
}

#respond button:active {
	top: .1em;
	position: relative;
	box-shadow: 0 .15em 0 #5F4945;
}

/*
 * Fourth block.
 */

.footer {
	background: #333;
	min-height: 6em;
	position: relative;
}

#copyright {
	bottom: 2em;
	color: #bbb;
	font-size: .75em;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
}

#copyright a {
	color: #bbb;
	text-decoration: none;
}

/*
 * Items Archives
 */

.archive.tax-item-category #items .item,
.page-template-page-liste-de-naissance #items .item {
	min-height: 22em;
}

.archive.tax-item-category #items .item .validated,
.page-template-page-liste-de-naissance #items .item .validated {
	background: #7b5a4b;
	border-color: #fff;
	color: #fff;
}

.archive.tax-item-category #items .item .thumbnail,
.page-template-page-liste-de-naissance #items .item .thumbnail {
	border: .25em solid #7b5a4b;
}

.archive.tax-item-category #items .item .thumbnail a,
.page-template-page-liste-de-naissance #items .item .thumbnail a {
	background: rgba(255, 255, 255, 0.5);
}

.archive.tax-item-category #items .item:hover .thumbnail a,
.page-template-page-liste-de-naissance #items .item:hover .thumbnail a {
	background: transparent;
}

.archive.tax-item-category #items .item .thumbnail a,
.page-template-page-liste-de-naissance #items .item .thumbnail a,
.archive.tax-item-category #items .item:hover .thumbnail a,
.page-template-page-liste-de-naissance #items .item:hover .thumbnail a {
	transition: all .3s ease;
}

.archive.tax-item-category #items .item,
.page-template-page-liste-de-naissance #items .item,
.archive.tax-item-category #items .item a,
.page-template-page-liste-de-naissance #items .item a {
	color: #b4d45a;
	font-weight: 600;
}

/*
 * Single Item
 */

.single.single-item .entry-title {
	margin-bottom: .25em;
}

.single.single-item .entry-tags {
	text-align: center;
}

.single.single-item .entry-tags a {
	color: #b4d45a;
	text-decoration: none;
}

.single.single-item .entry-content {
	color: #7b5a4b;
	margin: 4em 0;
}

.single.single-item .entry-content .thumbnail {
	border: .25em solid #b4d45a;
	display: inline-block;
	margin-right: 1em;
	position: relative;
	width: calc( 48% - 1em );
}

.single.single-item .entry-content .thumbnail img {
	height: auto;
	max-width: 100%;
}

.single.single-item .entry-content .disclaimer {
	color: #b4d45a;
	font-size: 12px;
	margin-top: 16px;
	position: absolute;
	width: 100%;
}

.single.single-item .entry-content .details {
	display: inline-block;
	vertical-align: top;
	width: 48%;
}

.single.single-item .entry-content .details .description {
	font-size: 1.2em;
}

.single.single-item .entry-content .details #respond textarea,
.single.single-item .entry-content .details #respond input[type="text"],
.single.single-item .entry-content .details #respond input[type="email"] {
	background: #5f4945;
	border: .25em solid #4C3A37;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 1.2em;
	color: #fff;
}

/*
 * Responsive
 */

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

	.video {
		text-align: center;
	}

	.video iframe {
		margin-left: auto;
		margin-right: auto;
		width: 90%;
	}

}

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

	#items .item {
		width: calc( 50% - 4em );
	}

	.single.single-item .entry-content .thumbnail,
	.single.single-item .entry-content .details {
		margin-bottom: 4em;
		width: 100%;
	}
}

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

	.container {
		padding: 0;
	}

	#timeline .item {
		border-bottom: 1em solid #b4d45a;
		border-top: .5em solid #b4d45a;
		margin-left: auto;
		margin-right: auto;
		text-align: center !important;
		width: calc( 96% - 2em );
	}

	#timeline .item:after {
		display: none;
	}

	#timeline .item,
	#timeline .date,
	#timeline .title,
	#timeline .tags {
		float: none !important;
	}

	#timeline .date {
		position: relative;
	}

	#timeline .date:after {
		background: #b4d45a;
		bottom: -.5em;
		content: '';
		height: 1px;
		left: calc( 50% - .25em );
		position: absolute;
		width: .5em;
	}

	#posts .post,
	#posts .content,
	#comments .comment,
	#comments .content {
		float: none !important;
	}

	#posts .post,
	#comments .comment {
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 2em;
		width: 96%;
	}

	#posts .date,
	#comments .date {
		margin: 0 auto 1em auto;
		position: static;
	}

	#posts .content,
	#comments .content {
		width: calc( 100% - 2em );
	}

	#posts .content:before,
	#comments .content:before {
		display: none;
	}
}

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

	#respond .field.half,
	#respond .field.full {
		float: none;
		margin: 1em auto 0;
		width: calc( 100% - 2em );
	}

	#items .item {
		width: calc( 100% - 4em );
	}
}