.cms-nos-producteurs .page-main-full-width .main-container {
	max-width: none;
}

.cms-nos-producteurs .page-main-full-width .uk-button {
	    align-self: baseline;
    justify-self: baseline;
}

.cms-nos-producteurs .page-main-full-width [id*="grid"] {
	max-width: 1320px;
	margin: 0 auto;
	padding: 50px 20px;
	display: grid;
}
#violettes-grid {
	
	--main-color: #9335c5;
	--hover-color: #742a9c;
	padding-top: 0;
}

#figue-grid {
	--main-color: #719D09;
	--hover-color: #4a8508;
	padding-top: 0;
}

#violettes-grid .pictures-col {
	display: grid;
	grid-template-columns: 20% 10% 20% 10% 20% 20%;
	grid-template-rows: 20% auto auto auto;
	margin-top: 25%;
	}

#figue-grid .pictures-col {
	display: grid;
	grid-template-columns: 20% 10% 20% 10% 20% 20%;
	grid-template-rows: 20% auto auto auto;
	margin-top: 25%;
	}

#violettes-grid .pictures-col img:nth-child(1) {
	justify-self: flex-start;
	grid-row: 1;
	grid-column: 3 / span 3;
	align-self: flex-start;
	z-index: 10;
}

#figue-grid .pictures-col img:nth-child(1) {
	justify-self: flex-start;
	grid-row: 1;
	grid-column: 3 / span 3;
	z-index: 10;
	align-self: flex-start;
}

#violettes-grid .pictures-col img:nth-child(2) {
	align-self: flex-start;
	justify-self: flex-start;
	grid-column: 1 / span 4;
	grid-row: 2 / span 2;
	z-index: 10;
}

#figue-grid .pictures-col img:nth-child(2) {
	align-self: flex-start;
	justify-self: flex-start;
	grid-column: 1 / span 4;
	grid-row: 2 / span 2;
}

#violettes-grid .pictures-col img:nth-child(3) {
	grid-column: 1 / -1;
	grid-row: 3 / span 2;
	align-self: flex-start;
	justify-self: flex-end;
	z-index: 20;
}

#figue-grid .pictures-col img:nth-child(3) {
	grid-column: 2 / -1;
	grid-row: 3 / span 2;
	align-self: flex-end;
	justify-self: center;
	z-index: 30;
}

#violettes-grid .pictures-col img:nth-child(4) {
	grid-column: 2 / span 2;
	grid-row: 4 / span 2;
	justify-self: center;
	align-self: flex-start;
	z-index: 30;
}

#figue-grid .pictures-col img:nth-child(4) {
    grid-column: 2 / span 2;
    grid-row: 4 / span 2;
    justify-self: flex-start;
    align-self: flex-end;
    z-index: 1000;
}

.cms-nos-producteurs .page-main-full-width  h2 {
	color: var(--main-color);
	font-family: 'Readex Pro', serif;
	font-weight: 600;
	margin-bottom: 22px;
	font-size: 42px;
	display: block;
	text-transform: uppercase;
}

.cms-nos-producteurs .page-main-full-width .content p.text-large {
	font-size: 22px !important;
	margin-bottom: 0 !important;
	font-family: 'Kaisei Tokumin', serif;
}
.cms-nos-producteurs .page-main-full-width .content p {
	font-weight: 300;
}
.cms-nos-producteurs .page-main-full-width .content strong {
	font-weight: 500;
}
.cms-nos-producteurs .page-main-full-width .content .quote {
	font-size: 28px;
	color: var(--main-color);
	font-family: 'Kaisei Tokumin', serif;
	margin-bottom: 40px;
	margin-top: 40px;
	text-align: left;
	line-height: 34px;
}

.blurb-header {
	position: relative;
	height: 535px;
	overflow: hidden;
}

.blurb-header img {
	position: absolute;
	top: 50%;
	left: 50%;
	min-height: 100%;
	width: max( 100%, 1519px);
	transform: translate(-50%, -50%);
	max-width: none;
}

.cms-nos-producteurs .page-main-full-width .button {
	background-color: var(--main-color);
	padding: 0 20px;
	line-height: 42px;
	border-radius: 15px 15px 15px 0;
	font-size: 20px;
	margin-top: 30px;
	transition: all 300ms ease-in-out;
}

.cms-nos-producteurs .page-main-full-width .intro {
	font-size: 28px;
	line-height: 45px;
	font-family: 'Kaisei Tokumin', serif;
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 0;
	padding-bottom: 0;
}

.cms-nos-producteurs .page-main-full-width {
	font-size: 16px;
}

.content {
	font-family: 'Readex Pro', serif;
}

.cms-nos-producteurs .page-main-full-width .main-container p {
	font-family: 'Readex Pro', serif;
}

body.cms-nos-producteurs .page-main-full-width .main-container p {
	font-family: 'Readex Pro', serif;
	font-size: 18px !important;
}

