body {
	width: 100vw;
	min-height: calc(100vh - 50px);
	background-color: #eee;
}

#container {
	width: 100%;
	min-height: calc(100vh - 50px);
	display: flex;
	justify-content: center;
	align-items: center;
}

#article {
	width: calc(100% - 30px);
	min-height: calc(100vh - 80px);
	padding: 30px 15px;
	color: #4E4E4E;
}

#article-title {
	width: 100%;
	text-align: center;
}

#article-title h1 {
	font-weight: 100;
	color: #4E4E4E;
	font-size: 25px;
}

#article-title hr {
	width: 100px;
	margin: auto;
	border: none;
	border-top: 1px solid #4E4E4E;
}

#article-images {
	padding: 30px;
	width: calc(100% - 60px);
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

.article-image {
	width: 85%;
	height: auto;
}

#article-images img {
	width: 100%;
	height: auto;
	display: block;
	margin-top: 20px;
}

#article-details {
	margin-top: 20px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

#article-details-description {
	width: 100%;
	text-align: justify;
	font-weight: 100;
}

#article-details-description h2 {
	font-weight: 100;
}

#article-details-description hr {
	border: none;
	border-top: 1px solid #CCC;
}

#article-details-prices-cart {
	width: 100%;
	height: 100%;
	border-top: 1px solid #CCC;
	margin-top: 20px;
}

#article-prices {
	margin-top: 20px;
}

#article-price-ttc, #article-price-ht,
#article-quantity {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#article-price-ht, #article-quantity, #article-button, #article-date-start, #article-date-end {
	margin-top: 10px;
}

#article-dates {
	display: flex;
	flex-direction: column;
}

input[type="date"]::-webkit-clear-button {
	display: none;
}

#article-date-start, #article-date-end {
	display: flex;
	justify-content: space-between;
}

#article-dates input {
	border: none;
	text-align: center;
}

#article-button {
	text-align: center;
}

#article-button button {
	padding: 15px 20px;
	border-radius: 2px;
	border: none;
	background-color: #fff;
	color: green;
	font-size: 15px;
	transition: all 0.2s;
	cursor: pointer;
}

#article-button button:hover {
	color: #FFF;
	background-color: green;
}

#article-not-available {
	display: none;
	text-align: center;
}

@media(min-width: 768px) {
	#article {
		width: calc(70% - 30px);
	}
	
	#article-title h1 {
		font-size: 35px;
	}

	#article-images {
		flex-direction: row;
	}

	.article-image {
		width: 25%;
		height: auto;
	}

	#article-details {
		height: 100%;
		flex-direction: row;
		align-items: flex-start;
	}

	#article-details-description {
		width: 75%;
	}

	#article-details-prices-cart {
		width: calc(25% - 40px);
		border-left: 1px solid #CCC;
		border-top: none;
		margin-top: 0;
		padding: 20px;
	}

	#article-details-description {
		padding: 0 25px 0 0;
	}
}