/*
Theme Name: Hearth
Author: Caroline Hugues
Author URI: https://carolinehugues.ovh/
Description: Theme for Note Cuivrée web site - version 2019

*/

body{
	margin:0 0 0 0;
}

a {
	text-decoration: none;
}

.center{
	text-align:center;
}

/* ----------------------------------------------------------
							Font
------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, .meta-info p:nth-child(1) a, .author-name, #custom_html-2 h3, #last-articles h3 {
	font-family: 'Pinyon Script', Helvetica, Arial, Lucida, sans-serif; 
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1em; 
	font-weight: normal;
	margin: 5px 0 5px 0;
}

header h2 {
	font-family: 'Playfair Display', serif;
}

.home h3, .home-section h4, #music-page h4{
	font-family: 'Old Standard TT', serif;
	text-transform: uppercase;
}

#custom_html-2 h3{
	text-transform: none;
}

header h1{
	font-size: 55px;
}

h1, #last-articles h3  { 
	font-size: 30px; 
}

h1, h2 {  
	line-height: 40px;
}

header h1, header h2, .home h3, .home-section h4, .home-subsection-article h1, #music-page h4{
	font-weight: bold;
	text-align:center;
}

h2, #custom_html-2 h3 { 
	font-size: 24px; 
}

h3, h4, h5, h6{
	line-height: 30px;
}

h3,  header h2, .meta-info p:nth-child(1) a, .author-name { 
	font-size: 22px;  
}

h4 { 
	font-size: 18px; 
}

h5, .resume {
	font-size: 16px; 
}

h6, .home aside h3{ 
	font-size: 14px; 
}

#blog_subscription-2 p{
	font-size:13px !important;
	line-height: 20px !important; 
}

p {
	font-family: 'Vollkorn', Georgia, "Times New Roman", serif;
	padding-bottom: 10px; 
	line-height: 30px; 
	text-align: justify; 
	font-weight: 400;
}

/* ----------------------------------------------------------
							Colors
------------------------------------------------------------- */

header h1{
	color: #000000;
}

h1 a, .text p {
	color: #18391E;
}

input#read-button, #instagram-login::before, #instagram-login::after, #creation-page h3::before, #creation-page h3::after{
	background-color:#18391E !important;
}

body {
	background-color: #f3f3f3 !important;
}

.home-section article, .two-articles-section article{
	border:solid 15px #f3f3f3;
}

p, .home aside h3, #last-articles h3 {
	color : #606060;
}

.home-subsection-description, .home-section h4, header p, a:hover, #curiosities-page section:nth-child(1) p, #music-page h4{
	color : #AFAFAF;
}

header, #home-sidebar, .home article, #home-sidebar .simple-social-icons ul li a, 
#archives-body aside, #all-articles, .body-page{
	background-color: #FFFFFF !important;
}

.last-article{
	background-color: rgba(255,255,255,0.6);
}

a, h1 a:hover, input#read-button {
	color : #B36700;
}

#subscribe-submit input{
	background-color: #B36700;
}

.last-article header, .last-article .meta-info {
	background-color: transparent !important;
}

/* ----------------------------------------------------------
							Buttons
------------------------------------------------------------- */

.button-read-home{
	margin:5px 0 5px 0;
}

.button-read-home p {
	width:75px;
}

input#read-button {
	background: none;
	cursor: pointer; 
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-radius: 1px;
	padding: 9px 23px 9px 23px;
	border:none;
}

input#read-button:hover {
	opacity: 0.8;
	transition: background-color 0.5s ease;
}

#home-sidebar .button-read-home{
	text-align:center;
	margin-bottom:30px;
}

/* ----------------------------------------------------------
							Lines
------------------------------------------------------------- */

#instagram-login::before, #instagram-login::after, #creation-page h3::before, #creation-page h3::after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 5px;
    width: 30%;
    height: 1px;
}

/* ----------------------------------------------------------
							Header
------------------------------------------------------------- */

header{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	margin-bottom:40px;
	padding-top:50px;
}

.home header{
	margin-bottom:0;
}

header section{
	width:32%;
}

#logo{
	width:225px;
	padding:0 !important;
}

header p{
	font-style: italic;
	width:180px;
	text-align: center;
	margin:auto;
}

/*-------------------------- Menu ------------------------*/