.cms-nos-producteurs .page-main-full-width .button:hover {
	background-color: var(--hover-color);
}

#CEO-quote {
	background-image: url(/media/wysiwyg/page-producteurs/fond-message-president.jpg);
	background-position: center center;
	background-size: cover;
}

.quote {
	color: #fff;
	font-size: 28px;
	font-family: 'Kaisei Tokumin', serif;
	line-height: 45px;
	max-width: 1020px;
	text-align: center;
	margin: 0 auto;
}

img.portrait {
	margin: 0 auto;
	display: block;
	border: solid 5px #fff;
	border-radius: 200px;
	margin: 30px auto;
}

.ceo-name {
	color: #000;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}

.job-name {
	font-size: 22px;
	color: #fff;
	text-align: center;
	margin: 10px;
}

#citron-grid {
	--main-color: #acbc50;
	--hover-color: #8f9e3c;
}

#citron-grid .pictures-col {
	grid-row: 1 / -1;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 50% 20px 2fr 1fr 380px;
	grid-template-rows: 15% 15% 20% 45%;
}

#citron-grid .pictures-col img:nth-child(1) {
	grid-column: 4 / span 2;
	grid-row: 2 / span 2;
	justify-self: flex-start;
}

#citron-grid .pictures-col img:nth-child(2) {
	grid-row: 1 / span 2;
	grid-column: -2 / span 1;
	justify-self: flex-end;
	width: 60%;
}

#citron-grid .pictures-col img:nth-child(3) {
	grid-row: 3 / span 2;
	grid-column: 3 / span 3;
}

#citron-grid .pictures-col img:nth-child(4) {
	grid-column: 1 / span 4;
	grid-row: -2 / span 1;
	justify-self: flex-end;
	z-index: 1000;
}

.orange-container {
	background-image: none;
	background-position: center;
	background-size: cover;
}

div#orange-grid {
--main-color: #e76a00;
--hover-color: #cc5f00;
}

#orange-grid h2 {
	width: 100%;
	text-align: center;
	color: #fff;
}

#orange-grid .quote {
	color: #fff;
}

#orange-grid .button {
	/* background: #fff; */
	/* color: var(--main-color); */
	/* border: solid 3px; */
}

#rose-grid {
	--main-color: #c5495e;
	--hover-color: #af3146;
	grid-template-columns: 100%;
}

#rose-grid h2 {
	width: 100%;
	justify-self: center;
}

#rose-grid .pictures-col {
	grid-row: 2 / -1;
	grid-column: 1 / -2;
	padding-top: 50px;
	display: grid;
	grid-template-rows: 25% 70% 5%;
	grid-template-columns: 18% 14% 60% 8%;
}

#rose-grid .pictures-col img:nth-child(1) {
	grid-column: 3;
	grid-row: 1;
}

#rose-grid .pictures-col img:nth-child(2) {
	grid-column: 1 / span 3;
	grid-row: 2;
}

#rose-grid .pictures-col img:nth-child(3) {
	grid-row: 2;
	grid-column: 2 / 4;
	justify-self: self-end;
	align-self: end;
}

#rose-grid .pictures-col img:nth-child(4) {
	grid-column: 3;
	grid-row: 2 / span 2;
	justify-self: flex-end;
	align-self: flex-end;
	/* width: 100%; */
	/* height: 100%; */
}






.image-hidden-desktop {
	display: block;
	margin: 0 -40px;
	position: relative;
	padding-top: 150%;
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
}

.image-hidden-desktop img {
	position: absolute;
	top: 0;
	height: 100%;
	width: auto;
	max-width: none;
	left: 0;
	transform: translateX(-10%);
}

#citron-grid .button {
	grid-row: 4 / span 1;
	grid-column: 1 / span 1;
	justify-self: flex-start;
	align-self: flex-end;
}

body.cms-nos-producteurs .page-main-full-width .main-container p {
	color: #000 !important;
}



