/* cyrillic-ext */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: local('Montserrat Bold'), local('Montserrat-Bold'), url(../fonts/JTURjIg1_i6t8kCHKm45_dJE3gTD_u50.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: local('Montserrat Bold'), local('Montserrat-Bold'), url(../fonts/JTURjIg1_i6t8kCHKm45_dJE3g3D_u50.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: local('Montserrat Bold'), local('Montserrat-Bold'), url(../fonts/JTURjIg1_i6t8kCHKm45_dJE3gbD_u50.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: local('Montserrat Bold'), local('Montserrat-Bold'), url(../fonts/JTURjIg1_i6t8kCHKm45_dJE3gfD_u50.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: local('Montserrat Bold'), local('Montserrat-Bold'), url(../fonts/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	src: local('Montserrat Black'), local('Montserrat-Black'), url(../fonts/JTURjIg1_i6t8kCHKm45_epG3gTD_u50.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	src: local('Montserrat Black'), local('Montserrat-Black'), url(../fonts/JTURjIg1_i6t8kCHKm45_epG3g3D_u50.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	src: local('Montserrat Black'), local('Montserrat-Black'), url(../fonts/JTURjIg1_i6t8kCHKm45_epG3gbD_u50.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	src: local('Montserrat Black'), local('Montserrat-Black'), url(../fonts/JTURjIg1_i6t8kCHKm45_epG3gfD_u50.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	src: local('Montserrat Black'), local('Montserrat-Black'), url(../fonts/JTURjIg1_i6t8kCHKm45_epG3gnD_g.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	/* make transparent link selection, adjust last value opacity 0 to 1.0 */
}


*:focus {
	outline: none;
}

body,
html {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Montserrat', sans-serif !important;
	background: #0090ff;
	font-size: 18px;
	color: #FFF;
}

header {
	width: 100%;
	margin: 0;
	background: #FFF;
	position: fixed;
	top: 0;
	text-align: center;
	vertical-align: middle;
	box-shadow: 0 0px 10px rgba(0, 144, 255, .35);
	text-align: center;
	z-index: 999;
}

nav {
	padding: 0;
	width: 100%;
	text-align: center;
	transition: .3s;
	position: fixed;
	background: #FFF;
	margin-top: -5em;
	padding: 10px 0;
	box-shadow: 0 3px 3px rgba(0, 144, 255, .5);
}

header svg {
	height: 1.5em;
	padding: .25em 0;
	width: auto;
	vertical-align: middle;
	margin-left: -.65em;
}

header {
	text-decoration: none;
	color: #0090ff;
	vertical-align: middle;
	font-size: 1.75em;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

header .text {
	font-size: .85em;
}

main,
footer {
	margin: 0 auto;
	text-align: center;
}

main {
	max-width: 700px;
	width: 95% !important;
	display: block;
	transition: .3s;
	padding-top: 6em;
}

.item {
	display: inline-block;
	width: 6em;
	height: auto;
	border-radius: .5em;
	border: 1px solid #FFF;
	padding: 1em 1.5em;
	text-decoration: none;
	color: #FFF;
	margin: 1em;
}

.logo {
	fill: #0090ff;
}

.icon {
	fill: #fff;
}

.item:hover {
	background: #FFF;
	color: #0090ff;
	border-color: #0090ff;
	transition: .3s;
}

.item:hover .icon {
	fill: #0090ff;
	transition: .3s
}

#less,
#more {
	display: none;
}

.menu {
	width: 46px;
	height: 54px;
	position: fixed;
	margin: 80px 0 0 0;
	padding: 0;
	top: 0;
	left: 0%;
	display: block;
	box-shadow: 0 5px 0 rgba(0, 109, 249, .5);
}

#expand,
#collapse {
	text-decoration: none;
	display: block;
	position: fixed;
	left: 100%;
	margin-left: -1.1em
}

#collapse {
	display: none;
}

#back {
	text-decoration: none;
	display: block;
	position: fixed;
	left: 0%;
	margin-left: .6em
}

#salesExpand,
#salesCollapse {
	width: 100px;
	height: 75px;
	background: #FFF;
	margin: auto;
	border-radius: 50%;
	z-index: 998;
	color: #0090ff;
	font-size: .9em;
	text-align: center;
	font-weight: 600;
	line-height: 0;
	padding-top: 25px;
	box-shadow: 0 0px 10px rgba(0, 144, 255, .35);
}

#salesCollapse {
	display: none;
}

nav .item .icon {
	fill: #0090ff;
}

nav .item {
	border: none;
	font-size: .6em;
	padding: 0;
	margin: .6em 1em;
	color: #0090ff;
	text-align: center;
}

nav .item svg {
	width: 3.5em;
	height: auto;
	display: block;
	margin: auto;
}


.btn-blue {
	background: #0090ff !important;
	border-color: #0090ff !important;
}

.btn-blue:hover {
	background: none !important;
	color: #0090ff !important;
}

select {
	-moz-appearance: none;
	/* Firefox */
	-webkit-appearance: none;
	/* Safari and Chrome */
	appearance: none;
	background: url(../img/select-arrow.png) #FFF no-repeat center right;
}

input,
select {
	border: none;
	padding: 1em;
	font-family: 'Montserrat', sans-serif;
	border-radius: 5px;
	margin: .5em auto;
	text-align: center
}

select {
	text-align: left;
	min-width: 80px;
	padding-left: .75em;
}

input[type=button],
input[type=submit] {
	text-transform: uppercase;
	font-weight: bold;
	background: none;
	color: #FFF;
	border: 2px solid #FFF;
	cursor: pointer;
	transition: .3s;
    margin-bottom: 1em;
}

input[type=button]:hover,
input[type=submit]:hover {
	background: #FFF;
	color: #0090ff;
	border: 2px solid #FFF;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #8C96A0;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #8C96A0;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #8C96A0;
}
:-moz-placeholder { /* Firefox 18- */
  color: #8C96A0;
}

form {
	padding: 0!important;
	margin: 0 !important;
}

.hopContainer {
	background: rgba(66, 173, 255, 1);
	max-width: 29em;
	width: 100%;
	margin: 0 auto 1em;
	padding: .5em 0;
	border-radius: 5px;
	margin: .5em auto;
	text-align: center;
}

.mobile {
	display: none;
}

.cell {
	display: inline-block;
	max-width: 5em;
	margin: 0 1px;
}

.cell input {
	width: 4em;
	text-align: center;
}

.ibu {
	background: none;
	color: #fff600;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	padding: 0;
	margin: 0 auto;
}

#hop2, #hop3, #hop4, #hop5, #eliminarLupulo {
    display: none;
}

.btn-lupulo {font-size: .7em; display: inline-block; padding: 1em; color:#0090ff; background: #FFF; border-radius: 3em; font-weight: 600; cursor: pointer; margin: .5em}

.label {
	margin-top: .75em;
}

#menu-sales {
	width: 100%;
	top: 100%;
	display: block;
	position: fixed;
	margin-top: -38px;
	text-align: center;
	transition: .3s;
}

.error {
	color: #fff600;
	font-size: .8em;
	padding: 1em;
	display: none;
	width: auto;
}

.result {
	font-size: 1.5em;
	color: #fff600;
	font-weight: bold;
	border: none;
	background: none;
	padding: 0 !important;
	text-align: center;
	display: block;
	width: 100%;
	margin: 0 0 1em 0;
}


/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

@media only screen and (max-device-width: 600px),
only screen and (max-width: 600px) {
	.desktop {
		display: none;
	}
	.mobile {
		display: block;
	}
	.cell {
		margin-bottom: .5em;
		text-align: center;
		max-width: none;
	}
	.cell input {
		text-align: center;
		width: auto;
	}
	.ibu {
		text-align: left;
		margin: 0;
		width: 2.2em !important;
	}
	.extra-margin {
		margin-bottom: .5em;
	}
}

@media only screen and (max-device-width: 440px),
only screen and (max-width: 440px) {
	#more {
		display: inline-block;
	}
	nav .item {
		margin: .45em 1em;
	}
	.item {
		font-size: .95em;
		margin: .5em
	}
}

@media only screen and (max-device-width: 360px),
only screen and (max-width: 360px) {
	.item {
		font-size: .9em;
	}
}

@media only screen and (max-device-width: 359px),
only screen and (max-width: 359px) {
	nav .item {
		margin: 0 .5em;
	}
}

@media only screen and (max-device-width: 331px),
only screen and (max-width: 331px) {
	.item {
		font-size: .8em;
	}
}

@media only screen and (max-device-width: 320px),
only screen and (max-width: 320px) {
	nav .item {
		margin: .5625em .5em;
	}
}

@media only screen and (max-device-width: 273px),
only screen and (max-width: 273px) {
	nav .home {
		display: none !important;
	}
}