#icons-mobile-menu {
	display: none;
}

#icon-menu-open, #icon-menu-close {
	height: 22px;
	width: auto;
}


/* ----------------------------------------------------------
							Footer
------------------------------------------------------------- */

footer p{
	text-align:center;
}

/* ----------------------------------------------------------
							Single
------------------------------------------------------------- */

.single-about {
	display: flex;
}

.single-about-picture {
	width: 20%;
}

.single-about-picture img {
	width: 100%;
	height: auto;
}

.single-about-text {
	width: 80%;
}

/* ----------------------------------------------------------
							Home
------------------------------------------------------------- */

/*------------ Last articles section -------------- */

#last-articles{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	background-position:top right;
	background-image:url(https://notecuivree.fr/wp-content/uploads/2019/01/autumn-1839606_1920.jpg);
	min-height:420px;
}

#last-articles h3{
	width:100%;
	text-transform: none;
	font-weight: normal;
	padding-top:20px;
}

#last-articles header{
	margin-bottom:0 !important;
	padding-top:0 !important;
}

.last-article h1{
	text-align: center;
	padding-right: 5px;
	padding-left: 5px;
}

.last-article {
	width:23%;
	text-align: center;
	padding:10px 10px 0 10px;
	margin:0 5px 20px 5px;
	height:100%;
	transition-duration: .8s;
}

.last-article:hover {
	width:40%;
}

.last-article img{
	margin:0;
	height:200px;
	width:auto;
}

.last-article:hover img{
	height:300px;
}

.container-last-article {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 1 ease;
}

.container-last-article:hover .overlay {
  opacity: 1;
}

.container-last-article:hover img {
	opacity: 0.1;
}

.text {
  position: absolute;
  width:100%;
  top: 50%;
  left: 20%;
  -webkit-transform: translate(-20%, -50%);
  -ms-transform: translate(-20%, -50%);
  transform: translate(-20%, -50%);
  text-align: center;
}

.text p{
	text-align: center !important;
	width:70%;
	font-style:initial;
	padding-bottom: 0;
}


#home-sidebar, .home-section {
	padding-top: 20px;
}

#home-body{
	display:flex;
	flex-wrap: wrap;
}

#home-sidebar{
	width:18%;
	margin-right: 2%;
}

.home article, .home-section{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.home article{
	width:80%;
}

.home-section{
	justify-content: space-around;
	margin-bottom: 80px;
	width:100%;
}

.home-subsection-presentation {
	width:45%;
}

.home-subsection-article {
	width:50%;
}

.home-icon{
	text-align: center;
	margin:0;
}

.home-subsection-description{
	max-width:350px;
	margin:auto;
	text-align: center;
	font-style: italic;
}

.home-subsection-article article{
	width: 90%;
	margin: auto;
}

.attachment-home-thumbnail{
	width:90%;
	height: auto;
	margin-top:20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.24), 0px 0px 4px rgba(0, 0, 0, 0.12);
}

.home-subsection-article .attachment-home-thumbnail{
	margin-left: 5%;
}

.attachment-home-thumbnail:hover{
	opacity: 0.9;
}

.meta-info, .home-subsection-article h1 {
	width:100%;
}

.meta-info p{
	text-align: center;
	margin:0;
	line-height: 20px;
}

.home-picture{
	text-align: center;
	padding:0;
	margin:0;
}

.home-picture img {
	border-radius: 3px;
}

#inspiration{
	display: flex;
	align-items:center;
	justify-content: space-around;
}

/* ---------------- Mélopie section --------------- */

.home-melopie {
	display: flex;
	width: 90%;
	margin: auto;
	margin-top: 30px;
}

.home-melopie-picture {
	width: 20%;
}

.home-melopie-picture img {
	width: 100%;
	height: auto;
}

.home-melopie-text {
	width: 80%;
	padding: 15px;
}

.home-melopie-text .bouton-lire-home {
	text-align: center;
}

/* ---------------- Travel video widget ------------ */

#custom_html-2 h3 {
	margin-bottom: 10px;
}

#media_video-3 {
	width:90%;
	margin:auto;
	height:auto;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.24), 0px 0px 4px rgba(0, 0, 0, 0.12);
	margin-bottom:40px;
}

/* ---------------- Goodread widget ------------ */

