/*--------------------------------------------------*/
/*	OVERRIDES
/*--------------------------------------------------*/

.post article {
	padding: 0;
}
/*

@media screen and (min-width: 920px) {
	#posts .post .head h3 {
		width: calc(50vw - 170px - var(--menu-width));
	}
}

@media screen and (max-width: 920px) {
	#posts .post .head h3 {
		width: calc(50vw - 170px);
	}
}

@media screen and (max-width: 680px) {
	#posts .post .head h3 {
		width: calc(100vw - 170px);
	}
}
*/

/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.post,
.post article,
.post article .head,
.post article .body,
.post article .foot {
	width: 100%;
}

.post .body,
.post .foot {
	border-top: 1px solid var(--underline3);
}

.post article {
	display: inline-grid;
}

.post .date {
	padding: 5px 15px;

	color: var(--underline2);
	text-align: right;
}

.post .head {
	padding: 15px;
	overflow: hidden;
}

.post .head:has(.icon) {
	padding-left: 74px;
}

.post .head .icon {
	position: absolute;
	top: 0;
	left: 0;

	width: 64px;
	height: 64px;

	margin: 5px;

	background-repeat: no-repeat;

	-webkit-background-position: center;
	   -moz-background-position: center;
	     -o-background-position: center;
	    -ms-background-position: center;
	        background-position: center;

	-webkit-background-size: contain;
	   -moz-background-size: contain;
	     -o-background-size: contain;
	    -ms-background-size: contain;
	        background-size: contain;
}

.post .foot {
	display: inline-flex;
	padding: 10px;
}

.post .head h3{
	line-height: 26px;
}

.post .head p {
	line-height: 18px;
}

.post .head h3,
.post .head p {
    width: calc(100% - 120px);
	text-align: left !important;
}

.post .head h3,
.post .head.no-wrap p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.post .head:after {
	content: " ";
	position: absolute;
	top: calc(50% - 16px);
	right: 0;

	width: 100px;
	height: 32px;
	line-height: 32px;

	text-align: center;
	font-weight: bold;
	font-size: 120%;

	color: var(--background);
	text-shadow: 0 0 5px #40404040;
}

.post .body {
	display: block;

	width: 100%;
	height: 250px;

	padding-top: 75%;

	background-repeat: no-repeat;

	-webkit-background-position: center;
	   -moz-background-position: center;
	     -o-background-position: center;
	    -ms-background-position: center;
	        background-position: center;

	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	    -ms-background-size: cover;
	        background-size: cover;
}

.post .body > a {
	display: block;
	width: 100%;
}

.post .body .more {
	z-index: 2;
	position: absolute;
	bottom: 15px;
	left: 50%;

	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);

	font-weight: bold;
}

.post .foot {
	background: #F4F4F4;
}

/*--------------------------------------------------*/
/*	CREATIVE
/*--------------------------------------------------*/

html[locale="en"] .post[type="creative"] .head:after {
	content: "Creative";
}

html[locale="fr"] .post[type="creative"] .head:after {
	content: "Créatif";
}

.post[type="creative"] .body img {
	max-height: 500px;
	max-width: 500px;

	padding: 15px;
	margin: auto;
}

/*--------------------------------------------------*/
/*	BLOG POST
/*--------------------------------------------------*/

.post[type="Article"] .head:after {
	content: "Article";
}

.post[type="Article"] .body {
	padding: 0;
}

.post[type="Article"] .body:after {
	content: " ";
	position: absolute;
	bottom: 0;
	left: 0;

	width: 100%;
	height: 100%;

	-webkit-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	   -moz-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	    -ms-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	     -o-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	        background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
}

.post[type="Article"] iframe {
	width: 100%;
	height: 250px;
}

/*--------------------------------------------------*/
/*	DEMOS
/*--------------------------------------------------*/

html[locale="en"] .post[type="demo"] .head:after {
	content: "Demo";
}

html[locale="fr"] .post[type="demo"] .head:after {
	content: "Démo";
}

/*
.post[type="demo"] .body:after {
	content: " ";
	position: absolute;
	bottom: 0;
	left: 0;

	width: 100%;
	height: 100%;

	-webkit-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	   -moz-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	    -ms-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	     -o-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	        background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
}
*/

.post[type="demo"] iframe {
	width: 100%;
	height: 250px;
}

/*--------------------------------------------------*/
/*	PROJECTS
/*--------------------------------------------------*/

html[locale="en"] .post[type="project"] .head:after {
	content: "Project";
}

html[locale="fr"] .post[type="project"] .head:after {
	content: "Projet";
}

/*
.post[type="project"] .body:after {
	content: " ";
	position: absolute;
	bottom: 0;
	left: 0;

	width: 100%;
	height: 100%;

	-webkit-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	   -moz-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	    -ms-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	     -o-background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
	        background: linear-gradient(0deg, #FFFFFF 30%, transparent 50%);
}
*/

.post[type="project"] iframe {
	width: 100%;
	height: 250px;
}

/*--------------------------------------------------*/
/*	COLORS
/*--------------------------------------------------*/

