html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
body {
	font-family: sans-serif;
	box-sizing: border-box;
}
main {
	overflow: hidden;
	width: 100%;
	height: auto;
	margin: auto;
	padding: 2vw 0 2vw 0;

	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;

	background-color: #DCF2FD;
	background-repeat: no-repeat;
	background-image: url("./_images/bkg-top.svg"), url("./_images/bkg-bottom.svg");
	background-position: center top, center bottom;
	background-size: 100% auto, 100% auto;
}
iframe.footer-mobile {
	display: none;
}
main section, footer {
	max-width: 50vw;
	margin: auto;
}
main .topbar {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 2vw;
	flex-shrink: 0;
	margin-top: 1vw;
}
main .topbar > div {
	display: flex;
	flex-direction: column;
}
main .topbar > div .h1,
main .topbar > div .h2 {
	color: #FFF;
}
main .topbar > div .h1 {
	font-size: 2vw;
	font-weight: bold;
}
main .topbar > div .h2 {
	font-size: 1vw;
}
main .topbar > img {
	width: 15vw;
}

main .topbar > div.cart {
	width: 20vw;

	height: 8vw;
}
main .topbar > div.cart a {
	text-decoration: none;
}
main .topbar > div.cart > div.onlymobile {
	display: none;
	text-align: center;
}
main .topbar > div.cart > div.onlydesktop {
	display: flex;
	flex-direction: column;
}
main .topbar > div.cart h4,
main .topbar > div.cart h5 {
	margin: 0;
}
main .topbar > div.cart > div.onlydesktop img.cart-icon {
	width: 4vw;
	height: 4vw;
}
main .topbar > div.cart > div.onlymobile img.cart-icon {
	width: 13vw;
	height: 13vw;
}
main .topbar > div.cart > div.onlymobile div.quantity {
	background-color: #F00;
	border-radius: 50%;
	width: 6vw;
	height: 6vw;
	line-height: 6vw;
	color: #FFF;
	font-weight: bold;
	font-size: 4vw;
	position: relative;
	left: CALC(50% - 7vw);
	top: -15vw;
}
main .topbar > div.cart > div.onlydesktop div.content {
	display: flex;
	color: #FFF;
}
main .topbar > div.cart > div.onlydesktop div.content div.summary {
	padding: 1vw;
}
main .topbar > div.cart > div.onlydesktop div.content div.summary h4,
main .topbar > div.cart > div.onlydesktop div.content div.summary h5 {
	display: inline;
}
main .topbar > div.cart > div.onlydesktop div.buttons {
	display: flex;
	gap: 1vw;
	justify-content: center;
	margin-bottom: .3vw
}
main .topbar > div.cart > div.onlydesktop div.buttons > button {
	width: 50%;

	background-color: #FFF;
	color: #26ABE2;
	font-size: 1vw;
	border: 2px solid #268de2;
	border-radius: 5vw;
	cursor: pointer;
	text-transform: lowercase;
	font-weight: bold;
	box-sizing: border-box;
	padding: 0.5vw;
}

main section.cart {
	font-size: 1.5vw;
	line-height: 1.8vw;
	padding-bottom: 10vw;
	padding-top: 10vw;
	width: 100%;
	color: #333;
	text-align: center;
}

main section.cart article {
	width: 100%;
	border: 2px solid #268de2;
	padding: 1vw;
	margin-bottom: 1vw;
	text-align: left;
	box-sizing: border-box;
	border-radius: 1vw;
}
main section.cart article h3 {
	margin: 0;
	margin-bottom: 1vw;
}
main section.cart button.order {
	margin: 1vw auto;
	padding: 2vw 4vw;
	font-size: 1.5vw;
	color: #268de2;
	border: 1px solid #52afe6;
	border-radius: 32px;
	background-color: #fff;
	cursor: pointer;
	text-transform: uppercase;
	font-weight: bold;
}

