/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/* Styles for the Kuhuviia web app | Design & Code by Tanel Kärp */

/* Colors
	Icon & logo Green: #00FF00;
	Blue: #00AEEF;
	Black: #403F4C;
	Red: #E84855;
	Green: #558B6E;
	Gray: #5A7D7C;
	Form field Gray: #F3F3F4;

   Scale
   	.354em
   	.5em
   	.707em
   	1em
   	1.414em
   	1.999em
   	2.827em
   	3.998em
   	5.653em

*/

/* Some General Rules */

.icon {
	width: 1.414em;
    height: 1.414em;
    fill: #403F4C;
}
.button-icon {
	fill: #fff;
	vertical-align: top;
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
	font-family: 'Noto Sans', sans-serif;
	color: #403F4C;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.45;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
	background: #ddd;
}

h1, h2, h3, h4 {
  margin: 1.414em 0 0.5em;
  font-weight: inherit;
  line-height: 1.2;
}

h1 {
	position: fixed;
	top: 0;
	left: 1.999rem;
	margin: 0;
	z-index: 99;
	transition: transform .4s cubic-bezier(0.770, 0.000, 0.000, 1.150);
	transform: translateY(-100%);
	z-index: 3;
}
.options-canvas-open h1 {
	transform: translateY(0);
}

	h1 a {
		color: #fff;
		transition: all .3s;
	}
	h1 a:hover {
		color: #fff;
		padding-top: .3em;
	}

	h1:hover .logo {
		padding-top: .8em;
	}

		.logo {
			display: block;
			background: #00ff00;
			font-size: 1.05em;
			padding: .5em .25em .05em;
			transition: font-size .3s, padding .2s;
		}
		.logo svg {
			fill: #fff;
		}

		.logotext {
			display: block;
			background: #00ff00;
			margin-top: 1px;
			font-size: .35em;
			text-align: center;
			padding: .4em;
			transition: display .3s;
		}

h2 {font-size: 2.827em;}

h3 {
	font-size: 1.999em;
	margin: 0;
	text-transform: capitalize;
	width: 90%;
}

	/*h3:first-letter { text-transform: uppercase; }*/

h4, .number {
	font-size: 1.414em;
	letter-spacing: -.02em;
	text-transform: capitalize;
}

.overlay h3, .overlay h4 {
	text-transform: inherit;
}

h5 {
	margin: 1em 0 .5em;
}

	.moreinfo h5:first-child {
		margin-top: 0;
	}

	.tabcontent h4:first-child {
		margin-top: 0;
	}

small, .small, .wasteoption, .smallbutton, .commenttext, .supportedby, .ui-menu-item, .listinfo p, .character, .updatedate, .wastecats, h5, .overlay-tabs > li { font-size: 0.707em; }

a, .link {
	color: #00aeef;
	text-decoration: none;
	cursor: pointer;
	transition: color .2s;
}

a:hover, .link:hover {
	color: #0078a6;
}

p { margin-bottom: 1.3em; }

ul {
	padding: 0 0 0 20px;
}

.gray {
	color: #5A7D7C;
}

.centertext {
	text-align: center;
}

.beta-notification {
	position: fixed;
	z-index: 2;
	left: 0;
	top: 0;
	right: 0;
	font-size: .5em;
	line-height: 1.2em;
	background: #E84855;
	color: #fff;
	text-align: center;
	pointer-events: none;
}

.map-canvas-container {
	position: fixed;
	height: 100%;
	width: 100%;
}

	.map-canvas {
		height: 100%; 
		width: 100%; 
		position: absolute; 
		top: 0; 
		left: 0; 
		z-index: 0;
		transition: width .3s;
	}

	/*.print-canvas {
		height: 100%; 
		width: 100%; 
	}*/

.interaction-canvas {
	position: relative;
	z-index: 1;
}

	.interaction-form, .interaction-form div, .interaction-form form {
		transition: all .3s;    
	}

	.interaction-form {
		position: fixed;
		transform-style: preserve-3d;
		text-align: center;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}
	.verse .interaction-form {
		height: 10%;
	}
	.intro.search-focused .interaction-form {
		pointer-events: auto;
		background: rgba( 255, 255, 255, .9 );
	}

		.interaction-form > * {
			pointer-events: auto;
		}

		.search-form {
			position: relative;
			top: 3em;
			width: 94%;
			left: 3%;
		}

		/*.intro.search-focused .search-form {
			transform: translateY( -2em );
		}*/

		.verse.search-focused .search-form {
			box-sizing: border-box;
			left: 1%;
			background: #fff;
			padding: 1.1em 1em 1.8em;
			width: 98%;
			text-align: left;
			max-height: 70vh;
			border-radius: 1.999em;
			box-shadow: 0 0 1.5em 0 rgba( 64, 63, 76, .1);
			z-index: 1;
		}

			.search-form > div {
				position: relative;
			}

				.intro .search-form .textinput, .verse .search-form .textinput {
					box-shadow: 0 0 1.99em 0 rgba( 64, 63, 76, .1);
					border-radius: 2em;
				}

				.verse.search-focused .search-form .textinput {
					box-shadow: none;
					background-color: #F3F3F4;
					border-radius: 2em;
				}


			.intro .filters, .intro .togglefilters, .intro .togglereset, .intro .toggleresetaddress, .intro .inputcontaineraddress {
				display: none;
			}


			.inputcontainersubmit {
				opacity: 0;
				pointer-events: none;
				transform: translateY(-2.827em);
			}

			.inputcontainerobject {
				z-index: 3;
			}

			.intro.search-focused .inputcontainerobject {
				transform: translateY(-2em);
			}

				.inputcontainerobject .auto-open {
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;
				}


			.verse.search-focused .inputcontaineraddress {
				position: relative;
				opacity: 1;
				pointer-events: all;
			}

			.inputcontainersubmit {
				z-index: 2;
			}

			.intro.search-focused .inputcontainersubmit.seen {
				opacity: 1;
				transform: translateY(-1.414em);
				pointer-events: all;
			}

			.verse.search-focused .inputcontainersubmit {
				opacity: 1;
				transform: translateY(20%);
				pointer-events: all;
			}

				.verse .togglefilters {
					position: absolute;
					top: .5em;
					right: 2%;
					padding: .5em .7em .6em .8em;
					line-height: 1;
					z-index: 2;
					cursor: pointer;
					white-space: nowrap;
				}

					.verse.search-focused .togglefilters {
						display: none;
					}

					.selected-filters {
						display: inline-block;
						font-size: .707em;
						background: #F3F3F4;
						color: #5A7D7C;
						padding: .5em .707em;
						border-radius: .5em;
						max-width: 5em;
						margin-right: .707em;
						overflow: hidden;
					}
					.selected-filters:empty {
						display: none;
					}

					.verse .togglefilters.locationactive svg {
						fill: #E84855;
					}

				.verse .togglereset {
					position: absolute;
					top: .46em;
					right: 3.3em;
					padding: .6em 0 0;
					line-height: 1;
					cursor: pointer;
				}

				.verse .toggleresetaddress {
					position: absolute;
					top: .5em;
					right: 1em;
					padding: .6em 0 0;
					line-height: 1;
					cursor: pointer;
				}
					.togglereset svg, .toggleresetaddress svg {
						fill: #BEBBBB;
						transition: color .3s;
					}
					.togglereset:hover svg, .toggleresetaddress:hover svg {
						fill: #403F4C;
					}

		.verse .filters {
			overflow: hidden;
			max-height: 0;
			transition: all .3s;
		}
		.verse.search-focused .filters {
			max-height: 20em;
			padding-top: .414em;
		}

		.goal-select, .condition-select {
			padding: 1em 0 0;
			overflow: hidden;
			transition: all .3s;
		}

			.condition-select {
				max-height: 0;
				padding: 0;
			}
			.condition-select.show {
				max-height: 5em;
				padding: .707em 0;
			}

			.filters input[type=radio] {
			    display: none;
			}

			.filters label {
				display: inline-block;
				width: 49%;
				padding: .707em 0;
				cursor: pointer;
				position: relative;
				text-align: center;
				line-height: 1.2em;
				border-radius: 1.414em;
			}

				.filters input[type=radio]:checked + label {
				    background-color: #00aeef;
				    color: #fff;
				}


	.search-dialogue {
		height: 100%;
		z-index: 1;
	}

		.inputcontainercondition, .inputcontainergoal {
			position: relative;
			opacity: 0;
			pointer-events: none;
			max-height: 0;
			overflow: hidden;
			transition: all .3s;
			transform: translateY(100%);
		}

			.inputcontainercondition .dialogue-question, .inputcontainergoal .dialogue-question {
				font-size: 1.414em;
				display: block;
				width: 60%;
				margin: 2em auto 3em;
				line-height: 1.5;
				text-transform: none;
			}

		.inputcontainercondition.seen, .inputcontainergoal.seen {
			opacity: 1;
			pointer-events: all;
			max-height: 100vh;
			transform: translateY(0);
		}
			.inputcontainercondition span {
				margin: 3%;
				text-transform: capitalize;
				width: 94%;
			}	

		.inputcontainergoal ul {
			list-style: none;
			margin: 0;
			padding: 3%;
		}

			.inputcontainergoal li {
				position: relative;
				padding: 1.5em 1.414em 1.414em 5.653em;
				background-color: #fff;
				margin-bottom: .707em;
    			text-align: left;
				border-radius: 1.414em;
				box-shadow: 0 0 1.99em 0 rgba( 64, 63, 76, .1);
				cursor: pointer;
				transform: translateY(100%);
				opacity: 0;
				transition: all .4s cubic-bezier(0.770, 0.000, 0.000, 1.350);
			}
			.inputcontainergoal li:after {
				content: "";
				position: absolute;
				top: 1.414em;
				left: 1.414em;
				height: 2.827em;
				width: 2.827em;
				border-radius: 1em;
				transition: background .3s;
			}

			.inputcontainergoal.seen li {
				opacity: 1;
				transform: translateY(0);
			}

			.inputcontainergoal.seen li:nth-child(1) {
				transition-delay: .35s;
			}
			.inputcontainergoal.seen li:nth-child(2) {
				transition-delay: .4s;
			}
			.inputcontainergoal.seen li:nth-child(3) {
				transition-delay: .45s;
			}

				.trash-color:after {
					background: #00AEEF;
				}
				.repair-color:after {
					background: #558B6E;
				}
				.manual-color:after {
					background: #F3F3F4;
				}

				.trash-color:hover:after {
					background: #0078a6;
				}
				.repair-color:hover:after {
					background: #46725A;
				}
				.manual-color:hover:after {
					background: #DFDFE2;
				}			