#gr_updates_widget{
	border-radius: 3px;
	background-color:#fff;
	border:solid #18391E 2px;
	-webkit-box-shadow: 0px 0px 4px 1px #595959,
	inset 0px 0px 0px 1px #7D730B;
	-moz-box-shadow: 0px 0px 4px 1px #595959,
	inset 0px 0px 0px 1px #7D730B;
	box-shadow: 0px 0px 4px 1px #595959,
	inset 0px 0px 0px 1px #7D730B;
	padding:10px 0 30px 10px;
	width:350px;
	height:180px;
	margin:auto;
	margin-bottom: 30px;
}

#gr_footer{
	margin-bottom:10px;
}

#gr_updates_widget p{
	padding:0px;
	margin:0;
	font-size:14px;
}

#gr_footer img{
	width:100px;
	float:left;
}

#gr_updates_widget img{
	border-style:none;
}

/* ----------- Section Ancre Renard ------------ */

#ancrerenard .home-subsection-description{
	text-align:justify !important;
}

#ancrerenard p {
	margin:0;
}

#ancrerenard p:nth-child(1){
	padding-bottom: 0;
	margin-top:10px;
}

/* ---------------- Travel ------------ */

#section-travel{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom:20px;
}

#section-travel section:nth-child(1), #section-travel section:nth-child(3){
	width:35%;
}

#section-travel section:nth-child(2){
	width:23%;
	margin-top:auto;
	margin-bottom:auto;
}

#section-travel img{
	width:100%;
	height:auto;
}

#section-travel .attachment-home-thumbnail{
	margin: 0 !important;
}

#section-travel article p{
	margin-bottom:0;
	padding-bottom:0;
}

/* ------------ Instagram section --------------------- */

#instagram-section{
	width:100%;
}

#instagram-login{
	display: flex;
	align-items:center;
	justify-content: center;
}

#instagram-login img{
	width:105px;
}

/* ------------------------------ Aside ---------------------------------- */

#home-sidebar{
	position: sticky;
	top: 20px;
	height:100%;
}

#media_video-4{
	width:92%;
	margin:auto;
	margin-bottom:30px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.24), 0px 0px 4px rgba(0, 0, 0, 0.12);
}

aside p{
	margin-top:0;
	margin-bottom:0;
	padding-bottom: 0;
}

#blog_subscription-2{
	width:90% !important;
	margin:auto;
	margin-top:10px;
	margin-bottom:10px;
}

#subscribe-submit{
	text-align:center;
	margin-top:5px;
}

#custom_html-8{
	width:200px;
	margin:auto;
}

#custom_html-8 article{
	margin:0;
}

/*--------------------------------------------------------------
							Article
--------------------------------------------------------------*/

.separation-article img{
	max-width:100%;
}

/*--------------------------------------------------------------
					 	Archives Page
--------------------------------------------------------------*/

#archives-body, #all-articles{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#all-articles{
	width:80%;
}

#all-articles article{
	width:45%;
	text-align: center;
}

/*--------------------------------------------------------------
						Pages 
--------------------------------------------------------------*/

.body-page{
	width:90%;
	margin:auto;
}

/* --------------- two articles by line ------------ */
.two-articles-section {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.two-articles-section article{
	width:40%;
	padding:0 2% 0 2%;
	margin:10px 0 30px 0;
	height:100%;
	border-bottom:none;
}

.two-articles-section article img{
	max-height:350px;
	width:auto;
}

.two-articles-section article .separation-article{
	margin-bottom: 0;
}

/* --------------- tree articles by line ------------ */
.three-articles-section {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.three-articles-section h3 {
	width:100%;
	display: flex;
	align-items:center;
	justify-content: center;
}

.three-articles-section article{
	width:28%;
	margin-right: 0.5%;
	margin-left:0.5%;
}

.three-articles-section article p{
	margin-bottom:0;
	padding-bottom:0;
}

.three-articles-section article img{
	max-height:220px;
	width:auto;
}

/*--------------------------------------------------------------
						Curiosities page
--------------------------------------------------------------*/

#curiosities-page section:nth-child(1){
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-bottom: 50px;
}

#curiosities-page section:nth-child(1) img{
	width: 45%;
	margin-top:30px;
}

#curiosities-page section:nth-child(1) p{
	width: 45%;
	text-align:center;
	font-style: italic;
}