/*--- BLACK ---*/
.post[type="Article"] .head,
.post.black .head {
	background: -webkit-linear-gradient(300deg, var(--color-black) 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #FFFFFF 120px);
	background:    -moz-linear-gradient(300deg, var(--color-black) 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #FFFFFF 120px);
	background:     -ms-linear-gradient(300deg, var(--color-black) 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #FFFFFF 120px);
	background:      -o-linear-gradient(300deg, var(--color-black) 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #FFFFFF 120px);
	background:         linear-gradient(300deg, var(--color-black) 100px, var(--color-black-light) 101px, var(--color-black-light) 119px, #FFFFFF 120px);
}

/*--- GRAY ---*/
.post.gray .head {
	background: -webkit-linear-gradient(300deg, var(--color-gray) 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #FFFFFF 120px);
	background:    -moz-linear-gradient(300deg, var(--color-gray) 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #FFFFFF 120px);
	background:     -ms-linear-gradient(300deg, var(--color-gray) 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #FFFFFF 120px);
	background:      -o-linear-gradient(300deg, var(--color-gray) 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #FFFFFF 120px);
	background:         linear-gradient(300deg, var(--color-gray) 100px, var(--color-gray-light) 101px, var(--color-gray-light) 119px, #FFFFFF 120px);
}

/*--- ORANGE ---*/
.post[type="creative"] .head,
.post.orange .head {
	background: -webkit-linear-gradient(300deg, var(--color-orange) 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #FFFFFF 120px);
	background:    -moz-linear-gradient(300deg, var(--color-orange) 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #FFFFFF 120px);
	background:     -ms-linear-gradient(300deg, var(--color-orange) 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #FFFFFF 120px);
	background:      -o-linear-gradient(300deg, var(--color-orange) 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #FFFFFF 120px);
	background:         linear-gradient(300deg, var(--color-orange) 100px, var(--color-orange-light) 101px, var(--color-orange-light) 119px, #FFFFFF 120px);
}

/*--- BLUE ---*/
.post[type="demo"] .head,
.post.blue .head {
	background: -webkit-linear-gradient(300deg, var(--color-blue) 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #FFFFFF 120px);
	background:    -moz-linear-gradient(300deg, var(--color-blue) 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #FFFFFF 120px);
	background:     -ms-linear-gradient(300deg, var(--color-blue) 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #FFFFFF 120px);
	background:      -o-linear-gradient(300deg, var(--color-blue) 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #FFFFFF 120px);
	background:         linear-gradient(300deg, var(--color-blue) 100px, var(--color-blue-light) 101px, var(--color-blue-light) 119px, #FFFFFF 120px);
}

/*--- CYAN ---*/
.post.cyan .head {
	background: -webkit-linear-gradient(300deg, var(--color-cyan) 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #FFFFFF 120px);
	background:    -moz-linear-gradient(300deg, var(--color-cyan) 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #FFFFFF 120px);
	background:     -ms-linear-gradient(300deg, var(--color-cyan) 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #FFFFFF 120px);
	background:      -o-linear-gradient(300deg, var(--color-cyan) 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #FFFFFF 120px);
	background:         linear-gradient(300deg, var(--color-cyan) 100px, var(--color-cyan-light) 101px, var(--color-cyan-light) 119px, #FFFFFF 120px);
}

/*--- RED ---*/
.post.red .head {
	background: -webkit-linear-gradient(300deg, var(--color-red) 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #FFFFFF 120px);
	background:    -moz-linear-gradient(300deg, var(--color-red) 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #FFFFFF 120px);
	background:     -ms-linear-gradient(300deg, var(--color-red) 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #FFFFFF 120px);
	background:      -o-linear-gradient(300deg, var(--color-red) 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #FFFFFF 120px);
	background:         linear-gradient(300deg, var(--color-red) 100px, var(--color-red-light) 101px, var(--color-red-light) 119px, #FFFFFF 120px);
}

/*--- GREEN ---*/
.post.green .head {
	background: -webkit-linear-gradient(300deg, var(--color-green) 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #FFFFFF 120px);
	background:    -moz-linear-gradient(300deg, var(--color-green) 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #FFFFFF 120px);
	background:     -ms-linear-gradient(300deg, var(--color-green) 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #FFFFFF 120px);
	background:      -o-linear-gradient(300deg, var(--color-green) 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #FFFFFF 120px);
	background:         linear-gradient(300deg, var(--color-green) 100px, var(--color-green-light) 101px, var(--color-green-light) 119px, #FFFFFF 120px);
}

/*--- PURPLE ---*/
.post[type="project"] .head,
.post.purple .head {
	background: -webkit-linear-gradient(300deg, var(--color-purple) 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #FFFFFF 120px);
	background:    -moz-linear-gradient(300deg, var(--color-purple) 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #FFFFFF 120px);
	background:     -ms-linear-gradient(300deg, var(--color-purple) 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #FFFFFF 120px);
	background:      -o-linear-gradient(300deg, var(--color-purple) 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #FFFFFF 120px);
	background:         linear-gradient(300deg, var(--color-purple) 100px, var(--color-purple-light) 101px, var(--color-purple-light) 119px, #FFFFFF 120px);
}