.toggle-options-canvas {
	position: fixed;
	top: 0;
	padding: .85em 2em 1em calc( 3% + 1.4em );
	transition: background .3s;
}

.search-focused .toggle-options-canvas {
	display: none;
}

.options-canvas-open .toggle-options-canvas {
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	z-index: 2;
	background: rgba(0,0,0,0.3);
}
.toggle-options-canvas .icon-close {
	position: absolute;
	top: 2em;
	left: 92.5%;
	fill: #fff;
	transform: translateX(-100vw);
	transition: transform .3s;
	transition-delay: .05s;
	visibility: hidden;
	pointer-events: none;
}

	.options-canvas-open .toggle-options-canvas .icon-menu {
		display: none;
	}
	.options-canvas-open .toggle-options-canvas .icon-close {
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%);
	}



.top-searches, .verse .top-searches.seen {
	position: absolute;
	list-style: none;
	color: #403F4C;
	text-align: left;
	margin: 0;
	padding: 0 2em;
	opacity: 0;
	pointer-events: none;
	transition: all .4s cubic-bezier(0.770, 0.000, 0.000, 1.350);
}
.intro .top-searches.seen {
	opacity: 1;
	pointer-events: auto;
}

	.top-searches li {
		transition: all .4s cubic-bezier(0.770, 0.000, 0.000, 1.350);
	}

		.top-searches-title {
			pointer-events: none;
			margin-bottom: -1em;
		}

	.intro .top-searches li {
		opacity: 1;
		transform: translateY( -2.827em );
	}	

	.intro.search-focused .top-searches li {
		opacity: 1;
		transform: translateY( 5em );
	}	

	.intro.search-focused .top-searches li:nth-child(6) {
		transition-delay: .05s;
	}
	.intro.search-focused .top-searches li:nth-child(5) {
		transition-delay: .1s;
	}
	.intro.search-focused .top-searches li:nth-child(4) {
		transition-delay: .15s;
	}
	.intro.search-focused .top-searches li:nth-child(3) {
		transition-delay: .2s;
	}
	.intro.search-focused .top-searches li:nth-child(2) {
		transition-delay: .25s;
	}
	.intro.search-focused .top-searches li:nth-child(1) {
		transition-delay: .3s;
	}


.messages {
	position: relative;
	padding: 1em 1em 2em;
	background: #fff;
}

	.messages p, .wasteoptions {
		margin: .5em 0;
	}

	.messages .button {
		padding: 1em;
		margin-top: 1em;
		display: inline-block;
		width: auto;
	}

	.wasteoption {
		display: inline-block;
		border-radius: 1em;
		margin: .1em;
		padding: .2em .8em;
		background: #fafafa;
		cursor: pointer;
		letter-spacing: .01em;
		transition: color .2s, background .2s;
	}

	.wasteoption:hover {
		background: #00AEEF;
		color: #fff;
	}

	.residual-items, .return-store {
		margin: 0 auto;
		text-align: center;
		width: 80%;
		padding: 2em 0 3em;
	}

		.residual-items p::first-letter, .capitalise::first-letter {
			text-transform: uppercase;
		}

			.residual-items .icon, .return-store .icon {
				height: 8em;
				width: 8em;
			}

.opinions {
	margin: 2em 1em;
}

	.scores {
		margin: 0 .5em;
	}

		.score {
			position: relative;
			display: inline-block;
			width: calc( 33.3% - 1em );
			margin: 0 .5em;
			background: #f4f5f6;
			border-radius: 1.414em;
			cursor: pointer;
			color: #00aeef;
			text-align: center;
			transition: background .3s;
		}
		.score:after {
			content: "";
			display: block;
			padding-bottom: 100%;
		}

		.score:hover {
			background: #DEDFE0;
		}

			.score .number {
				position: absolute;
				width: 100%;
				top: 25%;
			}

			.score .small {
				position: absolute;
				width: 100%;
				bottom: 25%;
			}

/* Forms and fields */

.inputcontainer {
	position: relative;
}

.textinput {
	-moz-appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: #fff;
	padding: 1.1em 5% 1em;
	width: 90%;
	text-indent: 2.4em;
	border-radius: .15em;
	/*border-color: #fff;
	border-bottom: 1px solid transparent;	
	transition: border .3s;*/
}
.textinput:focus {
	/*border-bottom: 1px solid #00aeef;*/
}

.form-icon { 
	position: absolute;
	top: .95em;
	left: 1.3em;
	height: 1.6em;
    width: 1.6em;
	fill: #403F4C;
	pointer-events: none;
}

.button, .smallbutton, .button-secondary {
	border: 0;
	background: #00aeef;
	padding: 1.1em 1em 1em;
	border-radius: 2em;
	transition: background .3s, color .3s;
	color: #fff;
	cursor: pointer;
}

.button {
	width: 100%;
	padding: 1em 0;
}

.button-half {
	width: 50%;
	display: inline-block;
	border-radius: 0;
}


	.button:hover, .smallbutton:hover {
		color: #fff;
		background: #0078a6;
	}

.smallbutton {
	display: inline-block;
}

.button-main {
	display: block;
}

.button-secondary {
	display: inline-block;
	background: transparent;
	color: #00aeef;
	padding: 1em 0;
    text-align: center;
    transition: all .3s;
}
	.button-secondary svg {
		fill: #00aeef;
	}

.button-input {
	display: inline-block;
	width: auto;
	position: absolute;
	right: 0em;
	top: 0em;
	background: #f4f5f6;
	padding: .55em;
	border: .5em solid #fff;
}


.infoheader .button-secondary {
	width: calc( 50% - .1em );
}
.infoheader .button-secondary:first-child {
	margin-right: .2em;
}
.button-secondary:hover {
	background: #f4f5f6;
}

.secondary {
	background: #929191;
}
	.secondary:hover {
		background: #403F4C;
	}