main section.cart article div.quantity-ctrl {
	display: inline-flex;
	width: 14vw;
	overflow: hidden;

	border: 1px solid #52afe6;
	border-radius: 32px;
	background-color: #fff;
	flex-wrap: nowrap;
}
main section.cart article > strong {
	width: 12vw;
	display: inline-block
}
main section.cart article div.quantity-ctrl button.update-quantity {
	width: 4vw;
	border: none;
	font-size: 2.5vw;
	color: #268de2;
	background: transparent;
}
main section.cart article div.quantity-ctrl h4.quantity {
	width: 6vw;
	text-align: center;
	margin: 0;
	padding: 1vw;
}
main section.cart article button.remove {
	float: right;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: transparent;
	border: none;
	font-size: 1vw;
	font-weight: bold;
	color: #268de2;
	cursor: pointer;
	padding-bottom: 1vw;
}
main section.cart article button.remove > img {
	width: 5vw;
	height: 5vw;
	margin-bottom: 0.5vw;
}

form.order {
	text-align: left;
	display: none;
}
form.order > span {
	display: block;
	font-size: 16px;
	color: rgb(0, 75, 150);
}
form.order input,
form.order textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
	color: #444;
	outline: none;
	margin-top: 5px;
	margin-bottom: 10px;
	color: #25abe2;
	border: 1px solid #25abe2;
	border-radius: 48px;
	font-family: sans-serif;
}
form.order textarea {
	height: 12vw;
	border-radius: 24px;
}
form.order input.city {
	width: CALC(100% - 100px);
}
form.order input.post_code {
	width: 80px;
	margin-right: 20px;
}
form.order input.quantity {
	width: 80px;
	margin-right: 20px;
}
form.order input[type="radio"], form.order input[type="checkbox"] {
	width: auto !important;
	transform: scale(2);
	margin-right: 10px;
}

form input.error {
	background-color: #ffc6c6;
}

div.message {
	padding: 1vw;
	line-height: 3vw;
}
div.message.success {
	color: #32cf1d;
	border-color: #32cf1d;
	text-decoration: underline;
}
div.message.error {
	color: #cf321d;
	border-color: #cf321d;
}

main section.static {
	font-size: 1.5vw;
	line-height: 1.8vw;
	padding-bottom: 10vw;
	padding-top: 10vw;
	max-width: 75vw;
	color: #333;
}
main section.static .clear {
	clear: both;
}
main section.static ul {
	margin-left: 13vw;
	list-style-type: none;
}
main section.static ul li {
	text-indent: -1vw;
}
main section.static ul li:before {
	content: "– ";
	text-indent: -1vw;
}
main section.static h1 {
	margin-top: 1vw;
	margin-bottom: 1vw;
	font-size: 2.5vw;
	line-height: 2.5vw;
}
main section.static a {
	color: #268de2;
	font-weight: bold;
}
main section.static img {
	height: 15vw;
	background-color: #FFF;
	border: 0.3vw solid #268de2;
	padding: 1vw;
}
main section.static img.fr {
	float: right;
	margin-left: 1vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
}
main section.static img.fl {
	float: left;
	margin-right: 1vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
}
main section.articles {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: stretch;
	align-content: flex-start;
	justify-content: flex-start;
	width: 100%;
}
main section.topbar button.go-back {
	display: block;
	align-self: flex-start;
	background-color: #FFF;
	background-image: url('_images/menu.svg');
	background-repeat: no-repeat;
	background-position: 0.4vw center;
	background-size: auto 70%;
	color: #26ABE2;
	font-size: 1vw;
	border: 2px solid #268de2;
	border-radius: 5vw;
	cursor: pointer;
	text-transform: lowercase;
	font-weight: bold;
	box-sizing: border-box;
	margin: 0.4vw;
	margin-top: 1vw;
	padding: .5vw .5vw .5vw 2.4vw ;
}