@media (min-width: 960px) {
	
	#citron-grid .pictures-col img:nth-child(4) {
		grid-column: 1 / 4;
		width: 100%;
		justify-self: stretch;
	}
	
	#citron-grid .button {
		grid-row: 2 / span 1;
		grid-column: 1 / span 1;
		justify-self: flex-start;
		align-self: flex-end;
	}
	
	#citron-grid .quote {
		max-width: 350px;
		margin-left: 0;
	}
	
	#citron-grid .text-large {
		max-width: 500px;
	}
	
	#orange-grid .text-large {
		max-width: 370px;
		margin-right: 40px;
	}
	
	.cms-nos-producteurs .page-main-full-width  h2 {
		max-width: 400px;
	}
	
	.image-hidden-desktop {
		display: none;
	}

	#violettes-grid, #figue-grid {
		grid-template-columns: 50% auto 380px;
		grid-template-rows: auto auto;
	
	}

	#violettes-grid .content, #figue-grid .content {
		grid-column: 2 / -1;
		grid-row: 1 / span 1;
		align-self: end;
	}

	#violettes-grid .content:last-child, #figue-grid .content:last-child {
		grid-column: -2 / span 1;
		grid-row: -2 / span 1;
		align-self: flex-start;
	}

	
	#violettes-grid .pictures-col, #figue-grid .pictures-col {
		grid-column: 1 / span 2;
		grid-row: 1 / -1;
	}
	
	#citron-grid .content {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}
	
	#citron-grid .content:last-child {
		grid-column: -2 / span 1;
		grid-row: -2 / span 1;
	}
	
	#citron-grid {
		grid-template-columns: 50% auto 380px;
		grid-template-rows: auto 200px auto;
	}
	
	div#orange-grid {
		grid-template-columns: 50% auto 380px;
		grid-template-rows: auto auto auto;
		padding: 50px 20px 100px 20px;
	}
	
	#orange-grid h2 {
		grid-row: 1 / span 1;
		grid-column: 1 / -1;
		max-width: 800px;
		justify-self: center;
	}
	
	#orange-grid .content {
		grid-row: 2 / span 1;
		grid-column: 1 / span 2;
		justify-self: flex-end;
	}
	
	#orange-grid .content:last-child {
		grid-row: -2 / span 1;
		grid-column: -2 / span 1;
	}
	
	#rose-grid {
		grid-template-columns: 50% auto 380px;
		grid-template-rows: auto auto auto;
	}
	
	#rose-grid .content {
		grid-column: 2 / span 2;
		max-width: 500px;
		grid-row: 2 / span 1;
	}
	
	#rose-grid h2 {
		grid-row: 1 / span 1;
		grid-column: 1 / -1;
		justify-self: center;
		text-align: center;
		max-width: 650px;
	}
	
	#rose-grid .content:last-child {
		grid-column: -2 / span 1;
		grid-row: -2 / span 1;
	}
	
	.orange-container {
		background-image: url(/media/wysiwyg/page-producteurs/fond-oranges.jpg);
	}


	#figue-grid h2,
	#figue-grid .content .uk-width-large {
		width: 100%;
		max-width: 550px;
	}
		
}

@media (max-width: 959px) {
	.cms-nos-producteurs .page-main-full-width .intro {
		font-size: 20px;
		line-height: 26px;
	}
	#orange-grid .quote,
	#orange-grid h2 {
		color: var(--main-color);
	}
	
	.cms-nos-producteurs .page-main-full-width h2 {
		font-size: 28px;
	}
	
	.cms-nos-producteurs .page-main-full-width .content p.text-large {
		font-size: 18px !important;
	}
	
	.cms-nos-producteurs .page-main-full-width .content .quote {
		font-size: 26px;
	}
	
	.cms-nos-producteurs .page-main-full-width .button {
		font-size: 18px;
	}
	
	.quote {
		font-size: 26px;
		line-height: 1.4em;
	}
	
	.job-name {
		font-size: 18px;
	}
	
	#violettes-grid .pictures-col {
		margin-top: 100px;
	}
	
	.pictures-col {}
	
	.pictures-col {
		margin-left: -20px;
		margin-right: -20px;
	}
	
	.pictures-col {
		margin-left: -20px;
		margin-right: -20px;
	}
	
	#citron-grid .pictures-col {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 2fr 1.5fr 3fr;
	}
	
	#citron-grid .pictures-col img:nth-child(1) {
		grid-column: 2 / span 3;
		width: 70%;
		justify-self: center;
	}
	
	#citron-grid .pictures-col img:nth-child(4) {
		align-self: center;
		grid-column: 1 / span 3;
	}
	
	#citron-grid .pictures-col img:nth-child(2) {
		grid-row: 1 / span 2;
		grid-column: -3 / span 2;
	}
	
	#citron-grid .pictures-col img:nth-child(3) {
		grid-column: 2 / span 2;
	}
	
	#rose-grid .pictures-col {
		grid-template-rows: 2fr 1fr 1fr 1fr 2fr;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	
	#rose-grid .pictures-col img:nth-child(4) {
		grid-row: -1 / -3;
		grid-column: -1 / -3;
	}
	
	#rose-grid .pictures-col img:nth-child(3) {
		grid-column: 1 / span 4;
		grid-row: 3/ 6;
		align-self: flex-start;
		margin-top: 20px;
	}
	
	#orange-grid > img {
		grid-column: 1 / span 1;
		grid-row: 4;
		display: block;
		margin-top: 20px;
		justify-self: center;
	}
	
	#rose-grid .pictures-col img:nth-child(2) {
		grid-column: 1 / -2;
		grid-row: 2 / 4;
		align-self: center;
		margin-top: -20%;
	}
	
	#rose-grid .pictures-col img:nth-child(1) {
		grid-column: 2 / 5;
		grid-row: 1 / 3;
	}	
}