/*.togglesave:before, .togglesave:after {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	content: '';
}
.togglesave:before {
	box-sizing: border-box;
	margin: -3rem;
	border: solid 3rem #f4f5f6;
	width: 6rem;
	height: 6rem;
	transform: scale(0);
}*/
.saved {
	will-change: transform;
	animation: saving .3s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
/*.saved:before, .saved:after {
	animation: inherit;
	animation-timing-function: cubic-bezier(0.21, 0.61, 0.35, 1);
}
.saved:before {
	will-change: transform, border-width, border-color;
	animation-name: bubble;
}*/


@keyframes saving {
	0%, 15% {
		transform: scale(0);
		background: transparent;
	}
	100% {
		background: transparent;
	}
}
/*@keyframes bubble {
	20% {
		transform: scale(1);
		border-color: #f4f5f6;
		border-width: 3rem;
	}
	40%, 100% {
		transform: scale(1);
		border-color: #f4f5f6;
		border-width: 0;
	}
}*/



input::placeholder {
	color: #403F4C;
	opacity: 1;
	transition: color .3s;
}
input:focus::placeholder {
	color: #BEBBBB;
}

/* Internet Explorer 10 */
input::-ms-input-placeholder {
	color: #403F4C;
	transition: color .3s;
}
input::focus:-ms-input-placeholder {
	color: #BEBBBB;
}


/* Markers */

.map-icon-label {
	margin-top: -8px;
	margin-left: -1px;
	font-size: 2em !important;
	text-align: center;
	color: #fff;
}


.map-icon-label .icon-home {
	background: transparent;
	position: absolute;
	top: -.34em;
    left: -.67em;
}


/* Info Canvas */	

.info-canvas {
	position: fixed;
	left: 0;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	background: #fff;
	transform: translateY(110%);
	transition: transform .4s cubic-bezier(0.770, 0.000, 0.000, 1.150);
	box-shadow: 0 0 .99em 0 rgba( 64, 63, 76, .1);
	border-top-left-radius: .707em;
	border-top-right-radius: .707em;
	z-index: 2;
}
.info-canvas.closed {
	transform: translateY( 110% );
	overflow: hidden;
}
.info-canvas.hinted {
	transform: translateY( 80% );
	overflow: hidden;
}
.info-canvas.opened, .embed .info-canvas.hinted {
	transform: translateY( 0 );
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

/*.embed .info-canvas.hinted {
	cursor: pointer;
}
.embed .info-canvas.hinted:hover {
	transform: translateY( 75% );
}*/

	.infobox {
		position: relative;
		height: 100%;
	}
		.infobox .icon {
			display: inline-block;
			vertical-align: top;
			margin-right: .5em;
		}

	.infoheader {
		padding: 1em 1em 0;
		color: #403F4C;
		position: relative;
		overflow: hidden;
	}

		.infoheader h3 {
			margin-bottom: .414rem;
			overflow: hidden;
			margin-left: -.06em;
			letter-spacing: -.02em;
		}

		.infoheader .button {
			display: block;
		    text-align: center;
		    margin: 1.414em 0 .5em;
		    background: #00aeef;
		}

			.infoheader .button svg {
				fill: #fff;
			}

		.closebox, .backbox {
			position: absolute;
			top: 1em;
			padding: .14em;
			right: 1em;
			height: 2em;
			width: 2em;
			cursor: pointer;
			transition: background .2s;
			background: #EDEDEE;
			border-radius: 2em;
		}
		.backbox {
			left: 1em;
			right: auto;
			display: none;
		}
		.closebox:hover, .backbox:hover {
			background: #E84855;
		}
			.closebox .icon-close, .backbox .icon-back {
				height: 1em;
				width: 1em;
				margin: .5em;
				fill: #fff;
			}


		.wastetypeslist {
			width: 100%;
		}

		.wastetypesseemore {
			color: #00AEEF;
			display: inline-block;
			margin-left: .1em;
			cursor: pointer;
			padding: .3em .8em .25em .3em;
			border-radius: 1em;
			transition: all .3s;
		}

			.wastetypesseemore:hover {
				background: #f4f5f6;
			}

		.wastetypesall {
			opacity: 0;
			max-height: 0;
			overflow: hidden;
			transition: all .4s cubic-bezier(0.770, 0.000, 0.000, 1.150);
		}

		.wastetypesall.opened {
			max-height: 22em;
			opacity: 1;
		}

			.wastetypesall ul {
				-webkit-columns: 1em 2; 
				-moz-columns: 1em 2;
				columns: 1em 2;
				list-style: none;
				padding-left: 2.4em;
			}		

				.wastetypesall li {
					padding-bottom: .2em;
				}

				.wastetypesall li::before {
					content: '\2022';
					color: #00FF00;
					font-weight: bold;
					display: inline-block;
					width: 1em;
					margin-left: -1em;
				}	


		.quickaddress {
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: .5em;
		}


		.hinted .infocontent, .opened .quickaddress, .embed .hinted .quickaddress {
			display: none;
		}

		.embed .hinted .infocontent {
			display: block;
		}

	.infocontent {
		/*padding: 1em;*/
	}

		.infocontent h4 {
			margin: 2.83rem 1rem 1rem;
		}	

	.quickinfo {
		padding: 0;
		margin: 1em 0;
		list-style: none;
		border-top: 1px solid #eee;
	}

		.quickinfo li {
			position: relative;
			padding: 1em 3.4em;
			border-bottom: 1px solid #eee;
		}

			.quickinfo .icon {
				position: absolute;
				left: 1em;
				fill: #00ff00;
			}

				.quickinfo .icon-temp-closed {
					fill: #E84855;
					margin-top: -.1em;
				}

			.quickinfo .info-temp {
				color: #E84855;
				font-weight: bold;
			}				

			.placedetail {
				margin-left: 25px;
			}

			.packorg-info {
				text-align: center;
				font-size: 0.707em;
				margin: 1.99em 1em;
			}

				.packorg-info img {
					max-width: 50%;
				}

			.container-empty {
				display: inline-block;
				background: #558B6E;
				color: #fff;
				padding: .3em .7em .25em;
				border-radius: 1em;
				font-size: .707em;
				letter-spacing: .03em;
			}


		.commentform {
			width: calc( 100% - 2em );
			margin: 1em auto;
			position: relative;
		}

			.commentarea {
				box-sizing: border-box;
				width: 100%;
				padding: 1.1em 5em 1em 1em;
				background: #fff;
				border: 1px solid #f4f5f6;
				border-radius: 2em;
				-webkit-appearance: none;
			}

			.commentform .smallbutton {
				position: absolute;
				right: .8em;
				top: .8em;
				padding: 1.15em 0;
				width: 21%;
				text-align: center;
				font-style: normal;
			}

		.comments {
			margin-top: .707em;
			position: relative;
		}

			.comment {
				margin: 1em;
				background: #f4f5f6;
				padding: 1em;
				border-radius: .707em;
				text-align: left;
			}


.updatedate {
	margin: 1rem;
}

.edit {
	display: none;
}


.intro .supportedby {
	position: absolute;
	bottom: 4em;
	width: 80%;
	margin-left: 10%;
	text-align: center;
	z-index: 9;
}

	/*.supportedby img {
		width: 110px;
	}*/

.sortguide {
	margin: 0 auto;
	font-size: 1rem;
	background: white;
	color: red;
	text-align: center;
	max-width: 26em;
	cursor: pointer;
}
	.sortguide img {
		width: 100%;
	}


/* Options Canvas — all the extra functions */

.options-canvas {
	position: fixed;
	box-sizing: border-box;
	width: 85%;
	top: 0;
	left: 0;
	bottom: 0;
	padding: 14vh 1.999em 1.999em;
	background: #fff;
	z-index: 2;
	overflow: hidden;
	transition: all .4s cubic-bezier(0.770, 0.000, 0.000, 1.150);
	transform: translateX(-100%);
}
.options-canvas-open .options-canvas {
	transform: translateX(0);
}

	.toplinks, .footerlinks {
		position: relative;
	}

	.footerlinks {
		padding: .414em 0;
		margin: .414em 0;
		border-top: 3px solid #eee;
		border-bottom: 3px solid #eee;
	}

		.toplinks span, .footerlinks span, .footerlinks a {
			display: block;
			color: #403F4C;
			padding: 1.7vh 0;
			cursor: pointer;
			white-space: nowrap;
		}

			.toplinks .icon {
				display: inline-block;
			    vertical-align: text-top;
			    margin-right: .7em;
			}
			.footerlinks .icon {
			    vertical-align: top;
			    margin-right: .2em;
			}

		.footerlinks a:nth-last-child(-n+2) {
			display: none;
		}

		.footerlinks span, .footerlinks a {
			margin-left: 2.1em;
		}

		.footerlinks a:hover, .footerlinks span:hover {
			text-decoration: none;
		}

		.toplinks .togglelang, .toplinks .toggleoptions, .footerlinks span:first-child {
			display: none;
		}

		.optionsmenu {
			display: none;
		}

	.languagemenu, .languagemenu.noheight {
		position: relative;
		opacity: 1;
		transform: none;
		pointer-events: all;
	}

		.languagemenu ul {
			padding: 0;
			list-style: none;
			margin: 0 0 0 1.7em;
		}

			.languagemenu li {
				display: inline-block;
				padding: .414em;
			}

				.languagemenu a {
					color: #403F4C;
					text-transform: uppercase;
				}


.verse .supportedby {
	display: none;
}


.addplacepane, .mypointspane {
	box-sizing: border-box;
	position: fixed;
	top: 14vh;
	bottom: 0;
	left: 100%;
	padding: 0 2em 2em;
	width: 100%;
	background: #fff;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	transition: transform .3s;
	transform: translateX(-100%);
}

	.closeflyout {
		padding-bottom: 1em;
	}

	.addplacepane h4, .mypointspane h4 {
		margin-top: 0;
		text-transform: inherit;
	}

	/* Add Place form */
	.form-tabs-container {
		display: flex;
		overflow-x: hidden;
	}

		.form-tab {
			flex: 1;
			min-width: calc( 100% - 2px) ;
			transition: transform .3s cubic-bezier(.15,-0.13,.36,1.11), opacity .3s;
			opacity: 0;
		}

		.form-tab.active {
			opacity: 1;
		}

		.tab-0 .form-tab {
			transform: translateX(0);
		}
		.tab-1 .form-tab {
			transform: translateX(-100%);
		}
		.tab-2 .form-tab {
			transform: translateX(-200%);
		}

		.start-add {
			text-align: center;
			padding: .5em 0 0;
		}
			.start-add .icon {
				height: 12vh;
				width: 7.88em;
				margin: 2vh 0 3vh;
				fill: #00aeef;
			}

		.addplacesteps {
			padding: 1em 0 0;
			text-align: center;
		}	

			.step {
				height: .5em;
				width: .5em;
				margin: 0 .3em;
				background-color: #e9e9e9;
				border-radius: 50%;
				display: inline-block;
			}
			.step.active {
				background-color: #00AEEF;
			}
			.step.finish {
				background-color: #5A7D7C;
			}

			.addplacepane label {
				display: block;
				margin: 1em 0;
			}

			.addplacepane input, .addplacepane textarea {
				width: calc( 100% - 2em );
				margin-bottom: .354em;
				padding: 1em;
				border: none;
				border-radius: .707em;
				background: #F3F3F4;
				transition: border .3s;
			}
			.addplacepane input:focus, .addplacepane textarea:focus {
				border-color: #00aeef;
			}

			.addplacepane input.invalid, .addplacepane textarea.invalid {
				border-color: #E84855;
			}
			.addplacepane textarea {
				height: 4em; 
			}

			.side-by-side {
				display: flex;
				justify-content: space-between;
			}
				.side-by-side input {
					width: calc( 46% - 2em );
					flex: 1;
				}

			.addplacepane .radio-option {
				display: inline-block;
				vertical-align: top;
				padding-left: 2em;
				width: calc( 30% - 3em );
				position: relative;
				cursor: pointer;
				user-select: none;
			}

			.radio-option input, .checkbox-option input {
				position: absolute;
				opacity: 0;
				cursor: pointer;
			}

			.radiomark {
				position: absolute;
				top: .2em;
				left: 0;
				height: 1em;
				width: 1em;
				background-color: #F3F3F4;
				border-radius: 50%;
			}

			.radio-option:hover input ~ .radiomark {
			 	background-color: #5A7D7C;
			}
			.radio-option input:checked ~ .radiomark {
				background-color: #00AEEF;
			}

		.addplacecontrols {
			margin-top: 0;
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
		}

			.addplacecontrols .button {
				width: 40%;
				flex: 1;
			}


	.flyout .formsuccess {
		color: #00ff00;
		position: absolute;
		transform: scale(0);
		transition: transform .2s;
		top: 35%;
		left: 5em;
		right: 5em;
		text-align: center;
	}

	.addplacepane.loading form, .addplacepane.success form {
		transform: scale(0);
	}
	.addplacepane.loading .loader  {
		opacity: 1;
	}
	.addplacepane .loader {
		transform: translate(-50%, -50%);
		transition: opacity .7s;
	}
	.addplacepane.success .formsuccess {
		transform: scale(1);
	}	



	/* Favourite places flyout */

	.favpoints {
		margin: 0;
	}

	.nopoints {
		text-align: center;
		padding: .5em 0 0;
	}
		.nopoints .icon {
			height: 7.88em;
		    width: 7.88em;
		    margin-bottom: 1rem;
		    fill: #00aeef;
		}
		.nopoints-text {
			margin-bottom: 2.4em;
		}

		.nopoints .button {
			padding: 1em 1.1em;
		}



.sortingopener {
	position: fixed;
	left: 3%;
	bottom: 1rem;
	text-align: left;
	background: #fff;
	transform: translateY( 200% );
	opacity: 0;
	transition: all .3s;
	vertical-align: middle;
	cursor: pointer;
	border-radius: .1em;
}

.sortingopener.display {
	transform: translateY( 0 );
	opacity: 1;
}

.sortingopener:hover {
	background: #f5f5f5;
}

	.sorticon {
		display: inline-block;
		background: #00ff00;
		color: #fff;
		font-size: 1.414em;
		width: 4em;
		text-align: center;
		line-height: 4em;
		height: 4em;
		margin-right: 1em;
		border-radius: .1em;
	}

	.sortingopener p {
		display: inline-block;
	    height: 3.5em;
	    margin: 0;
	    padding-right: 1.414em;
	    vertical-align: middle;
	}



/* List view */

.sidebar-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	overflow: hidden;
	transition: all .4s cubic-bezier(0.770, 0.000, 0.000, 1.150);
	transform: translateY( 110% );
	box-shadow: 0 0 .99em 0 rgba( 64, 63, 76, .1);
	border-radius: 1.414em;
}
.sidebar-canvas.disabled {
	display: none;
}
.sidebar-canvas.closed {
	transform: translateY( calc( 100% - 2.5em ) );
}
.sidebar-canvas.hinted {
	transform: translateY( 70% );
}
	.sidebar-canvas.hinted .listitems {
		height: calc( 30% - 1.5em );
	}
.sidebar-canvas.opened {
	transform: translateY( 30% );
}
	.sidebar-canvas.opened .listitems {
		height: calc( 70% - 1.5em );
	}

	.sidebar-handle {
		position: relative;
		height: 2.5em;
	}
	.sidebar-handle:after {
		content: '';
		position: absolute;
		top: .6em;
		left: 50%;
		margin-left: -1em;
		height: .35em;
		width: 2em;
		border-radius: .3em;
		background: #bebbbb;
	}


	.listitems {
		list-style: none;
		margin: 0 3%;
		padding: 0;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

		.listitem {
			margin-bottom: .75em;
			cursor: pointer;
		}
		.listitem:last-child {
			margin-bottom: 0;
		}

			.listicon {
				position: relative;
				background: #00aeef;
				font-size: 1.999em;
				float: left;
				padding-top: 20%;
				width: 20%;
				border-radius: .707rem;
				transition: background .3s;
			}
			.listitem:hover .listicon {
				background: #0078a6;
			}

			.listitem.repair .listicon {
				background: #558B6E;
			}
			.listitem.repair:hover .listicon {
				background: #46725A;
			}


			.active .listicon, .active:hover .listicon {
				background: #00FF00;
			}

				.listicon svg {
					fill: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}

			.temporarily-closed .listicon:after {
				content: '';
				position: absolute;
				top: 48%;
				left: 5%;
				width: 90%;
				height: .4rem;
				border-radius: .2em;
				transform: rotate(-45deg);
				background: #E84855;
				box-shadow: 0em 0em 0em 0.05em #00aeef;
				transition: box-shadow .3s;
			}
			.temporarily-closed.active .listicon:after, .temporarily-closed.active:hover .listicon .listicon:after {
				box-shadow: 0em 0em 0em 0.05em #00FF00;
			}
			.temporarily-closed.listitem:hover .listicon:after {
				box-shadow: 0em 0em 0em 0.05em #0078a6;
			}	

			.listinfo {
				float: left;
				padding-top: .3em;
				padding-bottom: 0;
				margin-left: 4.1%;
				width: 75.9%;
				min-height: 4.8em;
				border-bottom: 1px solid #f4f5f6;
			}
			.listitem:last-child .listinfo {
				border-bottom: 0;
				padding-bottom: 0;
			}

				.listinfo h4 {
					text-overflow: ellipsis;
					margin: 0 0 1px 0;
					white-space: nowrap;
					overflow: hidden;
				}

				.listinfo p {
					margin: 1px 0;
					display: -webkit-box;
					overflow: hidden;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

			.button-takeaway {
				display: block;
    			text-align: center;
    			margin: .414em 0 1em;
			}

			.icon-carrier {
				margin-right: .354em;
			}

		.noitems {
			color: #929191;
			text-align: center;
			margin: 4em auto;
		}


	.nearbyitems {
		margin: 1em 0;
		padding: 1em;
		border: 3px solid #eee;
		border-radius: 1.414rem;
	}

		.nearbyitems > div {
			position: relative;
			display: inline-block;
			vertical-align: top;
			text-align: center;
			font-size: .707em;
			width: 23%;
			margin: .303rem 1% .404rem 1%;
			cursor: pointer;
		}

			.nearbyicon {
				display: inline-block;
				background: #00AEEF;
				border-radius: 1.414em;
				margin-bottom: .707em;
				transition: background .3s; 
			}
			.nearbyitems > div:hover .nearbyicon {
				background: #0078a6;
			}

			.current .nearbyicon {
				background: #00FF00;
			}

				.quickinfo .nearbyicon svg {
					position: relative;
					fill: #fff;
					width: 3em;
					height: 3em;
					margin: 1em;
					left: 0;
				}

			.nearbytext {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}


/* Take Away Form */

.takeawaybox .infoheader {
	text-align: center;
    padding: 1.414em 0;
}

.takeawaybox .infoheader.fixed {
	position: fixed;
}

.takeaway-form {
	padding: 1em;
}


	.takeaway-tab-form {
		transition: transform .5s ease, opacity .5s ease;
		overflow: visible;
	}
	.takeaway-tab-form.off {
		transform: scale( 0.5 );
		opacity: 0;
		max-height: 0;
		pointer-events: none;
	}

	.takeaway-tab-carrier-list {
	}
	.takeaway-tab-carrier-list.off {
		display: none;
	}

	.takeaway-tab-carrier {
	}
	.takeaway-tab-carrier.off {
		display: none;
	}

	.takeaway-tab-done {
	}
	.takeaway-tab-done.off {
		display: none;
	}

	.takeaway-form .quickinfo {
		margin: 0;
		border-top: none;
	}

	.takeaway-form .quickinfo li {
		padding: 0em 1em 1em;
		border-bottom: none;
	}

		.takeaway-form h3, .takeaway-form h4 {
			text-transform: none;
		}	

		.takeaway-form .quickinfo  h4 {
			margin: 2rem 0 0 0;
		}

		.takeaway-form .quickinfo .icon {
			top: 1em;
			left: 2em;
    		pointer-events: none;
		}

		.takeaway-form label {
			display: block;
			margin: 1em 0;
		}

		.takeaway-form input, .takeaway-form textarea {
			width: calc( 100% - 2em );
			margin-bottom: .353em;
			padding: 1em;
			border: none;
			border-radius: .707em;
			background: #F3F3F4;
			transition: border .3s;
		}
		.takeaway-form input:focus, .takeaway-form textarea:focus {
			border-color: #00aeef;
		}

		.takeaway-form input.invalid, .takeaway-form textarea.invalid {
			border-color: #E84855;
		}

		.takeaway-form input.inline, .takeaway-form textarea.inline {
			text-indent: 2em;
			cursor: pointer;
		}
			.takeaway-form input.inline:hover, .takeaway-form textarea.inline:hover {
				background: #F3F3F4;
			}

			.tw-error-message {
				color: #E84855;
				background: #FBDBDD;
				border-radius: 0.707em;
				padding: 1em;
			}

			/*.takeaway-form input::placeholder {
				color: #5A7D7C;
				opacity: 1;
				transition: color .3s;
			}
			.takeaway-form input:focus::placeholder {
				color: #BEBBBB;
			}
			.takeaway-form input::-ms-input-placeholder {
				color: #5A7D7C;
				transition: color .3s;
			}
			.takeaway-form input::focus:-ms-input-placeholder {
				color: #BEBBBB;
			}*/


	.takeaway-form .radio-option {
		display: inline-block;
		vertical-align: top;
		padding-left: 0;
		width: 50%;
		position: relative;
		margin: 0;
		cursor: pointer;
		user-select: none;
	}

		.takeaway-form .radiomark {
			padding: .354em;
			background-color: #fff;
			border-radius: .354em;
			height: auto;
			width: auto;
			position: relative;
			top: 0;
			display: block;
			text-align: center;
		}

		.takeaway-form .radio-option:hover input ~ .radiomark {
		 	background-color: #5A7D7C;
		}
		.takeaway-form .radio-option input:checked ~ .radiomark {
			background-color: #00AEEF;
			color: #fff;
		}

	.takeaway-form .checkbox-option {
		position: relative;
		margin: 2em 1em;
		padding-left: 2em;
		cursor: pointer;
		user-select: none;
	}

		.checkmark {
			display: block;
			top: .2em;
			left: 0;
			height: 2.827em;
			width: 2.827em;
			line-height: 2.827;
			background-color: #fff;
			border-radius: .707em;
			text-align: center;
		}

		.checkbox-option:hover input ~ .checkmark {
		 	background-color: #5A7D7C;
		}
		.checkbox-option input:checked ~ .checkmark {
			background-color: #00AEEF;
			color: #fff;
		}

	.takeaway-object {
		box-shadow: 0 0 1em 1em #F3F3F4;
		border-radius: 1.414em;
		padding: 1em 1.414em;
		margin-bottom: 3.998em;
	}	

		.takeaway-image {
			position: relative;
			background-color: #F3F3F4;
			text-align: center;
			border-radius: .707em;
			overflow: hidden;
			padding-bottom: calc( 100% - 4em );
			color: #5A7D7C;
		}
			.takeaway-image > div, .takeaway-image > img {
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				transform: translateY(-50%);
				cursor: pointer;
			}
			.takeaway-image .icon-photo {
				height: 5.653em;
				width: 5.653em;
				display: block;
				margin: 0 auto 1em;
				fill: #5A7D7C;
			}


	.takeaway-form .quantity {
		text-align: center;
	}

		.takeaway-form .quantity .button, .takeaway-form .quantity input {
			display: inline-block;
			text-align: center;
			width: 33%;
			padding: 1em 0;
			margin: .5em 0;
		} 

	.takeaway-form .floor, .takeaway-form .elevator, .takeaway-form .item-quantity {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

		.takeaway-form .floor > *, .takeaway-form .elevator > *, .takeaway-form .item-quantity > * {
			flex: 1 1 auto;
			width: 40%;
		}


	.takeaway-form .button {
		display: block;
		text-align: center;
		margin: 1em auto;
	}

	.takeaway-form .icon-add, .takeaway-form .icon-minus {
		height: 1em;
		width: 1em;
		margin: 0;
		vertical-align: middle;
	}


	.takeaway-done {
		margin: 10em auto 0;
		width: 66%;
		text-align: center;
	}

		.takeaway-done h3 {
			width: 100%;
		}

.carrier-list {}

	.carrier-logo {
		position: relative;
		border-radius: .5em;
	}

		.carrier-logo img {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 80%;
			transform: translate(-50%, -50%);
		}

.carrier-cover {
	height: 7em;
	border-radius: 1em;
	margin-bottom: 1em;
	background-color: #00AEEF;
	display: flex;
	align-items: center;
	justify-content: center;
}	

	.carrier-cover img {
		max-height: 70%;
		max-width: 70%;
	}

.carrier-description {
	padding: 1em;
}	

.carrier-pricelist {
	margin: 1em;
	background: #F3F3F4;
	padding: 2em;
	border-radius: 1.414em;
}

	.carrier-pricelist h4 {
		margin: 0 0 1rem;
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 2;
	}
		.price-row  > div {
			flex: 1 1 auto;
			width: 40%;
		}
		.totals {
			text-align: right;
		}



			

/* Overlay */

.map-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	transition: transform 0.5s;
}

.overlay-open .map-container {
	transform: scale(0.8);
	overflow: hidden;
}


/* Modal Style */
.modal, .modal:before {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.modal {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 3;
}

.modal:before {
	content: '';
	position: absolute;
	z-index: 1;
	background: rgba(45, 45, 45, 0.5);
	opacity: 0;
	transition: opacity 0.3s;
}

.modal.open:before {
	opacity: 1;
	pointer-events: auto;
}

.modal-content {
	width: 30%;
	max-width: 360px;
	min-width: 250px;
	background: #fff;
	padding: 3em;
	text-align: center;
	position: relative;
	z-index: 5;
	opacity: 0;
	border-radius: 1.414em;
}

	.modal-content h3 {
		width: 100%;
		margin-bottom: 2.5rem;
	}

	.modal-content .textinput {
		border-radius: 2em;
		text-indent: 0;
		margin-bottom: 1em;
		box-shadow: 0 0 1.414em 0 rgba( 64, 63, 76, .1)
	}

	.modal-content .button-secondary {
		display: block;
	}

	.modal-content .icon {
		display: inline-block;
		vertical-align: text-bottom;
		margin-right: .4em;
	}

	.modal-content .icon-facebook-squared {
		fill: #3b5998;
	}
	.modal-content .icon-messenger {
		fill: #0084ff;
	}
	.modal-content .icon-twitter-square {
		fill: #1da1f2;
	}
	.modal-content .icon-mail {
		fill: #db4437;
	}



.modal.open .modal-content {
	pointer-events: auto;
}



/* Overlay Style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	transform: translateY(100%);
	transition: transform 0.5s, visibility 0s 0.5s;
}

.overlay-open .overlay {
	visibility: visible;
	transform: translateY(0%);
	transition: transform 0.5s;
}

	.overlay h2 {
		margin: .707em 0 1em;
    	text-align: center;
	}

	/* Overlay closing cross */
	.overlay .overlay-close, .modal .modal-close {
		position: absolute;
		right: 1em;
		top: 1em;
		background: #fff;
		padding: 1em;
		z-index: 100;
		cursor: pointer;
		border-radius: 3em;
		box-shadow: 0 0 1.99em 0 rgba( 64, 63, 76, .1);
		transition: transform .2s;
	}
	.overlay .overlay-close:hover, .modal .modal-close:hover {
		transform: scale(1.05);
	}

		.overlay-close svg, .modal-close svg {
			display: inline-block;
			vertical-align: text-bottom;
		}

	.overlay-scrolltop {
		position: fixed;
		bottom: -4em;
		right: .5em;
		height: 1.414em;
		width: 1.414em;
		padding: 1em;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 1em 1.99em 0 rgba( 64, 63, 76, .1);
		cursor: pointer;
		transition: all .3s;
		z-index: 3;
	}
		.overlay-scrolltop svg {
			fill: #00aeef;
		}

		.overlay.open .overlay-scrolltop {
			transform: translateY(-4.5em);
			transition-delay: .3s;
		}

	.overlay-content {
		padding: .5em;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: -4em;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		background: #fff;
	}


		.team, .partners {
			margin: 2em -.75% 0;
		}

			.team > div, .partners > div {
				float: left;
				width: 11%;
				margin: .75%;
				text-align: center;
				min-width: 8.5em;
				height: 18em;
			}

			.partners > div {
				height: auto;
			}

			.team h4 {
				font-size: 1em;
				margin-top: .7em;
			}

				.portrait {
					margin: .5em 0 1em;
					overflow: hidden;
					border-radius: 60%;
				}

					.portrait img {
						width: 100%;
						height: auto;
					}

	.overlay-tabs {
		list-style: none;
		padding: 0 .5em;
		border-bottom: 3px solid #f2f2f2;
		background: #fff;
		margin: 0;
	}

	.bigicon {
		font-size: 2em;
		margin: 0px 0px 7px -4px;
		display: inline-block;
		vertical-align: middle;
	}

		.overlay-tabs > li {
			width: 25%;
			line-height: 2em;
			padding: 5em 0 1em;
			float: left;
			text-align: center;
			cursor: pointer;
		}

			.overlay-tabs > li:hover {
				color: #0078a6;
			}

			.overlay-tabs > li.current, .overlay-tabs > li.current:hover {
				color: #00aeef;
				cursor: default;
			}

		.sorting {
			position: relative;
		}

		.sortingintro {
			text-align: center;
			margin: 2em -0.25em 5em;
		}

			.sortingsearch {
				position: relative;
				width: 97.5%;
				margin: 0 auto 4em;
			}

				.sortingsearch .textinput {
					padding: 1.1em 1em 1em;
					width: 65%;
				}

				.sortingsearch .textinput:focus {
					border-bottom: 1px solid #00aeef;
				}

				.sortingsearch .button {
					width: calc( 33% - 2em );
					padding: 1.1em 1em 1em;
				}

				.sortmessages {
					background: #ff7400;
				    color: #fff;
				    padding: 1em;
				    margin-top: .25em;
				    max-height: 4em;
				    overflow: hidden;
				    transition: all .3s;
				}
				.sortmessages.hidden {
					padding: 0 1em;
					max-height: 0;
					transition: all .3s;
				}

			.sortingindex {
				position: relative;
				display: inline-block;
				text-align: left;
				vertical-align: top;
				width: 48%;
				min-height: 40vh;
				margin: .5%;
				box-sizing: border-box;
			}

				.sortingindex h4 {
					position: relative;
					min-height: 2.5em;
					padding: 1rem .5rem 0;
					color: #333;
					margin: 0;
					z-index: 2;
				}
				.sortingindex ul {
					position: relative;
					list-style: none;
					padding: .3em .5em 1em;
					color: #333;
					margin: 0;
					z-index: 2;
				}

					.sortingindex li {
						margin-top: .3em;
					}

						.sortingindex a {
							color: #333;
						}

				.sortingindex img {
					width: 100%;
					object-fit: cover;
					border-radius: .5em;
				}


		.wastecats {
			display: none;
		}

			.wastecontent {
				padding: .5em;
				line-height: 1.7;
				color: #777;
			}

				.print-controls {
					display: none;
				}

			.wastecontent article {
				margin-bottom: 3em;
				padding: 0;
			}

				.wastecontent .article-header {
					background: #f4f5f6;
					padding: 2em;
					margin: 0 auto;
					border-radius: 2em;
				}

					.illustration-container {
						width: 90%;
						border-radius: 50%;
						background: #fff;
						overflow: hidden;
						padding: 1em;
						margin: 0 auto 1em;
						display: block;
					}

						.illustration-container img {
							width: 100%;
						}

					.instruction-container {
						max-width: 100%;
					}

						.quick-instructions {
							list-style: none;
							padding: 0;
							margin: 1.414em 0 0 2em;
							max-width: 40em;
						}

							.quick-instructions li {
								margin-bottom: .5em;
								text-indent: -2em;
							}

								.quick-instructions .icon {
									vertical-align: sub;
									margin-right: .28em;
								}

									.quick-instructions svg {
										fill: #00FF00;
									}

			.wastecontent article:target {
				animation: highlight 3s;
			}

			.items-list {
				margin: 0 1em 2em;
			}		

				.items-list-column {
					display: block;
				}

				.good {
					color: #00FF00;
				}

					.good svg {
						fill: #00FF00;
					}

				.bad {
					color: #E84855;
				}

					.bad svg {
						fill: #E84855;
					}

				.good .icon, .bad .icon {
					vertical-align: sub;
					margin-right: .2em;
				}

				
				.items-list-yes, .items-list-no {
					list-style: none;
				}

				.items-list-photos .items-list-yes, .items-list-photos .items-list-no {
					padding: 0;
				}

					.items-list-yes li::before, .items-list-no li::before {
						content: '\2022';
						color: #00FF00;
						font-weight: bold;
						display: inline-block;
						width: 1em;
						margin-left: -1em;
					}

					.items-list-no li::before {
						content: '\2022';
						color: #E84855;
					}

				.items-list-photos img {
					height: 8em;
					width: 8em;
					display: block;
				}

					/*.items-list-no img {
						filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8)
					}*/

				.items-list-photos .items-list-yes li, .items-list-photos .items-list-no li {
					display: inline-block;
					width: 49%;
					height: 13em;
					vertical-align: top;
				}

				.items-list-photos .items-list-yes li::before, .items-list-photos .items-list-no li::before {
					content: '';
				}

				.quick-facts {
					border-top: 1px solid #f4f5f6;
					margin: 0 1em;
				}

					.quick-facts p {
						width: 100%;
						margin-bottom: .5em;
					}


		.sorting-item .button {
			display: block;
			text-align: center;
			margin: 2em 0 2em;
			padding: 1.1em 0 1em;
		}

			.sorting-item .button .icon {
				vertical-align: top;
				fill: #fff;
			}	

		.media {
			margin: 0 -.5% 0;
			text-align: left;
		}

			.media > div {
				margin-bottom: 4em;
			}

		.terms {
			margin: 0 auto;
		}

/* Login views */
.loginview .sidebar-canvas {
	width: 25%;
	height: 100%;
	padding: 0 3em;
	background: rgba( 245, 245, 245, .7 );
	z-index: 9;
	transform: translateX(0);
}

	.loginview .sidebar-canvas > div {
		opacity: 0;
		transition: opacity .3s;
	}
	.loginview .sidebar-canvas > .visible {
		opacity: 1;
	}

	.sidebar-close {
		position: absolute;
		right: 1em;
		top: 1em;
		cursor: pointer;
	}

	.admin-login {
		position: relative;
  		top: 50%;
  		transform: perspective(1px) translateY(-50%);
  		text-align: center;
	}

		.login-logo {
			font-size: 11em;
			text-align: center;
			margin-top: 0em;
			padding-bottom: .05em;
		}

			.login-logo i {
				display: inline-block;
				vertical-align: top;
			}

		.admin-login p {
			min-width: 15em;
			margin: .3em auto;
			position: relative;
		}

			.login-error {
				background: #ff7400;
				color: #fff;
				padding: 2em 0;
				margin-bottom: 2em;
			}

		.admin-login .textinput {
			border-bottom: 1px solid #fff;
			box-sizing: border-box;
			width: 100%;
			transition: border .3s;
		}
		.admin-login .textinput:focus {
			border-color: #00aeef;
			margin-bottom: 0;
		}



/* Autocompletes */

.ui-autocomplete, .pac-container {
	font-family: 'Noto Sans', sans-serif;
	border: 0;
	padding: 0;
	border-radius: 1.5em;
}

	.ui-menu .ui-menu-item, .pac-item {
		padding: 0;
		margin: 0;
		color: #403F4C;
		border: none;
		width: 100%;
		overflow: hidden;
		border-bottom: 1px solid #f4f5f6;
	}
	.ui-menu .ui-menu-item:first-child, .pac-item:first-child {
		margin-top: -1.2em;
		padding-top: 1em;
		background: #fff;
	}
	.ui-menu .ui-menu-item:last-child, .pac-item:last-child {
		border-bottom: none;
		background: transparent;
	}
	 
	.ui-menu .ui-menu-item {
		text-transform: lowercase;	
	}
	.ui-menu .ui-menu-item:first-letter {
		text-transform: capitalize;
	}

		.ui-menu .ui-menu-item a {
			text-decoration: none;
			display: block;
			padding: 1em 5%;
			text-indent: 2.4rem;
			line-height: 1.7;
			min-height: 0;
			font-weight: normal;
			border: 0;
			transition: background .3s, color .3s;
		}

		.ui-state-active,
		.ui-widget-content .ui-state-active,
		.ui-widget-header .ui-state-active,
		.ui-menu .ui-menu-item a.ui-state-focus,
		.ui-menu .ui-menu-item a.ui-state-active {
			margin: 0;
			background: #00aeef;
			color: #fff;
		}

	.highlight, .pac-matched {
		font-weight: bold;
	}

		.no_condition .desc {
			display: none;
		}

		.desc {
			color: #BEBBBB;
		}

		.broken .desc {
			color: #E84855;
		}

		.no_broken .desc {
			color: #558B6E;
		}

	.pac-icon {
		display: none;
	}

	.pac-item {
		text-indent: 1.5em;
		font-size: 12px;
		color: #777;
		cursor: pointer;
	}

	.pac-item-query {
		color: #403F4C;
	}

/* Datepickers */

.ui-datepicker { 
	width: calc(100% - 3.4em);
	max-width: 20em;
   padding: .75em .75em .25em; 
   box-shadow: 0 0 0.99em 0 rgb(64 63 76 / 10%);
}
.ui-widget-content {
    border: none;
    background: #fff;
    color: inherit;
}

.ui-datepicker .ui-datepicker-header { position: relative; padding: 0; }
.ui-widget-header {
    border: none;
    background: #fff;
    color: inherit;
    font-weight: bold;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { 
	display: block; 
	padding: 1em .2em; 
	text-align: center; 
	text-decoration: none; 
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none;
    background: #fff;
    font-weight: normal;
    color: inherit;
}

.ui-corner-all {
    border-radius: 1.414em;
}

/* jQuery UI Datepicker moving pixels fix */
table.ui-datepicker-calendar {border-collapse: separate;}
.ui-datepicker-calendar td {border: 1px solid transparent;}

/* jQuery UI Datepicker hide datepicker helper */
#ui-datepicker-div {display:none;}

/* jQuery UI Datepicker emphasis on selected dates */
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
	background: #743620 none;
	color: white;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
   border: none;
   background: #00AEEF;
   color: #fff;
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
	display: none !important;
	visibility: hidden;
}

.noheight {
	transform: translateX(0);
	pointer-events: none;
}

.notransition {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
	visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}



/* ==========================================================================
   Effects
   ========================================================================== */

/* Loading animation */
.loader {
	position: absolute;
	height: 3em;
	width: 3em;
	top: 10vh;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
.loader.show {
	opacity: 1;
}
.loader:before, .loader:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
	transition: all 1s;
}
.loader:before {
	background-image: url(../img/loader-1-01.svg);
	animation: outer 2.4s linear infinite;
}
.loader:after {
	background-image: url(../img/loader-2-01.svg);
	animation: inner .6s ease infinite;
}
@keyframes inner {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(180deg);
	}
}
@keyframes outer {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(180deg);
	}
}


/* Modal Effects */

.modal:before {
	transition-duration: 0.3s;
}

.modal.open .modal-content,
.modal.close .modal-content {
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

.modal.open .modal-content {
	animation-name: modal-open;
}

.modal.close .modal-content {
	animation-name: modal-close;
}

.modal.open div {
	animation: modal-elem 0.3s both;
}

.modal.open div:nth-child(1) {
	animation-delay: 0.05s;
}

.modal.open div:nth-child(2) {
	animation-delay: 0.1s;
}

.modal.open div:nth-child(3) {
	animation-delay: 0.15s;
}
.modal.open div:nth-child(4) {
	animation-delay: 0.2s;
}
.modal.open div:nth-child(5) {
	animation-delay: 0.25s;
}
.modal.open div:nth-child(6) {
	animation-delay: 0.3s;
}
.modal.open div:nth-child(7) {
	animation-delay: 0.35s;
}


@keyframes modal-open {
	0% { opacity: 0; transform: translate3d(0, 50px, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes modal-close {
	0% { opacity: transform: translate3d(0, 0, 0); }
	100% { opacity: 0; -w transform: translate3d(0, 50px, 0); }
}

/* Inner elements animations */

@keyframes modal-elem {
	0% { opacity: 0; transform: translate3d(0, 25px, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Fade In Effects */
/* Keyframes for the fade-in */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 
.fade-in {
	opacity: 0;
	animation: fadeIn ease-in 1;
	animation-fill-mode: forwards;  
	animation-duration: .3s;
}
 
.fade-in:nth-child(1) {
	animation-delay: .01s;
}
 
.fade-in:nth-child(2) {
	animation-delay: .03s;
}
 
.fade-in:nth-child(3) {
	animation-delay: .05s;
}
.fade-in:nth-child(4) {
	animation-delay: .07s;
}
 
.fade-in:nth-child(5) {
	animation-delay: .09s;
}
 
.fade-in:nth-child(6) {
	animation-delay: .11s;
}
.fade-in:nth-child(7) {
	animation-delay: .13s;
}
 
.fade-in:nth-child(8) {
	animation-delay: .15s;
}
 
.fade-in:nth-child(9) {
	animation-delay: .17s;
}
.fade-in:nth-child(10) {
	animation-delay: .19s;
}


@keyframes highlight {
	0% {
		outline: .1em solid #00ff00;
		outline-offset: 1em;
	}
	100% {
		outline: .1em solid #fff;
		outline-offset: 1em;
	}
}

/* Takeaway form checkbox effect. By Ina Carine, https://codepen.io/InaCarine */

@supports (animation: grow .5s cubic-bezier(.25, .25, .25, 1) forwards) {
     .tick {
        stroke-opacity: 0;
        stroke-dasharray: 29px;
        stroke-dashoffset: 29px;
        animation: draw .5s cubic-bezier(.25, .25, .25, 1) forwards;
        animation-delay: .6s
    }

    .circle {
        fill-opacity: 0;
        stroke: #00FF00;
        stroke-width: 16px;
        transform-origin: center;
        transform: scale(0);
        animation: grow 1s cubic-bezier(.25, .25, .25, 1.25) forwards;   
    }   
}

@keyframes grow {
    60% {
        transform: scale(.8);
        stroke-width: 4px;
        fill-opacity: 0;
    }
    100% {
        transform: scale(.9);
        stroke-width: 8px;
        fill-opacity: 1;
        fill: #00FF00;
    }
}

@keyframes draw {
    0%, 100% { stroke-opacity: 1; }
    100% { stroke-dashoffset: 0; }
}


/* ==========================================================================
   Media Queries for Responsive Design. Mobile First gents.
   ========================================================================== */

/* For anything larger than iPad portrait */
@media only screen and ( min-width: 49em ) {
	h1 {
		transform: translateY(0);
		left: 1rem;
	}

	.intro .interaction-form {
		background: rgba( 255, 255, 255, .7 );
		pointer-events: auto;
	}

		.intro .interaction-form .search-form {
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-1.95em);
			width: 26em;
			z-index: 3;
		}

		.intro.search-focused .interaction-form .search-form {
			transform: translate(-50%,-3.5em);
		}

		.toggle-options-canvas, .togglesortguide {
			display: none;
		}

		.search-dialogue {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,3%);
			width: 26em;
			z-index: 3;			
		}
		.verse .search-dialogue {
			height: 0;
		}

				.top-searches li {
					cursor: pointer;
					display: inline-block;
					padding: 1em 1em 0 0;
				}
				.top-searches li.top-searches-title {
					cursor: default;
					display: block;
				}

					.top-searches li p {
						margin: 0;
						padding: 0;
					}

				.top-searches li:hover {
					color: #00AEEF;
				}

				.intro.search-focused .top-searches li {
				    transform: translateY( 2em );
				}

			.inputcontainergoal {
				top: -3em;
    			padding: 0 1em;
			}
			.inputcontainercondition {
    			padding: 0 1em;
			}

				.inputcontainercondition .dialogue-question, .inputcontainergoal .dialogue-question {
				    font-size: 1em;
				    width: 100%;
				    margin: 1em auto 1em;
				}



	.verse .map-canvas-container {
		width: 70%;
		left: 30%;
	}	

	.verse .interaction-form {
		left: 5em;
		/*right: auto;*/
		width: calc(30% - 5em);
	}

		.verse .interaction-form form {
			width: 96%;
			top: 1em;
			left: 2%;
			transform: translate(0);
			background: #fff;
			z-index: 2;
		}

	.options-canvas {
		position: relative;
		width: inherit;
		top: inherit;
		left: inherit;
		height: 100%;
		bottom: inherit;
		padding: inherit;
		background: transparent;
		transform: none;
		overflow: visible;
		pointer-events: none;
	}

	.toplinks {
		position: relative;
		right: 1em;
		top: 1em;
		text-align: right;
		float: right;
		pointer-events: auto;
	}

		.toplinks span {
			display: inline-block;
			margin-left: .1em;
			padding: .3em .7em .2em .5em;
			cursor: pointer;
			white-space: nowrap;
			border-radius: 1em;
			transition: background .3s;
		}
		.toplinks span:hover {
			background: #fafafa;
		}
		.verse .toplinks span {
			background: #fff;
			border-radius: 1em;
			box-shadow: 0 0 .99em 0 rgba( 64, 63, 76, .1);
		}

		.toplinks .togglelang, .toplinks .toggleoptions, .footerlinks span:first-child {
			display: inline-block;
		}

		.optionsmenu {
			display: inherit;
		}

		.toplinks .togglesortguide, .verse .showallpoints {
			display: none;
		}

			.toplinks .icon {
			    margin-right: .3em;
			}

	.footerlinks {
		position: fixed;
		bottom: .3em;	
		left: 30%;
		right: 30%;
		text-align: center;
		z-index: 2;
		font-size: .707em;
		border: 0;
		margin: 0;
		padding: 0;
		pointer-events: auto;
	}

		.footerlinks a, .footerlinks span {
			display: inline-block;
			margin: 0;
			padding: .2em .6em;
			font-weight: bold;
			background: rgba(255,255,255,.7);
		}

		.footerlinks a:nth-last-child(-n+2) {
			display: inline-block;
		}


	.flyout {
		position: fixed;
		top: 4.1em;
		background: #fff;
		text-align: left;
		opacity: 1;
		border-radius: .707em;
		box-shadow: 0 0.5em 1em 0 rgba( 64, 63, 76, .1);
		transform: none;
		transition: all .3s;
		z-index: 99;
		pointer-events: auto;
		overflow: visible;
	}

		.flyout > * {
			transform: none;
			transition: transform .3s;
			transition-delay: .05s;
		}

	.intro .flyout {
		top: 3.8em;
	}

		.flyout:after {
			bottom: 100%;
			left: 50%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(255, 255, 255, 0);
			border-bottom-color: #ffffff;
			border-width: 16px;
			margin-left: -16px;
		}		

	.languagemenu {
		right: 1em;
		padding: 1em;
		width: 50px;
	}

	.intro .languagemenu {
		right: 1%;
	}

		.languagemenu ul, .optionsmenu ul {
			padding: 0;
			list-style: none;
			margin: 0;
		}

	.addplacepane, .mypointspane {
		right: 1em;
		bottom: auto;
   		left: auto;
		padding: 2em;
		width: 30%;
	}

		.closeflyout {
			display: none;
		}

		.addplacepane:after {
			left: 69%;
		}

		.mypointspane:after {
			left: 38%;
		}	

		.intro .addplacepane:after {
			left: 68%;
		}

		.intro .mypointspane:after {
			left: 37%;
		}

		.nopoints {
			padding: .5em 2em 1.3em;
		}

	.optionsmenu {
		right: 1em;
		padding: 1em;
		width: 80px;
	}

		.optionsmenu:after {
			left: 85%;
		}	

	.intro .optionsmenu {
		right: 2%;
		top: 3.8em;
	}

		.intro .optionsmenu:after {
			left: 77%;
		}

	.noheight, .languagemenu.noheight {
		pointer-events: none;
		opacity: 0;
		transform: none;
		transform: translateY(-1em) scale(.98,.98);
	}
		.noheight > * {
			transform: translateY(-.5em);
		}	

	/* Overlay styles for desktop */

	.overlay-content {
		padding: 3em;
	}

	.overlay-tabs {
		padding: 0 3em;
	}

		.overlay-tabs > li {
			font-size: 1em;
			padding: 2em 0 1em;
		}

	.overlay-scrolltop {
		right: 1em;
	}

		.overlay-open .overlay-scrolltop {
			transform: translateY(-5em);
			transition-delay: .5s;
		}

		.wastecats {
			position: sticky;
			display: inline-block;
			vertical-align: top;
			list-style: none;
			padding: 0;
			margin: 0;
			line-height: 1.6;
			width: 20%;
			top: 1em;
			left: 1em;
			z-index: 3;
		}

			.wastecats a {
				color: #00aeef;
				cursor: pointer;
			}
			.wastecats a:hover {
				color: #0078a6;
			}

			.wastecats a.active {
				font-weight: bold;
			}

			.wastecats h4 {
				margin: .5em 0 .1em -.03em;
				font-size: 1em;
			}

			.print-cats {
				list-style: none;
				padding: 0;
				margin: 0;
				line-height: 1.6;
				display: inline-block;
				width: 31%;
				vertical-align: top;
			}

		.wastecontent {
			display: inline-block;
			vertical-align: top;
			margin-left: 5%;
			max-width: 70%;
		}

			.print-controls {
				display: block;
				margin: 0 0 2em 0;
			}

				.print-controls .button {
					padding: 1em 1.414em;
					display: inline-block;
				 	float: right;
				 	width: auto;
				}

				.print-controls-selection {
					position: relative;
					background: #fff;
					padding: 3em;
					margin: -.5em;
					box-shadow: 0 0 1.99em 0 rgba( 64, 63, 76, .1);
					border-radius: 2em;
					transition: all .3s;
					max-height: 100vh;
				}

				.print-controls-selection.noheight {
					max-height: 0;
					margin: 0;
					transition: all .3s;
				}

					.print-controls-selection h3 {
						margin-bottom: 1rem;
					}

					.print-cats h4 {
						margin-top: 1.414rem;
					}

					.print-cats label {
						display: block;
						position: relative;
						padding: .5em 0 .5em 2em;
						cursor: pointer;
						user-select: none;
					}

						.print-cats li input {
							position: absolute;
							opacity: 0;
							cursor: pointer;
							height: 0;
							width: 0;
						}

						.checkmark {
							position: absolute;
							top: .65em;
							left: 0;
							height: 1.2em;
							width: 1.2em;
							border-radius: .5em;
							background-color: #e9e9e9;
						}

						.print-cats label input ~ .checkmark {
							transition: background-color .2s;
						}

						.print-cats label:hover input ~ .checkmark {
							background-color: #5A7D7C;
						}

						.print-cats label input:checked ~ .checkmark {
							background-color: #00AEEF;
						}

						.checkmark:after {
							content: "";
							position: absolute;
							display: none;
						}
						.print-cats label input:checked ~ .checkmark:after {
						 	display: block;
						}

						/* Style the checkmark/indicator */
						.print-cats label .checkmark:after {
							top: 1px;
							left: 1px;
							bottom: 1px;
							right: 1px;
							border-radius: 2em;
							background: #00AEEF;
						}

					.print-controls-actions {
						margin-top: 2em;
					}

						.print-opts {
							width: 50%;
						}

							.print-opts li {
								display: inline-block;
								margin: 1.1em 2em 0 0;
								width: auto;
							}	

			.wastecontent article {
				margin-bottom: 3em;
				padding: 3em;
			}

				.wastecontent .article-header {
					padding: 3em;
					margin: -3em -3em 0 -3em;
				}

					.illustration-container {
						width: 25%;
						margin: 0 2em 0 0;
						display: inline-block;
						vertical-align: middle;
					}

					.instruction-container {
						display: inline-block;
						vertical-align: middle;
						max-width: 60%;
					}

				.items-list {
					margin: 0 0 2em 0;
				}		

					.items-list-column {
						display: inline-block;
						vertical-align: top;
						padding-right: 2em;
	    				width: calc( 50% - 2em );
					}

				.quick-facts {
					margin: 0;
				}

					.quick-facts p {
						width: 75%;
					}

				.sorting-item .button {
					display: inline-block;
					width: auto;
					padding: 1.1em 1.414em 1em;
				}

		.sortingsearch {
			width: calc( 33.332% - 0.5em );
			min-width: 24em;
		}

			.sortingsearch form {
				box-shadow: 0 0 1.99em 0 rgba( 64, 63, 76, .1);
				border-radius: 2em;
			}

			.sortingsearch .textinput {
				width: 70%;
				background: transparent;
			}

			.sortingsearch .button {
				width: calc( 28% - 2em );
				padding: .8em .7em .8em;
    			margin-right: .2em;
			}

		.sortingindex {
			width: 33%;
		}

	.sidebar-canvas {
		width: 30%;
		height: calc( 100% - 4.25em );
		padding-top: 8.5em;
		transition: transform .3s;
		transform: translateX(-100%);
		border-radius: 0;
	}
	.sidebar-canvas.closed {
		transform: translateX( 0 );
	}
	.sidebar-canvas.hinted {
		transform: translateX( 0 );
	}
		.sidebar-canvas.hinted .listitems, .sidebar-canvas.opened .listitems, .sidebar-canvas.closed .listitems {
			height: inherit;
		}
	.sidebar-canvas.opened {
		transform: translateX( 0 );
	}

		.sidebar-handle {
			display: none;
		}

		.listitems {
			margin: 0 1em;
		}

		.favpoints {
			margin: 0;
		}

			.listinfo {
				padding-top: .6em;
				padding-bottom: .4em;
			}


	.listview .sidebar-canvas {
		transform: translateX(0);
	}

	.listview .map-canvas {
		width: 70%;
		margin-left: 30%;
	}


	.info-canvas {
		position: fixed;
		left: auto;
		right: 0;
		width: 30%;
		height: 100%;
		top: 0;
		bottom: 0;
		background: #fff;
		transform: translateX(100%);
		transition: transform .4s cubic-bezier(0.770, 0.000, 0.000, 1.150);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		z-index: 3;
	}
	.info-canvas.closed {
		transform: translateX( 100% );
		overflow: hidden;
	}
	.info-canvas.hinted {
		transform: translateX( 0 );
		overflow: scroll;
	}
	.info-canvas.opened {
		transform: translateX( 0 );
	}

	.hinted .infocontent {
	    display: block;
	}

	.hinted .quickaddress {
		display: none;
	}

	.quickinfo {
		margin: 1em;
		border-top: none;
	}

		.quickinfo li {
			border-bottom: none;
		}

	.ui-autocomplete, .pac-container {
		box-shadow: 0 1em 1.99em 0 rgba( 64, 63, 76, .1);
	}

	.loader {
		top: 50%;
	}

}

@media only screen and ( min-width: 57em ) {
	

	.supportedtext {
		display: inline;
	}

	.announcements {
		display: block;
	}

	.overlay-tabs > li {
		width: 10em;
	}


		.sortingindex {
			width: 15.666%;
		}

		/*.wastecontent div {
			float: left;
			width: 45%;
			margin-left: 5%;
		}

		.wastecontent div:first-child {
			padding-bottom: 45%;
			position: relative;
			background: #f5f5f5;
		}

			.wastecontent img {
				width: 100%;
				margin-bottom: 0;
				position: absolute;
			}*/

		.media > div {
			float: left;
			margin: .5%;
		}

		.media .bit-1 {
			width: 30%;
			padding-right: 2%;
		}

		.media .bit-2 {
			width: 65%;
		}

		.media .bit-3 {
			width: 99%;
		}

		.terms {
			max-width: 65%;
		}

}




/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
	* {
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
		-ms-overflow-style: none; 
	  	scrollbar-width: none;  
	}

	*::-webkit-scrollbar {
	  display: none;
	}

	html {
		overflow: hidden;
	}

	body {
		font-size: 12pt;
		line-height: 1.3;
	}

	h2, h3, h4 {
		font-size: 17pt;
	}

	img {
		page-break-inside: avoid;
		max-width: 100% !important;
	}

	@page {
		margin: 1cm 1cm 1cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}

	.interaction-canvas, .sidebar-canvas, .closebox, .button, .infoheader .button, .button-secondary, .info-report, .info-print, .info-sort, .info-pricelist a, .opinions, .infoheader .quickaddress, .updatedate, .nearby-points, .sortingintro, .overlay-close, .wastecats, .overlay-scrolltop, .print-controls, .sorting-item .button, .illustration-container.no-print, .no-print {
		display: none;
	}

	h1 {
		transform: none;
		left: 0;
	}
	h1 a span {
		color: #fff !important;
		background: #00ff00 !important;
		-webkit-print-color-adjust: exact; 
	}

	.infocontent, .hinted .infocontent {
		display: block;
	}

	.map-canvas {
		top: 4cm;
		width: 33%;
		height: 33%;
	}

	.info-canvas, .info-canvas.hinted {
		top: 4cm;
		left: 33%;
		width: 67%;
		overflow: scroll;
		transform: none;
	}

	.infoheader {
		padding-top: 0;
	}

		.infoheader h3 {
			margin-top: -.25em;
		}

	.wastetypeslist {
		display: none;
	}

	.wastetypesall {
		overflow: visible;
		opacity: 1;
		max-height: 50em;
	}

		.wastetypesall ul {
			-webkit-columns: 1em 1; 
			-moz-columns: 1em 1;
			columns: 1em 1;
			padding-left: .1em;
			margin-bottom: 0;
		}	

			.wastetypesall li {
				display: inline-block;
				width: 50%;
				vertical-align: top;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

				.wastetypesall li::before {
					margin-left: 0;
				}	

	.quickinfo {
		border-top: none;
	}

	.quickinfo li {
		border-bottom: none;
		padding: .414em 3.4em;
	}

	body:after {
		content: 'Vaata lisa kuhuviia.ee';
		display: block;
		color: #00FF00;
		font-weight: bold;
		font-size: 0.707em;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	/* Sorting guidelines */



	.overlay-open .overlay {
		position: inherit;
		transform: none;
	}

	.overlay-open .map-container, .overlay-open .modal {
		display: none;
	}

		.overlay-open .overlay-content {
			position: inherit;
			transform: none;
			top: auto;
			right: auto;
			bottom: auto;
			left: auto;

		}	

			.wastecontent article {
				padding-top: 2em 0 0;
				margin-bottom: 0;
				page-break-inside: avoid;
			}

				.wastecontent .article-header {
					padding: 1em;
					border: 1pt solid #ccc;
				}

					.illustration-container {
						width: 25%;
						margin: 0 5% 0 0;
						display: inline-block;
						vertical-align: middle;
					}

					.instruction-container {
						display: inline-block;
						vertical-align: middle;
						max-width: 60%;
					}

						.items-list {
							padding: 0 0 4em 0;
						}		

							.items-list-column {
								display: inline-block;
								vertical-align: top;
								padding-right: 2em;
			    				width: calc( 50% - 2em );
			    				font-size: 10pt;
							}

				.quick-instructions {
					max-width: 100%;
				}


}