@charset "utf-8";
/* CSS Document */

#index .blog, #page .blog { text-align: center; margin: 80px 0; color: #6f7072; letter-spacing: .75px;}

#index .blog h3, #page .blog h3 {font: 400 6rem/7.5rem "Playfair Display";}
#index .blog h3 span, #page .blog h3 span { display: block;  font: 400 1.6rem/1.6rem "Roboto"; color: #d88a5f; text-transform: uppercase; letter-spacing: 1px;}
#index .blog-list, #page .blog-list { display:grid; grid-template-columns:repeat(3,1fr); grid-gap: 40px; position:relative; margin: 80px 0;}

#index .blog-list .item, #page .blog-list .item { position:relative;}
#index .blog-list .item img, #page .blog-list .item img { max-width: 100%; height: auto;}
#index .blog-list .item .item-info, #page .blog-list .item .item-info { background: #fff; position: relative; text-align: left; max-width: 100%; padding: 20px; margin: -70px 0 0 40px;  font: 400 1.4rem/1.4rem "Roboto"; }
#index .blog-list .item .item-info .date, #page .blog-list .item .item-info .date { text-transform: uppercase;}
#index .blog-list .item .item-info .date, #page .blog-list .item .item-info .date span { color: #7b7a7a;}
#index .blog-list .item .item-info .date span:before, #page .blog-list .item .item-info .date span:before {color: #d88a5f;content: "#";}
#index .blog-list .item .item-info h4, #page .blog-list .item .item-info h4 { margin: 20px 0 40px 0; font: 400 2.2rem/3rem "Playfair Display";}
#index .blog-list .item .item-info a, #page .blog-list .item .item-info a { text-transform: uppercase; color: #d88a5f; border-top:2px solid rgba(216,138,95,1.00); padding-top: 10px;}

#page .blog-bckgrd { width: 100%; padding: 10vh 0; background: #f1eeec;}
#page .blog-intro {display:grid; grid-template-columns:1fr 40%; position:relative; margin: 120px auto; width: 100%; max-width: 1600px; grid-gap: 60px;}

#page .blog-intro div:nth-child(1) {  padding: 40px;display: grid;  justify-content: center;  align-content: center;  grid-auto-flow: column; }
#page .blog-intro div:nth-child(1) p {  font: 400 2.2rem/4rem "Playfair Display"; position: relative; }
#page .blog-intro div:nth-child(2) img { max-width: 100%; height: 80vh;	object-fit: cover;}

#page .blog-intro div:nth-child(1) p:before {    content: '\201C';    color: #6f7072;    font-size: 40px; position: absolute;   left: -20px;  top:0;}
#page .blog-intro div:nth-child(1) p:after {    content: '\201D';    color: #6f7072;    font-size: 40px;}

#page .blog-intro.reverse {grid-template-columns:40% 1fr;}
#page .blog-intro.reverse div:nth-child(1) { grid-area: 1 / 2;}
#page .blog-intro.reverse div:nth-child(2) { grid-area: 1 / 1;}

#page .blog-slogan {display:grid; grid-template-columns:40% 1fr; position:relative; margin: 120px auto; width: 100%; max-width: 1600px; grid-gap: 60px;}
#page .blog-slogan p { margin-bottom: 0;}
#page .blog-slogan div:nth-child(1) img { max-width: 100%; height: 80vh;	object-fit: cover;}
#page .blog-slogan div:nth-child(2) {  padding: 40px;display: grid;  justify-content: center;  align-content: center;  grid-auto-flow: column; }
#page .blog-slogan div:nth-child(2) {  font: 400 2.2rem/4rem "Playfair Display"; position: relative; }

#page .blog-slogan .titre-big {font: 700 8rem/7rem "Playfair Display";    position: absolute;    left: -250px;    top: 50px;}
#page .blog-slogan .titre-big span {font: 400 3rem/5rem "Playfair Display"; position: relative; color: #d88a5f; display: block; left: 200px; top: 20px;}

#page .blog-bckgrd.white { background: #fff;}

@media (min-width:1201px) {
	#index .blog-list .item .item-info a:hover, #page .blog-list .item .item-info a:hover { border-top:2px solid rgba(216,138,95,0);}
}

@media (max-width:1200px) {
	#index .blog-list { grid-template-columns:repeat(2,1fr);}
	#index .blog-list .item:nth-child(3) { grid-column: span 2;}
	#index .blog-list .item:nth-child(3) img { width: 100%;    object-fit: cover;    max-height: 450px; object-position: top;}
}

@media (max-width:992px) {
	#page .blog-slogan .titre-big {font: 700 7rem/6rem "Playfair Display";}
	#page .blog-slogan {grid-gap: 20px; margin: 0 auto;}
	#page .blog-slogan .titre-big span {left: 250px;}
	#page .blog-bckgrd {padding: 2vh 0;}
}

@media (max-width:768px) {
	#page .blog-list {grid-gap: 20px; grid-template-columns: repeat(2,1fr);}
	#page .blog-slogan .titre-big {font: 700 6rem/5rem "Playfair Display";}
	#page .blog-intro {    grid-gap: 20px;}
	#page .blog-slogan .titre-big span {font: 400 2.5rem/4.5rem "Playfair Display";}
}

@media (max-width:600px) {
	#index .blog-list, #page .blog-list { grid-template-columns:1fr;}
	#index .blog-list .item:nth-child(3) { grid-column: auto;}
	#page .blog-slogan .titre-big {left: -200px;}
	#page .blog-slogan .titre-big span { left: 200px;}
	#page .blog-intro {grid-template-columns: 1fr 30%;}
	#page .blog-intro.reverse {grid-template-columns: 30% 1fr;}
	#page .blog-intro div:nth-child(1) { padding: 20px;}
	#page .blog-slogan .titre-big { position: relative; left: inherit; top: inherit;}
	#page .blog-slogan .titre-big span { left: inherit; margin-bottom: 40px;}
}
@media (max-width:400px) {
	#page .blog-slogan .titre-big {font: 700 5rem/4rem "Playfair Display";}
	#page .blog-intro, #page .blog-intro.reverse {grid-template-columns: 1fr;}
	#page .blog-intro.reverse div:nth-child(1) { grid-area: auto;}
}