/* LIST */
.list {
	height: 12rem;
	
	margin-bottom: 1rem;
	padding: 1rem;
	
	border: 1px solid #a0a0a0;
}
.list .full-height {
	height: 100%;
}
.list .flex-row {
	height: 50%;

	justify-content: center;
	align-items: center;
}
.list .flex-row.full-height {
	height: 100%;
}

/*
.list .flex-item {
	text-align: center;
}
*/

.list form {
	margin-bottom: 0;
	border: none;
}
.list form select {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
.list form label {
	font-size: 2.5rem;
	line-height: 3rem;
}

.list form .button {
	padding: 0.25rem;
	width: 5rem;
}

/* THUMBNAIL */
.thumbnail {
	width: 100%;
	height: 10rem;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* SECTION INFOS */
.section p {
	margin-left: 1rem;
	
	font-size: 3rem;
	line-height: 3rem;
	font-weight: 400;
	text-align: left;
}

.section > .list:first-child {
	height: 8rem;
}

/* PRODUCT COMMON */
.product a {
	font-size: 3rem;
	line-height: 3rem;

	color: #ffffff;
	
	text-decoration: none;
}
.product a:hover {
	text-decoration: none;
}

/* PRODUCT ORDER */
.product.order .name {
	display: block;

	margin-left: 0;

	font-size: 3rem;
	line-height: 3rem;
	font-weight: 300;
}

.product.order span.fa {
	display: block;
	width: 100%;
	font-size: 3rem;
	line-height: 3rem;
	text-align: center;
}

.product.order .count {
	width: 100%;
	height: 3rem;
	
	text-align: center;
	font-size: 3rem;
	line-height: 3rem;
	color: #ffffff;
	
	background-color: #404040;
	border: 1px solid  #606060;
}

.product.order .unit {
	width: 100%;
	height: 3rem;

	-webkit-appearance: none; 
	-moz-appearance: none;
	text-indent: 0.01px;
	text-overflow: "";

	font-size: 2rem;
	line-height: 2rem;
	color: #ffffff;
	
	background-color: #404040;
	border: 1px solid  #606060;
}

/* PRODUCT BUY */
.product.buy .name {
	display: block;

	margin-left: 0;

	font-size: 3rem;
	line-height: 3rem;
	font-weight: 300;
}

.product.buy span.fa {
	display: block;
	width: 100%;
	font-size: 3rem;
	line-height: 3rem;
	text-align: right;
}

.product.buy .count_unit {
	margin-left: 0;
}

.product.buy .count {
	font-size: 3rem;
	line-height: 3rem;
	font-weight: 300;
}

.product.buy .unit {
	font-size: 3rem;
	line-height: 3rem;
	font-weight: 300;
}

@media (max-width: 1007px) and (min-width: 600px) { 
	.list {
		padding: 0.75rem;
	}

	.list form select {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	
	.list form label {
		font-size: 2.5em;
		line-height: 3rem;
	}

	.list form .button {
		padding: 0.5rem;
		width: 5rem;
	}

	.section p {
		font-size: 3rem;
		line-height: 3rem;
	}
	
	.product a {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}

	.product.order .name {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	.product.order span.fa {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	.product.order .count {
		height: 2.5rem;
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	.product.order .unit {
		height: 2.5rem;

		font-size: 1.5rem;
		line-height: 1.5rem;
	}

	.product.buy .name {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	.product.buy span.fa {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	.product.buy .count {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	.product.buy .unit {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
}

@media (max-width: 599px) and (min-width: 481px) { 
	.list {
		height: 11rem;
		padding: 0.5rem;
	}

	.list form select {
		font-size: 2rem;
		line-height: 2rem;
	}
	
	.list form label {
		font-size: 2em;
		line-height: 2.5rem;
	}

	.list form .button {
		padding: 0.75rem;
		width: 5rem;
	}

	.section > .list:first-child {
		height: 7rem;
	}

	.section p {
		font-size: 2.5rem;
		line-height: 2.5rem;
	}

	.product a {
		font-size: 2rem;
		line-height: 2rem;
	}

	.product.order .name {
		font-size: 2rem;
		line-height: 2rem;
	}
	.product.order span.fa {
		font-size: 2rem;
		line-height: 2rem;
	}
	.product.order .count {
		height: 2rem;
		font-size: 2rem;
		line-height: 2rem;
	}
	.product.order .unit {
		height: 2rem;

		font-size: 1rem;
		line-height: 1rem;
	}

	.product.buy .name {
		font-size: 2rem;
		line-height: 2rem;
	}
	.product.buy span.fa {
		font-size: 2rem;
		line-height: 2rem;
	}
	.product.buy .count {
		font-size: 2rem;
		line-height: 2rem;
	}
	.product.buy .unit {
		font-size: 2rem;
		line-height: 2rem;
	}
}

@media (max-width: 480px) {
	.list {
		height: 10rem;
		padding: 0.25rem;
	}

	.list form select {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	
	.list form label {
		font-size: 1.5em;
		line-height: 2rem;
	}

	.list form .button {
		padding: 1rem;
		width: 5rem;
	}

	.section > .list:first-child {
		height: 6rem;
	}

	.section p {
		font-size: 2rem;
		line-height: 2rem;
	}

	.product a {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}

	.product.order .name {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	.product.order span.fa {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	.product.order .count {
		height: 1.5rem;
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	.product.order .unit {
		height: 1.5rem;

		font-size: 1rem;
		line-height: 1rem;
	}

	.product.buy .name {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	.product.buy span.fa {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	.product.buy .count {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	.product.buy .unit {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
}