/*--------------------------------------------------------------
						Creation page
--------------------------------------------------------------*/

#photos-section{
	width:100%;
}

#photos-section p{
	width:100%;
	display: flex;
	align-items:center;
	justify-content: center;
}

/*--------------------------------------------------------------
						Music page
--------------------------------------------------------------*/

#music-page h4{
	margin-top:10px;
	padding-bottom:0;
}

/*--------------------------------------------------------------
					 	About Page
	--------------------------------------------------------------*/

.author-image {
	text-align: center;
	margin: auto;
}

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

/*--------------------------------------------------------------
					 	Single postcard protected
	--------------------------------------------------------------*/

.single-cartes-postales .entry-content.protected {
	min-height: 90vh;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

.single-cartes-postales .protected-container {
	width: 100%;
	background-color: #f3f3f3 !important;
}

.single-cartes-postales .post-password-form {
	padding: 10px;
	z-index: 3;
	width: 65%;
	margin: auto;
}

.single-cartes-postales .post-password-form p {
	margin-top: 0;
}

.single-cartes-postales .entry-content.protected.clearfix::after {
	visibility: visible;
	background: white;
	height: 50vh;
	top: 20vh;
	left: 17.5%;
	position: absolute;
	width: 65%;
	z-index: 2;
	opacity: .8;
}

.single-cartes-postales .post-password-form p {
	font-weight: bold;
}


.single-cartes-postales .post-password-form p:nth-of-type(2) {
	margin-top: 30px;
	text-align: left;
}

.single-cartes-postales .post-password-form input[type="submit"] {
	cursor: pointer;
}

.single-cartes-postales .column-flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.single-cartes-postales .column-flex-center p,
.single-cartes-postales .column-flex-center h2,
.single-cartes-postales .column-flex-center h3,
.single-cartes-postales .column-flex-center h4,
.single-cartes-postales .column-flex-center h5,
.single-cartes-postales .column-flex-center h6 {
	margin: 0;
}


/*--------------------------------------------------------------
							Media Queries
--------------------------------------------------------------*/

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

	/* ----------------------------------------------------------
								Lines
	------------------------------------------------------------- */
	#creation-page h3::before, #creation-page h3::after{
		width:5em;
	}

	/*--------------------------------------------------------------
							Home
	--------------------------------------------------------------*/

	/*------------------ Last articles ------------- */
	
	#last-articles {
		justify-content: space-around;
	}

	#home-body #home-sidebar:nth-child(1){
		order:2;
	}

	#home-body #home-sidebar:nth-child(2){
		order:1;
	}

	#home-sidebar, .home article{
		width:100%;
		margin-right: 0;
	}

	.home article{
		width:96%;
		margin:auto;
	}

	#home-sidebar{
		display:flex;
		flex-wrap:wrap;
		justify-content: space-around;
	}

	#home-sidebar .button-read-home{
		width:100%;
	}

	#home-sidebar div, #custom_html-8{
		width:300px;
	}

	article .home-section:last-child{
		margin-top:25px;
	}

	/*--------------------------------------------------------------
					 	Archives Page
	--------------------------------------------------------------*/

	#archives-body #all-articles:nth-child(2){
		order:1;
		width:100%;
	}

	#archives-body aside:nth-child(1){
		order:2;
	}

	/*--------------------------------------------------------------
					 			Pages
	--------------------------------------------------------------*/

	/* --------------- tree articles by line ------------ */
	.three-articles-section {
		justify-content: space-around;
	}

	.three-articles-section article{
		width:30%;
		margin-right: 0;
		margin-left:0;
	}

	.three-articles-section article img{
		height:auto;
		width:100%;
	}
}

