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

body {
	height: auto;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	color: #000;
}

h1 {
	text-align: center;
}

#page {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#history {
	position: relative;
	width: 500px;
	height: auto;
	font-size: 12px;
	padding-top: 2rem;
	margin-bottom: 1rem;
	text-align: justify;
}

#country {
	position: relative;
	width: 100%;
	margin-top: 1rem;
	text-align: center;
}

#barcode {
	position: relative;
	width: 400px;
	height: 300px;
	text-align: center;
	border: 5px solid #E3801F;
	border-radius: 20px;
	padding: 1rem 0;
}

#barcode #svg {
	min-height: 210px;
}

#barcode svg {
	position: relative;
	width: 350px;
	overflow: hidden;
	transform: translateX(-1rem);
}

#barcode form {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center; 
}

#barcode form img {
	width: auto;
	height: 58px;
	vertical-align: bottom;
}

#barcode form img:hover {
	filter: drop-shadow(16px 16px 20px blue) invert(75%);
}

#barcode input[type="text"] {
	width: 200px;
	padding: 1rem;
	border: 2px solid #E3801F;
	border-right: none;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

#register {
	position: absolute;
	z-index: -5;
	top: 0;
	left: 0;
	visibility: hidden;
}

#barcode .text-code {
	font-size: 32px;
}

#barcode .icon {
	width: 32px;
	height: auto;
	padding: 0 0.25rem;
	margin-right: 0.5rem;
	filter: grayscale(0);
}

#barcode .icon-zip, #barcode .icon-reg {
	width: 25px;
	height: auto;
	padding: 0 0.25rem;
	margin-right: 0.5rem;
	filter: grayscale(0);
}

#barcode .icon:hover, #barcode .icon-zip:hover {
	filter: grayscale(80%);
}

#product {
	position: relative;
	width: 100%;
}

#product .image {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#product .image h3 {
	position: relative;
	width: 100%;	
	text-transform: uppercase;
	margin-bottom: 0;
}

#product .image p {
	position: relative;
	width: 100%;
	margin-top: 0;
}

#product .image img {
	width: auto;
	height: 200px;
	padding-top: 1rem;
}

#score {
	position: relative;
	width: 200px;
	margin: 1rem auto;
}

#score ul {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
}

#score .check {
	border-radius: 10px;
	border: 2px solid #fff;
	color: #fff;
	font-weight: bold;
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);	
}

#score li {
	list-style-type: none;
	padding: 0.75rem 7px;
}

#score li:nth-child(1) {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

#score li:nth-child(5) {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

#score .score1 {
	background-color: #038141;
}

#score .score2 {
	background-color: #85bb2f;
}

#score .score3 {
	background-color: #fecb02;
}

#score .score4 {
	background-color: #ee8100;
}

#score .score5 {
	background-color: #e63e11;
}

#nutriments th {
	color: #fff;	
	background-color: rgba(0,0,0,0.25);
	padding: 0.2rem;
}

#nutriments tr:nth-child(2n) {
	background-color: rgba(0,0,0,0.1);
}

#nutriments td {
	padding: 0.2rem;
	font-size: 14px;
}

#nutriments i {
	font-size: 12px;
}

footer {
	position: relative;
	padding: 0;
	text-align: right;
	margin: 1rem 0;
}

@media (min-width: 600px) {

	#page {
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	#barcode {
		position: relative;
		width: 500px;
		height: 300px;
	}
	
	#product .data {
		width: 500px;
		margin: 0 auto;
	}	
	
	footer {
		width: 500px;
		margin: 0 auto;
	}	
	
}

@media (min-width: 992px) {

	#page {
		flex-direction: column;
		flex-wrap: wrap;
	}
	
	#barcode {
		position: relative;
		width: 500px;
		height: 300px;
	}	
	
}