main section.topbar select.sort-by {
	display: block;
	align-self: flex-start;
	background-color: #FFF;
	background-image: url('_images/dropdown.svg');
	background-repeat: no-repeat;
	background-position: 0.3vw center;
	background-size: auto 80%;
	color: #26ABE2;
	font-size: 1vw;
	border: 2px solid #268de2;
	border-radius: 5vw;
	cursor: pointer;
	font-weight: bold;
	box-sizing: border-box;
	margin: 0.4vw;
	padding: .5vw .5vw .5vw 2.4vw ;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 1px;
	text-overflow: '';
}
main section.articles article {
	border: 0.3vw solid #FFF;
	margin: .5vw;
	box-sizing: border-box;
	background-color: #FFF;
	position: relative;
}
main section.articles article.info-box {
	border: none !important;
	margin: .5vw;
	box-sizing: border-box;
	background-color: transparent !important;
	width: 100% !important;
}
main section.articles article.single {
	min-height: 10vw;
	align-content: center;
	justify-content: center;
}
main section.articles article.single h2 {
	display: flex;
	justify-content: center;
	align-items: center;
}
main section.articles article.single.full {
	min-height: 18.9vw;
}
main section.articles article a {
	text-decoration: none;
	background-color: #FFF;
	color: #FFF;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
main section.articles article.info-box a {
	background-color: transparent !important;
	/* margin-bottom: 7vw; */
}
main section.articles article img {
	border: 1px solid #26ABE2;
	box-sizing: border-box;
	width: 100%;
}
main section.articles article .auto-price {
	position: absolute;

	background: #8fc400;
	background: -moz-linear-gradient(top,  #8fc400 0%, #8fc400 100%);
	background: -webkit-linear-gradient(top,  #8fc400 0%,#8fc400 100%);
	background: linear-gradient(to bottom,  #8fc400 0%,#8fc400 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 );

	padding: 0.7vw 2vw;
	transform: rotate(-25deg);
	font-size: 2vw;
	font-weight: bold;
	box-shadow: 4px 4px 8px #555;
	/* chrome hax */
	-webkit-backface-visibility: hidden;
	outline: 1px solid transparent;
}
main section.articles article h1,
main section.articles article h2 {
	display: block;
	margin: 0;
	padding: .5vw;
	font-size: 1.2vw;
	text-align: center;
	text-transform: uppercase;
	background-image: url("./_images/article-bkg.svg");
	background-size: 102%;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}
main section.articles article h2 {
	font-size: 1vw;
	text-transform: none;
	font-weight: normal;
}
main section.articles article:hover {
	-webkit-backface-visibility: hidden;
	transform: rotate(-5deg) scale(1.2);
	box-shadow: 0px 0px 10px #333;
	position: static;
	z-index: 99999;
}
main section.articles article.info-box:hover {
	transform: none !important;
	box-shadow: none !important;
}
main section.articles article.info-box a {
	display: inline-block !important;
	color: #333 !important;
	font-size: 1.4vw;
}
footer {
	margin-top: 4vw;
	width: 100%;
	max-width: 85vw;
	flex-shrink: 0;
}
footer > img {
	width: 10vw;
}

footer.full {
	display: flex;
}
footer.full section.map {
	max-width: 100% !important;
	width: 30vw;
	height: 16vw;
}
footer.full section.map iframe {
	width: 100%;
	height: 100%;
	border: none;
}
footer.full section.contact-data {
	max-width: 100% !important;
	display: flex;
	flex-flow: wrap;
	flex-direction: column;
	width: 50vw;
	height: 13vw;
	box-sizing: border-box;
}
footer.full section.contact-data a {
	color: #FFF;
	text-decoration: none;
	display: flex;
	width: 25vw;
	min-height: 4vw;
	flex: 0 1;
	box-sizing: border-box;
}
footer.full section.contact-data a.separator {
	display: none;
}
footer.full section.contact-data a.separator-desktop {
	display: flex;
}
footer.full section.contact-data a img.icon {
	width: 3vw;
	height: 3vw;
	margin-right: 0.7vw;
}
footer.full section.contact-data a span {
	display: block;
	flex-direction: column;
	border-left: 0.3vw solid #6ECDDE;
	overflow: visible;
	height: 3vw;
	padding-left: 0.7vw;
	font-size: 0.9vw;
}
footer.full section.contact-data a.address {
	min-height: 4.8vw;
}
footer.full section.contact-data a.address span {
	height: 4vw;
}
footer.full section.contact-data a span b {
	display: block;
	font-weight: normal;
	font-size: 1.3vw;
}
footer.full section.contact-data a span img {
	display: block;
	margin-top: 0.1vw;
	height: 0.3vw;
}

@media (orientation: landscape) {
	main section.articles article {
		width: CALC((100% / 3) - 1vw);
	}
}

@media (orientation: portrait) {
	main section, footer {
		max-width: 80vw;
	}
	main .topbar > img {
		width: 25vw;
	}
	footer > img {
		width: 22vw;
	}
	main {
		background-size: 100% auto, 180% auto;
		background-position: center top, left bottom;
	}
	main section.articles article {
		width: CALC((100% / 2) - 2vw);
		margin: 1vw;
	}
	.topbar .h1 {
		font-size: 4vw !important;
	}
	.topbar .h2 {
		font-size: 3vw !important;
	}
	article h1 {
		font-size: 3vw !important;
		padding: 1.5vw !important;
	}
	article h2 {
		font-size: 2.5vw !important;
		padding: 1.5vw !important;
	}
	main section.topbar button.go-back {
		font-size: 2vw !important;
		padding: 1vw 1vw 1vw 3.9vw ;
	}
	main section.topbar select.sort-by {
		font-size: 2vw !important;
		padding: 1vw 1vw 1vw 3.9vw ;
	}

	footer.full {
		max-width: 100%;
		padding: 0;
	}
	footer.full section.contact-data {
		padding-left: 2vw;
		height: auto;
		width: 75vw;
	}
	footer.full section.map {
		margin-bottom: -2vw;
		height: 0px;
	}
	footer.full section.map iframe {
		display: none;
	}
	body.with-full-footer main {
		background-size: 100% auto, 240% auto !important;
		background-position: center top, -16vw bottom;
	}
	footer.full section.contact-data a.separator {
		display: none;
	}
	footer.full section.contact-data a.separator-desktop {
		display: none;
	}
	footer.full section.contact-data a {
		min-height: 8vw;
		width: 100%;
	}
	footer.full section.contact-data a.address {
		min-height: 10.5vw;
	}
	footer.full section.contact-data a img.icon {
		width: 7vw;
		height: 7vw;
		margin-right: 0.7vw;
	}
	footer.full section.contact-data a span {
		font-size: 2.5vw;
		line-height: 2.7vw;
		border-left: 0.4vw solid #6ECDDE;
		height: 7vw;
	}
	footer.full section.contact-data a.address span {
		height: 9.5vw;
	}
	footer.full section.contact-data a span b {
		font-size: 3.7vw;
		line-height: 3.7vw;
	}
	iframe.footer-mobile {
		display: block;
		margin-bottom: -2vw;
		border: none;
		width: 100%;
		height: 100vw !important;
	}

	main section.static {
		max-width: 90vw;
	}
	main section.static > img {
		height: 25vw;
	}
	main section.static {
		font-size: 2vw;
		line-height: 2.5vw;
	}
	main section.static h1 {
		font-size: 3vw;
		line-height: 3vw;
	}
	main section.static ul {
		margin-left: 20vw;
	}

	main section.articles article.info-box a {
		font-size: 3vw;
	}

	main section.cart article button.remove {
		font-size: 1.5vw;
	}

	main section.cart {
		font-size: 2vw !important;
	}

	main section.cart article div.quantity-ctrl {
		display: flex;
		margin-top: 1vw;
		width: 20vw;
		border-radius: 32px;
	}
	main section.cart article > strong {
		width: 12vw;
	}
	main section.cart article div.quantity-ctrl button.update-quantity {
		width: 6vw;
		font-size: 2.5vw;
	}
	main section.cart article div.quantity-ctrl h4.quantity {
		width: 8vw;
	}
	main section.cart button.order {
		font-size: 2vw;
	}
	main section.cart {
		max-width: 90vw;
	}

	main .topbar > div.cart > div.onlymobile {
		display: block;
	}
	main .topbar > div.cart > div.onlydesktop {
		display: none;
	}

	main section.articles article .auto-price {
		font-size: 4vw;
	}
}

@media (orientation: landscape) and (max-width: 1300px) {
	main section, footer {
		max-width: 65vw;
	}
	footer.full {
		max-width: 85vw;
	}
	article h1 {
		font-size: 1.5vw !important;
	}
	article h2 {
		font-size: 1.5vw !important;
	}
}
@media (orientation: landscape) and (max-width: 1150px) {
	.topbar .h1 {
		font-size: 2.5vw !important;
	}
	.topbar .h2 {
		font-size: 1.5vw !important;
	}
	article h1 {
		font-size: 1.7vw !important;
	}
	article h2 {
		font-size: 1.7vw !important;
	}
	main section.topbar button.go-back {
		font-size: 1.3vw !important;
	}
	main section.topbar select.sort-by {
		font-size: 1.3vw !important;
	}

	main .topbar > div.cart > div.onlydesktop div.buttons > button {
		font-size: 1.2vw;
	}
}
@media (orientation: landscape) and (max-width: 1000px) {
	main section, footer {
		max-width: 85vw;
	}
	
	main section.topbar button.go-back {
		font-size: 1.5vw !important;
	}
	
	main section.topbar select.sort-by {
		font-size: 1.5vw !important;
	}
	
	footer > img {
		width: 14vw;
	}
	main {
		background-size: 100% auto, 130% auto;
		background-position: center top, -10vw bottom;
	}

	footer.full {
		flex-direction: column;
	}
	footer.full section {
		justify-content: flex-start;
		align-content: flex-start;
		width: 100% !important;
	}
	footer.full section.contact-data {
		height: 20vw;
	}
	footer.full section.contact-data a.separator {
		display: flex;
	}
	footer.full section.contact-data a.separator-desktop {
		display: none;
	}
	footer.full section.map {
		margin-top: 1vw;
	}
	footer.full section.contact-data a {
		min-height: 6vw;
		width: 35vw;
	}
	footer.full section.contact-data a.address {
		min-height: 7vw;
	}
	footer.full section.contact-data a img.icon {
		width: 5vw;
		height: 5vw;
		margin-right: 0.7vw;
	}
	footer.full section.map {
		height: 27vw;
	}
	footer.full section.contact-data a span {
		font-size: 1.5vw;
		line-height: 1.5vw;
		border-left: 0.4vw solid #6ECDDE;
		height: 5vw;
	}
	footer.full section.contact-data a.address span {
		height: 6.4vw;
	}
	footer.full section.contact-data a span b {
		font-size: 2.2vw;
		line-height: 3vw;
	}
	body.with-full-footer main {
		background-size: 100% auto, 200% auto;
		background-position: center top, -16vw bottom;
	}

	main section.static > img {
		height: 25vw;
	}
	main section.static {
		font-size: 2vw;
		line-height: 2.5vw;
	}
	main section.static h1 {
		font-size: 3vw;
		line-height: 3vw;
	}
	main section.static ul {
		margin-left: 20vw;
	}
	main section.articles article.info-box a {
		font-size: 3vw;
	}

	main section.cart article button.remove {
		font-size: 1.6vw;
	}
	main section.cart button.order {
		font-size: 2vw;
	}
	main section.cart {
		max-width: 90vw;
	}
}
@media (orientation: portrait) and (max-width: 800px) {
	main section.cart article button.remove {
		font-size: 2.6vw;
	}
	main section.cart {
		font-size: 3vw !important;
	}
	main section.cart article {
		margin-bottom: 2vw;
	}
	main section.cart article h3 {
		margin-bottom: 2vw;
		line-height: 3vw;
	}

	main section.cart article div.quantity-ctrl {
		display: flex;
		margin-top: 2vw;
		width: 30vw;
		border-radius: 32px;
	}
	main section.cart article > strong {
		width: 20vw;
	}
	main section.cart article div.quantity-ctrl button.update-quantity {
		width: 6vw;
		font-size: 4vw;
	}
	main section.cart article div.quantity-ctrl h4.quantity {
		width: 18vw;
		line-height: 4vw;
	}
	main section.cart button.order {
		font-size: 2vw;
	}
	main section.cart article button.remove > img {
		width: 8vw;
		height: 8vw;
	}

	main section.cart button.order {
		font-size: 3vw;
	}
}

@media (max-width: 480px) {
	main section, footer {
		max-width: 95vw;
	}
	footer {
		padding: 0 8vw;
	}

	.topbar .h1 {
		font-size: 5vw !important;
	}
	.topbar .h2 {
		font-size: 3.5vw !important;
	}

	article h1 {
		font-size: 3.3vw !important;
	}
	article h2 {
		font-size: 3.3vw !important;
	}

	main section.topbar button.go-back {
		font-size: 3.3vw !important;
		padding: 1vw 2vw 1vw 5vw ;
	}
	
	main section.topbar select.sort-by {
		font-size: 3.3vw !important;
		padding: 1vw 2vw 1vw 5vw ;
	}

	main .topbar > img {
		width: 35vw;
	}

	footer.full {
		max-width: 100%;
		padding: 0;
	}
	footer.full section.contact-data {
		padding-left: 2vw;
		height: auto;
	}
	footer.full section.map {
		margin-bottom: -2vw;
		height: 0px;
	}
	footer.full section.map iframe {
		display: none;
	}
	body.with-full-footer main {
		background-size: 100% auto, 220% auto;
		background-position: center top, -16vw bottom;
	}
	footer.full section.contact-data a.separator {
		display: none;
	}
	footer.full section.contact-data a.separator-desktop {
		display: none;
	}
	footer.full section.contact-data a.address {
		min-height: 10.5vw !important;
		width: 100%;
	}
	footer.full section.contact-data a {
		min-height: 8vw !important;
		width: 100%;
	}
	footer.full section.contact-data a img.icon {
		width: 7vw;
		height: 7vw;
		margin-right: 0.7vw;
	}
	footer.full section.contact-data a span {
		font-size: 2.5vw;
		line-height: 2.7vw;
		border-left: 0.4vw solid #6ECDDE;
		height: 7vw;
	}
	footer.full section.contact-data a.address span {
		height: 9.4vw;
	}
	footer.full section.contact-data a span b {
		font-size: 3.7vw;
		line-height: 3.7vw;
	}
	iframe.footer-mobile {
		display: block;
		margin-bottom: -2vw;
		border: none;
		width: 100%;
		height: 50vw;
	}

	main section.static > img {
		height: 30vw;
	}
	main section.static {
		font-size: 3vw;
		line-height: 3.5vw;
	}
	main section.static h1 {
		font-size: 4vw;
		line-height: 4vw;
	}
	main section.static ul {
		margin-left: 20vw;
	}
	main section.static {
		max-width: 90vw;
	}

	main .topbar > div.cart > div.onlymobile {
		display: block;
	}
	main .topbar > div.cart > div.onlydesktop {
		display: none;
	}
}