@media screen and (max-width: 900px) {
	/* ----------------------------------------------------------
								Lines
	------------------------------------------------------------- */
	#creation-page h3::before, #creation-page h3::after{
		width:3em;
	}

	/*--------------------------------------------------------------
								Header
	--------------------------------------------------------------*/

	/*-------------------------- Menu ------------------------*/

	#icons-mobile-menu {
		display: block;
		margin-right: 10px;
	}

	#icon-menu-close {
		display: none;
	}

	#icon-menu-open, #icon-menu-close {
		cursor: pointer;
	}

	#top-menu-fixed {
		display: flex;
		justify-content: space-between;
		height: auto;
		flex-wrap: wrap;
	}

	#menu-my-menu {
		display: none;
		flex-direction: column;
		width: 100%;
		margin-top: 20px;
	}

	#menu-my-menu li {
		margin-bottom: 10px;
	}

	#simple-social-icons-2 {
		margin-bottom: 0 !important;
	}

	
	/* ----------------------------------------------------------
								Single
	------------------------------------------------------------- */

	.single-about {
		flex-wrap: wrap;
	}

	.single-about-picture,
	.single-about-text  {
		width: 100%;
	}

	/*--------------------------------------------------------------
							Home
	--------------------------------------------------------------*/

	.home-melopie {
		flex-wrap: wrap;
	}

	.home-melopie-picture,
	.home-melopie-text  {
		width: 100%;
	}

	/*------------------ Last articles ------------- */
	
	.last-article {
		margin-bottom:30px;
	}

	.last-article:nth-child(2), .last-article:nth-child(2):hover  {
		width: 100%;
	}

	.last-article:nth-child(3), .last-article:nth-child(4) {
		width: 30%;
	}

	.last-article:hover {
		width:30%;
	}

	.last-article:nth-child(2) img, .last-article:nth-child(2):hover img{
		width:100%;
		height:auto;
	}

	.last-article:hover img{
		width:auto;
		height:200px;
	}

	.text {
		height: 100%;
	}

	.text p:nth-child(1){
		width:100%;
		overflow: hidden;
	  	max-height: 60%;
	  	margin-top: 5%;
	}
}

@media screen and (max-width: 780px) {
	/*--------------------------------------------------------------
							Home
	--------------------------------------------------------------*/

	/*------------------ MELOPIE SECTION ------------- */

	.home-melopie-text .bouton-lire-home #lire-home {
		font-size: 10px;
	}

	/*------------------ Last articles ------------- */
	
	.last-article:nth-child(3), .last-article:nth-child(4), .last-article:hover {
		width: 100%;
	}

	.last-article img, .last-article:hover img{
		width:100%;
		height:auto;
	}


	.home-subsection-presentation, .home-subsection-article, #section-travel section:nth-child(1), 
	#section-travel section:nth-child(3) {
		width:90%;
	}

	.home-subsection-presentation {
		margin-bottom:20px;
	}

	#rock section:nth-child(1){
		order:2;
	}

	#rock section:nth-child(2){
		order:1;
	}

	#section-travel section:nth-child(2) {
		width:70%;
		margin:30px 0 30px 0;
	}
	#gr_updates_widget{
		margin-top:20px;
	}

	/*--------------------------------------------------------------
					 			Pages
	--------------------------------------------------------------*/

	/* --------------- tree articles by line ------------ */
	.three-articles-section article{
		width:95%;
	}

	.three-articles-section article img{
		height:auto;
		width:100%;
		max-height:100%;
	}

	/*--------------------------------------------------------------
					 			Single postcard protected
	--------------------------------------------------------------*/

	.single-cartes-postales .post-password-form {
		width: 80%;
		margin: auto;
	}

	.single-cartes-postales .entry-content.protected.clearfix::after {
		width: 90%;
		left: 5%;
	}
}

@media screen and (max-width: 600px){
	/* ----------------------------------------------------------
								Lines
	------------------------------------------------------------- */
	#instagram-login::before, #instagram-login::after {
	    width: 5em;
	}

	/* ----------------------------------------------------------
								Header
	------------------------------------------------------------- */

	header section{
		width:100%;
	}

	/* ----------------------------------------------------------
								Home
	------------------------------------------------------------- */
	#inspiration{
		flex-wrap:wrap;
	}

	#gr_updates_widget{
		width:100%;
	}

	/*--------------------------------------------------------------
					 	Archives Page
	--------------------------------------------------------------*/

	#all-articles article{
		width:90%;
		margin-bottom:30px;
	}

	/*--------------------------------------------------------------
							Pages 
	--------------------------------------------------------------*/

	.body-page{
		width:100%;
	}

	/* --------------- two articles by line ------------ */

	.two-articles-section article{
		width:85%;
	}
}

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

	header{
		padding-top:150px;	
	}

	/* ----------------------------------------------------------
								Lines
	------------------------------------------------------------- */

	#instagram-login::before, #instagram-login::after {
	    width: 2em;
	}
}