@charset "utf-8";
@media handheld,
only screen and (max-width:1600px),
only screen and (max-device-width:1600px) and (orientation:portrait) {
	.center {
		padding: 0 40px
	}
	.center.faq {
		padding: 0 20px
	}
	.slider.at .slide-layer h2 {
		word-break: break-all;
	}
	.two-col {
		align-items: center
	}
	.two-col .text {
		padding: 0 40px 0 140px
	}
	.tips .boxes .box img {
		width: 130px;
		height: 130px
	}
	.product-highlight .info .images .thumbs img {
		max-width: 100%
	}
	.product-highlight .info .images .thumbs .youtube {
		max-height: 80px
	}
	.product-support .text .boxes {
		justify-content: space-around
	}
	.accessories .boxes .box {
		margin: 0 10px 0 0
	}
	.accessories .boxes .box:last-child {
		margin-right: 0
	}
	#ask-info .wrapper {
		padding: 50px 0 0
	}
	.history .year .text.left-margin {
		margin-left: 109px;
		padding-right: 10px
	}
	.history p {
		font-size: 16px !important;
		line-height: 24px !important
	}
	.history h2 {
		font-size: 22px !important;
		margin-bottom: 15px !important
	}
	.person .image{
		height: 180px;
	}

	.person .image img{
		height: 100%;
		max-width: none;
	}

	.person .text {
		/* display: flex;
		align-items: center; */
		/* padding: 0 20px */
	}
	.person .text h3 {
		font-size: 22px
	}
	.person .text p {
		font-size: 16px;
		line-height: 24px
	}
	#content.media .post .right,
	#content.media .post .left {
		padding: 20px
	}
	.news-post .center.narrow {
		padding: 0
	}
	.news-post #cta-bottom {
		padding: 0 20px
	}
	#cta-bottom .center {
		padding: 0
	}
	#service-form .right {
		padding: 0
	}
	.service-steps .head-step.step1,
	.service-steps .head-step.step2,
	.service-steps .head-step.step3,
	.service-steps .head-step.step4 {
		background-size: contain
	}
	.service-steps .head-step {
		width: 100%
	}
	#content.accessories #tools .wrapper .box {
		width: 33%
	}
	.cleaning-page .block .product .image {
		padding: 0 40px
	}
	.cleaning-page .block .product h3 {
		font-size: 18px;
		line-height: 21px
	}
	.review .left {
		padding: 0 50px 0 0
	}

	.landing-event-page #main-image .layer{
		padding: 0px 0px 0px 40px;
	}
	footer #social i {
		margin: 0 0 0 30px
	}
}

@media handheld,
only screen and (max-width:1550px),
only screen and (max-device-width:1550px) and (orientation:portrait) {
	#menu.screen>ul>li.mega ul {
		width: 100%
	}
	#menu.screen>ul>li.mega>div ul li {
		width: 25%
	}
	#menu.screen>ul>li.mega.sub>div ul li {
		padding: 0 40px
	}
	#menu.screen>ul>li.mega.sub.small>div ul {
		width: 80%
	}
	#menu.screen>ul>li.mega.sub.small>div ul li {
		text-align: center
	}
	#menu.screen>ul>li>a {
		padding: 0 30px
	}

}

@media handheld,
only screen and (max-width:1480px),
only screen and (max-device-width:1480px) and (orientation:portrait) {
	#controls #region span {
		display: none
	}
	header.subpage #controls>div span {
		display: none
	}
	header.subpage #brand #slogen h2 {
		font-size: 18px
	}
	#main-content.product .center {
		padding: 0 40px
	}
	.product-highlight .highlight {
		padding: 0 0 0 30px
	}
	.accessories .item {
		width: 250px
	}
	.accessories .item h4 {
		font-size: 16px
	}
	#main-content #faq-products .box h3 {
		font-size: 12px;
		letter-spacing: 0
	}
	#main-content #faq-products .box a {
		padding: 0 10px
	}
	.vision .columns .col:first-child {
		padding: 37px 50px 60px 110px
	}
	.vision .columns .col:last-child {
		padding: 37px 110px 60px 50px
	}
	.service img {
		height: 100%;
		max-width: none
	}
	.healthy-home img {
		height: 100%;
		max-width: none
	}
	form#register .right .input-item {
		width: 100%
	}
	form#buy-accessories .right .input-item {
		width: 100%
	}
	.pollutants .boxes .box {
		width: 130px
	}
	.products-result h4,
	.article-results h4 {
		font-size: 22px;
		padding: 0 20px 0 0
	}
	.article-results .item p {
		padding: 0 20px 0 0
	}
	.cleaning-page .block .product {
		width: 25%
	}

	.landing-event-page .description .right{
		padding: 0px 0px 0px 40px;
	}

	.landing-event-page .description .right p,
	.landing-event-page .video .right p,
	.landing-event-page .map .left p{
		font-size: 16px;
	}

	.recycling-page .two-col .text{
		padding: 20px;
	}	
}


@media handheld,
only screen and (max-width:1366px),
only screen and (max-device-width:1366px) and (orientation:portrait) {
	#menu.screen > ul > li.mega > div ul li{ 
		min-width: 150px; 
	}

	#menu.screen>ul>li.mega>div ul li h3 {
		font-size: 14px
	}

	#menu.screen>ul>li a,
	#menu.screen>ul>li.mega>div ul li .product-list h4 {
		font-size: 13px
	}

	#menu.screen>ul>li>a {
		padding: 0 15px 0 20px;
		font-size: 12px
	}
	#menu.screen>ul>li.sub>a:before,
	#menu.screen>ul>li.mega>a:before {
		font-size: 18px
	}


	#slider .slide-layer {
		padding: 0 20px 0 80px
	}
	#slider .slide-layer h2 {
		font-size: 24px;
		line-height: 28px
	}
	#slider .slide-layer a.button {
		font-size: 13px
	}
	#videos .text p {
		font-size: 16px;
		line-height: 22px
	}
	.home-cols .col .text h3 a {
		font-size: 20px
	}
	.home-cols .col .text p,
	.home-cols .col .read-more {
		font-size: 16px;
		line-height: 22px
	}
	.two-col .text {
		padding: 0 40px 0 90px
	}
	.two-col .text h2 {
		font-size: 21px;
		margin: 0 0 15px
	}
	.two-col .text p {
		margin: 0 0 15px
	}
	.features .boxes .box {
		width: 220px
	}
	.features .boxes .box h2 {
		font-size: 18px
	}
	.features .boxes .box p {
		font-size: 14px
	}
	.tips .boxes .box img {
		width: 110px;
		height: 110px
	}
	.tips .boxes .box h3 {
		font-size: 13px;
		line-height: 18px;
		padding: 0 10px
	}
	#content.products #product-container .wrapper .box {
		width: 33%
	}
	#content.products #product-container .wrapper .box:nth-child(4n) {
		border-right: 1px solid #d1d1d1
	}
	#content.products #product-container .wrapper .box:nth-child(3n) {
		border-right: 0
	}
	.accessories .carousel {
		padding: 0 0 0 40px
	}
	.history p {
		margin-bottom: 5px !important
	}
	.one-column .center {
		padding: 0 20px
	}
	#contact-info h3 {
		font-size: 22px;
		min-height: 60px
	}
	#contact-info .boxes .box {
		margin: 0 0 30px
	}
	#contact-info .box p,
	#contact-info .box a {
		font-size: 16px
	}
	#main-content #faq-products {
		flex-wrap: wrap;
		justify-content: normal
	}
	#main-content #faq-products .box {
		width: 24%;
		margin: 0 1% 1% 0
	}
	#main-content #faq-products .box img {
		max-height: none;
		width: 100%
	}
	a.to-top-full {
		right: 30px
	}

	.clean-water-game canvas{
		width: 380px !important;
	}

	.landing-event-page #main-image .layer h1{
		font-size: 32px;
	}

	.landing-event-page .description .wrapper{
		flex-wrap: wrap;
	}

	.landing-event-page .description .wrapper .left{ 
		margin: 0px 0px 20px;
		text-align: center;
	}

	.landing-event-page .description .wrapper .left,
	.landing-event-page .description .wrapper .right{
		width: 100%; 
	}

	.landing-event-page .description .wrapper .right{
		padding: 0px;
	}

	.landing-event-page .description .wrapper .right p{
		font-size: 18px;
	}

	.landing-event-page .map{
		margin: 50px 0px 0px;
	}

	.landing-event-page .images .wrapper .image{
		width: 15.6%;
	}

	.person .image{
		height: 170px;
	}
}

@media handheld,
only screen and (max-width:1200px),
only screen and (max-device-width:1200px) and (orientation:portrait) {
	.center {
		padding: 0 20px
	}

	.two-col .text {
		padding: 0 20px
	}
	.two-col .text h2 {
		font-size: 23px
	}
	.two-col .text p {
		font-size: 14px !important;
		line-height: 19px !important
	}
	.testimonials .left {
		padding-right: 20px
	}
	.testimonials .right {
		padding-left: 20px
	}
	.accessories .boxes h3 {
		font-size: 14px
	}
	.product-highlight .highlight p {
		font-size: 16px;
		margin: 0 0 5px
	}
	.vision .columns .col:first-child {
		padding-left: 20px
	}
	.vision .columns .col:last-child {
		padding-right: 20px
	}
	.history .center {
		padding: 0 !important
	}
	.history h1 {
		margin-left: 20px !important
	}
	.history .right {
		padding: 20px 0 0
	}
	.history .year {
		padding: 20px !important;
		margin: 0
	}
	.history .year .text.left-margin {
		margin-left: 20px
	}
	.history p {
		font-size: 14px !important;
		line-height: 20px !important
	}
	.history h2 {
		font-size: 18px !important;
		margin-bottom: 10px !important
	}
	.person .text {
		padding: 20px
	}
	.person .text h3 {
		font-size: 18px
	}
	.person .text p {
		font-size: 14px;
		line-height: 20px
	}
	#content.media .post h3 {
		font-size: 20px;
		padding: 0 0 10px
	}
	#content.media .post p.lead {
		font-size: 16px;
		line-height: 24px
	}
	.icons .boxes .box {
		width: 200px
	}
	.icons .boxes .box p {
		font-size: 15px;
		letter-spacing: 0;
		line-height: 21px
	}
	.service #service-box {
		right: 0;
		padding: 20px 10px;
		max-width: 350px
	}
	.service #service-box h1 {
		font-size: 18px;
		margin: 0 0 10px
	}
	.service #service-box p {
		font-size: 16px;
		line-height: 22px
	}
	.service #german-service-box {
		padding: 20px 10px;
		max-width: 350px
	}
	.service #german-service-box p {
		margin: 0;
		font-size: 16px;
		line-height: 22px
	}
	.contact .columns .col1 {
		margin: 0 40px 0 0
	}
	#social h3 {
		font-size: 18px
	}

	.person .image{
		height: 150px;
	}

	.recycling-page .top-image-text{
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 20px;
	}	

	.recycling-page .top-image-text h1 {
		font-size: 28px;
		color: #fff;
	}
	
	.recycling-page .top-image-text p{
		font-size: 18px;
		line-height: 28px;
	}
	
	.recycling-page .top-image-text p:first-of-type{
		font-size: 18px;
		line-height: 28px;
	}	

	.recycling-page .guidelines{
		margin: 0px 0px 30px;
	}
	
	.recycling-page .guidelines h2{
		font-size: 23px;
	}

	.recycling-page .guidelines p{
		font-size: 14px !important;
		line-height: 19px !important;
	}

	.recycling-page .guidlines-points{
		flex-direction: column;
		gap: 20px 0px;
		margin: 0px 0px 30px;
	}

	.recycling-page .guidlines-points .point{
		width: 100%;
		align-items: center;
	}

	.recycling-page .guidlines-points .point p{
		font-size: 14px;
		line-height: 19px;
	}

	.recycling-page .text .products a{
		font-size: 14px;
		line-height: 19px;
	}

	.recycling-page .materials .box h2{
		font-size: 23px;
	}

	.recycling-page .materials .box p{
		font-size: 14px;
		line-height: 19px;
	}

	.recycling-page .two-col{
		padding: 0px;
		margin: 0px !important;
	}

	.recycling-page .two-col .text{
		padding: 30px 20px;
	}	

}

@media handheld,
only screen and (max-width:1010px),
only screen and (max-device-width:1010px) and (orientation:portrait) {
	a,
	li,
	div {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
		-webkit-tap-highlight-color: transparent
	}
	header #menu.screen ul li {
		display: none
	}
	header #mobile-menu {
		display: flex
	}
	header #controls {
		margin: 0 92px 0 0
	}
	header #controls .last-sep {
		display: block
	}
	.center {
		padding: 0 20px !important
	}
	.black-layer {
		display: none !important
	}
	.homepage .center {
		padding: 0 20px !important
	}
	#home-products .carousel .image img {
		height: 150px
	}
	#home-products .carousel h4 {
		font-size: 16px;
		width: 100%;
		text-align: center;
		line-height: 18px
	}

	.center.slider {
		padding: 0 !important
	}
	#slider .slide img {
		max-width: none;
		width: 100%
	}
	#slider .slide-layer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: auto;
		width: 100%;
		padding: 20px;
		background: rgba(239, 239, 239, .7)
	}
	#slider .slide-layer h2 {
		font-size: 16px;
		line-height: 20px
	}
	#slider .slide-layer h2 br {
		display: none
	}
	#slider .slide-layer a.button {
		font-size: 12px;
		margin: 10px auto 0;
		display: inline-block;
		float: none;
		line-height: 18px
	}
	.two-col {
		flex-wrap: wrap;
		margin: 0 0 15px !important
	}
	.two-col .image,
	.two-col .text {
		width: 100%
	}
	.two-col .text {
		padding: 50px 20px
	}
	.two-col .image img {
		width: 100%
	}
	.two-col .text h2,
	.two-col .text p {
		max-width: 100%
	}
	#videos .wrapper {
		flex-wrap: wrap
	}
	#videos .wrapper .video,
	#videos .wrapper .text {
		width: 100%
	}
	#videos .wrapper .text {
		padding: 20px 0 0
	}
	.homepage #newsletter {
		padding: 40px;
		height: auto
	}
	.homepage #newsletter>.wrapper {
		flex-wrap: wrap
	}
	.homepage #newsletter form {
		width: 100%
	}
	.homepage #newsletter form .wrapper {
		padding: 0
	}
	.features .boxes {
		flex-wrap: wrap
	}
	.features .boxes .box {
		width: 100%;
		margin: 10px 0
	}
	#content article.single table.icons tr:first-child {
		display: none
	}
	#content article.single table.icons tr:last-child td img {
		display: inline-block;
		margin: 0 10px 10px 0;
		vertical-align: middle
	}
	#content article.single table.icons td {
		display: block;
		width: 100%
	}
	#content article.single table.six-col.icons td img,
	#content article.single table.five-col.icons td img {
		width: 30px !important;
		height: auto !important
	}
	#content article.single table.icons td {
		padding: 0
	}
	.solutions h2 {
		font-size: 22px
	}
	.icons .boxes,
	.pollutants .boxes,
	.related .boxes,
	.tips .boxes {
		flex-wrap: wrap
	}
	.icons .boxes .box,
	.pollutants .boxes .box,
	.related .boxes .box,
	.tips .boxes .box,
	.solutions .two-col .image,
	.solutions .two-col .text {
		width: 100%
	}
	.icons .boxes .box,
	.related .boxes .box {
		margin: 0 0 20px
	}
	.related .boxes .box h3 {
		font-size: 16px
	}
	.solutions section.middle .text {
		padding: 0;
		text-align: center
	}
	.related-articles section .text {
		padding-top: 50px
	}
	#cta-bottom {
		margin: 20px 0 0
	}
	#content.products #product-container .wrapper .box {
		width: 50%
	}
	#content.products #product-container .wrapper .box:nth-child(3n) {
		border-right: 1px solid #d1d1d1
	}
	#content.products #product-container .wrapper .box:nth-child(2n) {
		border-right: 0
	}
	.product-highlight .info .images,
	.product-highlight .highlight,
	.product .left,
	.product .right {
		width: 100% !important;
		padding-left: 0;
		padding-right: 0
	}
	.testimonials .row,
	.accessories .boxes {
		flex-wrap: wrap
	}
	.product-highlight .info .image {
		height: auto
	}
	.product-highlight .info .images .thumbs .youtube {
		max-height: 124px
	}
	.product-support .tabs ul li {
		width: 100%
	}
	#ask-info .wrapper .flex {
		flex-wrap: wrap
	}
	#ask-info .wrapper .flex .left,
	#ask-info .wrapper .flex .right {
		width: 100%
	}
	#ask-info .right .input-item label {
		width: 35%
	}
	#ask-info .right .input-item textarea {
		width: 65%
	}
	.info-page #main-image {
		height: 240px
	}
	.info-page #main-image img {
		max-width: 145px
	}
	.info-page #main-image h1 {
		font-size: 22px
	}
	.vision .columns {
		flex-wrap: wrap
	}
	.vision .columns .col {
		width: 100% !important;
		padding: 20px !important
	}
	.history .left,
	.history .right {
		width: 100% !important
	}
	.history .year {
		flex-wrap: wrap
	}
	.history .year .text.left-margin {
		margin: 0
	}
	.news .left,
	.news .right {
		width: 100%
	}
	.news .left,
	.news .post {
		margin: 0 0 30px
	}
	.news img {
		width: 100%
	}
	#top-image.blog {
		height: auto
	}
	.leaders .flex-wrapper {
		flex-wrap: wrap
	}
	.leaders .flex-wrapper h2 {
		margin: 0 0 30px
	}
	.leaders .flex-wrapper .person {
		margin: 0 0 30px
	}
	.leaders .flex-wrapper .left {
		margin: 0 0 30px
	}
	.leaders .flex-wrapper .left,
	.leaders .flex-wrapper .right {
		width: 100%
	}
	.leaders.local .person {
		flex-wrap: wrap
	}
	.leaders.local .person .left,
	.leaders.local .person .right {
		width: 100%
	}
	.leaders.local .person .left {
		margin: 0 0 30px
	}
	.person {
		margin: 0 0 30px
	}
	.person .image {
		width: 19%
	}
	.person .text {
		width: 81%;
		height: auto;
		justify-content: center;
	}
	#content.media .post .right,
	#content.media .post .left {
		width: 100%
	}
	form#manual {
		margin: 0
	}
	form#manual .left,
	form#manual .right,
	form#manual label,
	form#manual input[type="text"],
	form#manual input[type="number"],
	form#manual .custom-select {
		width: 100% !important;
		padding: 0 !important
	}
	.contact .columns {
		flex-wrap: wrap
	}
	.contact .columns .col {
		width: 50%
	}
	.contact .columns .col1 {
		margin: 0 0 40px
	}
	#contact-info .left,
	#contact-info .right {
		width: 100%
	}
	#contact-info .right h2 {
		margin: 40px 0
	}
	#contact-info .boxes .box {
		width: 100%
	}
	#service-form .left,
	#service-form .right {
		width: 100%;
		padding: 0
	}
	#service-form input[type="text"],
	#service-form .custom-select,
	#service-form textarea {
		width: 100% !important
	}
	.service-steps .head-step span {
		left: 0 !important
	}
	#service-form .step3 .right {
		padding: 0
	}
	form#register .left,
	form#register .right {
		width: 100%;
		padding: 0
	}
	form#register .right {
		margin: 20px 0
	}
	form#buy-accessories {
		margin: 20px 0 0
	}
	form#buy-accessories .left,
	form#buy-accessories .right {
		width: 100%;
		padding: 0
	}
	form#buy-accessories .right {
		margin: 20px 0
	}
	form#buy-accessories .left label,
	form#buy-accessories .right label {
		margin: 0 0 5px
	}
	form#buy-accessories .right textarea {
		width: 100%
	}
	form#buy-accessories .right {
		margin: 0 0 20px
	}
	form#buy-accessories p.screen {
		display: none
	}
	form#buy-accessories p.mobile {
		display: block
	}
	form#consultation .left {
		width: 100%
	}
	form#consultation input[type="text"],
	form#consultation textarea,
	form#consultation label,
	form#consultation input[type="number"],
	form.general .intl-tel-input {
		width: 100%
	}
	#main-content #faq-products {
		flex-wrap: wrap;
		justify-content: space-between
	}
	#main-content #faq-products .box {
		margin: 0 0 15px;
		width: 28%
	}
	form#register label,
	form#register input[type="text"],
	form#register .custom-select,
	form#register input[type="number"],
	form.general .intl-tel-input {
		width: 100%
	}
	form#buy-accessories label,
	form#buy-accessories input[type="text"],
	form#buy-accessories .custom-select,
	form#buy-accessories input[type="number"],
	form.general .intl-tel-input {
		width: 100%
	}
	#call-back .left,
	#call-back label,
	#call-back textarea,
	#call-back input[type="text"],
	form#consultation input[type="number"],
	form.general .intl-tel-input {
		width: 100%
	}
	#content.accessories #accessories-products .box {
		width: 32%
	}
	#content.accessories #tools .wrapper .box {
		width: 50%
	}
	#content.accessories #accessories-products .layer h3 {
		font-size: 18px
	}
	#content.accessories #accessories-products .layer p {
		font-size: 16px
	}
	#content.accessories #tools .wrapper .box .image {
		height: auto
	}
	#content.accessories #tools .wrapper .box .image img.vertical {
		height: auto;
		width: 100%
	}
	.cleaning-page .block .product {
		width: 33%
	}
	.review {
		padding: 50px 0
	}
	.review .wrapper {
		flex-wrap: wrap
	}
	.review .left {
		padding: 0
	}
	.review .left,
	.review .right {
		width: 100%
	}
	#footer-bottom.mobile {
		display: block
	}
	#footer-bottom.screen {
		display: none
	}
	a.to-top-full {
		right: auto;
		left: 50%;
		transform: translateX(-50%)
	}
	#social {
		text-align: center
	}
	#social .icons {
		float: none;
		margin: 20px 0 0
	}
	#copyright .wrapper {
		height: auto;
		flex-wrap: wrap;
		padding: 20px 0
	}
	#copyright .wrapper .left,
	#copyright .wrapper .right {
		width: 100%;
		text-align: center
	}
	#copyright .wrapper .right {
		margin: 20px 0 0
	}

	#prize-form .left,
	#prize-form .right{ width: 100%; }

	.clean-water-game .head{
		padding: 0px;
	}

	#clean-water-form .wrapper{
		flex-wrap: wrap;
	}

	#clean-water-form .left, 
	#clean-water-form .right{ width: 100%; }

	#clean-water-form .left{ 
		order: 2; 
	}

	#clean-water-form .right{ 
		order: 1; 
	}

	#clean-water-form .left iframe{
		height: auto !important;
	}

	#clean-water-form .left label,
	#clean-water-form .left input{
		width: 100%;
	}

	#clean-water-form .left label{ 
		justify-content: flex-start;
		padding: 0px;
	}
	
	#clean-water-form .share{
		position: relative;
		bottom: auto;
		left: auto;
	}

	.clean-water-game canvas{
		width: 467px !important;
	}


	.landing-event-page #main-image .wrapper{
		flex-wrap: wrap;
	}

	.landing-event-page #main-image .layer{
		width: 100%;
		background: #efefef;
		padding: 20px;
		order: 2;
	}

	.landing-event-page #main-image .image{
		width: 100%;
		order: 1;
	}

	.landing-event-page #main-image .layer h1{
		font-size: 24px;
	}

	.landing-event-page #main-image .layer h1 br{
		display: none;
	}

	.landing-event-page .head p{
		font-size: 21px;
	}

	.landing-event-page .head .left{
		width: 100%;
	}

	#event-form .wrapper{
		flex-wrap: wrap;
	}

	#event-form .wrapper .left,
	#event-form .wrapper .right{ width: 100%; }

	.landing-event-page .map .wrapper,
	.landing-event-page .video .wrapper{
		flex-wrap: wrap;
	}

	.landing-event-page .map .wrapper .left,
	.landing-event-page .map .wrapper .right,
	.landing-event-page .video .wrapper .left,
	.landing-event-page .video .wrapper .right{
		width: 100%; 
	}

	.landing-event-page .video .wrapper .left{
		order: 2;
	}
	.landing-event-page .video .wrapper .right{
		padding: 0px;
		order: 1;
		margin: 40px 0px;
	}

	.landing-event-page .video .wrapper .right p{
		margin: 0px 0px 10px;
	}

	.landing-event-page .map .wrapper .left,
	.landing-event-page .video .wrapper .left{
		justify-content: flex-start;
		align-items: flex-start;
	}

	.landing-event-page .images .wrapper .image{ 
		width: 19.2%; 
	}

	.landing-event-page .images .wrapper .image:nth-child(5n){
		margin: 0 0 1% 0;
	}

	.person .image{
		height: auto;
	}

	.person .image img{
		height: auto;
		max-width: 100%;
	}	

	.recycling-page .image-left .image{
		order: 2;
	}

	.recycling-page .materials{
		margin: 30px 0px 0px;
	}
}

@media handheld,
only screen and (max-width:768px),
only screen and (max-device-width:768px) and (orientation:portrait) {
	header #brand {
		display: block;
		text-align: center
	}
	header #brand #slogen {
		display: none
	}
	.home-products-ch .item{ 
		flex-wrap: wrap;
	}
	
	.home-products-ch .carousel .item a{
		margin: 0px 0px 20px;
	}

	.home-products-ch .carousel .item a:last-child{
		margin: 0px;
	}

	#home-products.home-products-ch .carousel .item h4{
		margin: 10px 0px 0px;
	}

	#home-products .carousel .image img {
		height: 100px
	}

	#home-products .carousel h4 {
		font-size: 14px;
		width: 100%;
		text-align: center;
		line-height: 16px
	}
	#home-image img {
		max-width: none;
		width: 768px
	}
	.home-cols .col {
		width: 100%;
		margin: 0 0 20px;
		padding: 0 0 20px
	}
	.home-cols .col .text {
		padding: 20px;
		margin: 0
	}
	.home-cols .col .read-more {
		position: relative;
		bottom: auto;
		left: auto;
		margin: 0 0 0 20px
	}
	#home-info .col .text {
		background: none
	}
	.homepage #newsletter form .wrapper {
		flex-wrap: wrap
	}
	.homepage #newsletter form .wrapper .input-item,
	.homepage #newsletter form .wrapper .input-item.submit {
		width: 100%
	}
	.healthy-home #welcome-box {
		left: auto;
		top: 50%;
		transform: translateY(-50%);
		bottom: auto
	}
	.healthy-home #welcome-box h1 {
		font-size: 16px
	}
	.healthy-home #welcome-box p {
		font-size: 14px;
		line-height: 20px
	}
	.healthy-home .steps .circle.active,
	.healthy-home .steps .circle-last.active {
		width: 28px;
		height: 28px;
		line-height: 25px;
		top: -14px
	}
	.healthy-home .steps .circle span,
	.healthy-home .steps .circle-last span {
		font-size: 16px
	}
	.service #german-service-box {
		max-width: 300px
	}
	.service #service-box {
		max-width: 200px
	}
	.article-results .item {
		width: 100%
	}
	.products-result .item .image {
		max-width: 80%
	}
	.products-result h4,
	.article-results h4 {
		padding: 0
	}
	#main-content #faq-products {
		flex-wrap: wrap;
		justify-content: space-between
	}
	#main-content #faq-products .box {
		margin: 0 0 15px;
		width: 49%
	}
	#content.accessories #accessories-products .box {
		width: 48%
	}
	#content.accessories #tools .wrapper .box {
		width: 50%
	}
	.news-post .center.narrow {
		padding: 0 !important
	}
	.news-post #content .center {
		padding: 0 20px !important
	}

	#clean-form .row label,
	#clean-form .row.c3 label,
	#clean-form .row.c6 label,
	#clean-form .row.c8 label,
	#clean-form .row.c9 label{ width: 50%; }
	#clean-form .block.last label,
	#clean-form .block.last input[type="text"]{ width: 100%; }
	[type="checkbox"].square.gray + label{ font-size: 13px; }

	#rate-support-form .block .row.c11 label{ width: 30%; }

	#clean-home-form .left,
	#clean-home-form .right{ width: 100%; padding: 0px; }
	#clean-home-form .right label,
	#clean-home-form .right input[type="text"],
	#clean-home-form .right input[type="number"]{ width: 100%; }

	.landing-event-page .video .wrapper .left iframe{
		height: 350px !important;
	}

	.landing-event-page .images .wrapper .image{ 
		width: 24%; 
	}

	.landing-event-page .images .wrapper .image:nth-child(5n){
		margin: 0 1% 1% 0;
	}
	
	#popup .inner{
		width: 90%;
	}

	#popup .inner h2{
		font-size: 24px;
	}

	#popup .inner p{
		font-size: 16px;
		line-height: 21px;
	}
	
	#popup .inner p a{
		font-size: 16px;
	}

	.person .text p {
		margin: 10px 0px;
	}

	.contact-wrapper{
		flex-direction: column;
	}

	.contact-wrapper .contact-form,
	.contact-wrapper .contact-info{
		width: 100%;
	}
}

@media handheld,
only screen and (max-width:640px),
only screen and (max-device-width:640px) and (orientation:portrait) {
	header,
	header .center,
	header #active-search {
		height: 60px
	}
	header .logo {
		width: auto;
		margin: 10px 0 0
	}
	header .logo img {
		width: 60px;
		min-width: 0
	}
	header #mobile-menu {
		top: 18px
	}
	header #controls>div {
		height: 60px
	}
	header #controls .sep {
		height: 35px;
		margin: 11px 10px
	}
	header #controls #region .sub-layer {
		top: 60px
	}
	header #controls #region .sub-layer.mobile-regions .boxes {
		background: #f9f9f9
	}
	#content.products #product-container .wrapper .box {
		width: 100%
	}
	#content.products #product-container .wrapper .box:nth-child(3n),
	#content.products #product-container .wrapper .box {
		border: 0;
		border-bottom: 1px solid #d1d1d1;
		padding: 20px 0
	}
	#content.products #product-container .wrapper .box .image {
		height: auto
	}
	#content.products #product-container .wrapper .box .image img,
	#content.products #product-container .wrapper .box .image img.vertical {
		max-width: 150px;
		height: auto
	}
	.contact .columns {
		flex-wrap: wrap
	}
	.contact .columns .col {
		width: 100%;
		padding: 0;
		margin: 0 0 20px
	}
	.contact .columns .col .text h3 {
		margin: 20px 0
	}
	#top-image figcaption {
		display: none
	}
	#content.accessories #accessories-products .box {
		width: 100%
	}
	#content.accessories #tools .wrapper .box {
		width: 100%
	}
	.cleaning-page .block .product {
		width: 50%
	}
	.clean-water-game .image span{
		bottom: 0px;
	}
	.clean-water-game canvas{ 
		width: 100% !important;
	}	
	.clean-water-game .gm4html5_div_class{
		margin: 0px;
	}
	.clean-water-game .logout{
		margin: 20px 0px;
	}
	#clean-water-form .input-item.submit{
		flex-wrap: wrap;
	}
	#clean-water-form .input-item.submit input{
		display: block;
		width: 100%;
		max-width: 340px;
		margin: 0px;
	}
	#clean-water-form .input-item.submit input:first-child{
		margin: 0px 0px 20px;
	}
	.landing-event-page #main-image .layer h1{
		font-size: 18px;
	}
	.landing-event-page .head p{
		font-size: 18px;
		line-height: 24px;
	}

	.landing-event-page .images .wrapper .image{ 
		width: 32%; 
	}

	#clean-form.de .input-item.radio p{
		display: none;
	}
	#distributors .wrapper .col{
		width: 100%;
	}

	footer #social {
		padding: 20px 0;
	}
	footer #social .wrapper .icons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center
	}
	footer #social i {
		margin: 0 10px 20px;
		width: 40px;
		height: 40px;
		font-size: 22px
	}
}

@media handheld,
only screen and (max-width:480px),
only screen and (max-device-width:480px) and (orientation:portrait) {
	#call-back-fixed .normal {
		display: none
	}
	#call-back-fixed.hu .normal{
		display: flex;
	}

	#call-back-fixed img {
		position: fixed;
		bottom: 20px;
		right: 0
	}

	#call-back-fixed.hu img{
		bottom: 10px;
	}

	#game-fixed{
		bottom: 115px;
	}
	#slider .slide img {
		width: auto;
		height: 180px
	}
	#slider .slide-layer {
		padding: 10px
	}
	#slider .slide-layer h2 {
		font-size: 13px;
		line-height: 21px
	}
	#slider .slider-nav {
		top: 25%;
		width: 30px;
		height: 30px;
		background-size: 100% 100% !important
	}
	#videos .wrapper .video iframe {
		height: 320px
	}
	.icons .boxes .box {
		width: 60%;
		margin: 0 auto
	}
	.two-col {
		padding: 0 20px
	}
	.features .boxes .box {
		width: 60%;
		margin: 20px auto
	}
	.service .service-image {
		display: none
	}
	.service #german-service-box {
		max-width: 100%;
		transform: none;
		bottom: 0;
		top: auto;
		z-index: 9000
	}
	.service #service-box {
		right: auto;
		top: auto;
		transform: none;
		bottom: 0;
		max-width: 100%;
		top: 20%;
		transform: none
	}
	.service #german-service-box p,
	.service #german-service-box p a,
	.service #service-box p {
		font-size: 13px;
		line-height: 16px
	}
	#service-form label {
		width: 100% !important
	}
	#service-form .select .error-message {
		bottom: -20px
	}
	.healthy-home .steps {
		margin: 40px 0
	}
	.healthy-home .steps .circle.active,
	.healthy-home .steps .circle-last.active {
		width: 18px;
		height: 18px;
		line-height: 15px;
		top: -9px
	}
	.healthy-home .steps .circle span,
	.healthy-home .steps .circle-last span {
		font-size: 13px
	}
	.healthy-home .step .input-item {
		max-width: 100%
	}
	.healthy-home .step h2 {
		font-size: 18px
	}
	.healthy-home .step h3 {
		margin: 0 0 10px
	}
	.healthy-home .answer p {
		font-size: 16px
	}
	#ask-info h2 {
		font-size: 24px
	}
	#ask-info .input-item label,
	#ask-info input[type="text"],
	#ask-info .right .input-item label,
	#ask-info .right .input-item textarea {
		width: 100%
	}
	#ask-info .info-graph img {
		width: 50%
	}
	#ask-info .info-graph a.button {
		font-size: 13px
	}
	#content .share .facebook {
		margin: 0 30px 15px 0
	}
	#content .share .wrapper {
		width: 100%;
		flex-wrap: wrap
	}
	#content .share .wrapper span {
		width: 100%;
		margin: 0 0 15px
	}
	.person {
		margin: 0 0 30px
	}
	.person .image {
		width: 30%
	}
	.person .text {
		width: 70%;
		height: auto
	}
	.person .text h3 {
		font-size: 15px
	}
	#main-content #faq-products .box {
		width: 100%;
		margin: 0 0 20px
	}
	#accessories-form form .inner-inputs {
		padding: 0 20px
	}
	.cleaning-page h1,
	.cleaning-page h2 {
		font-size: 24px
	}
	.cleaning-page .block .product {
		width: 100%;
		border-right: 0;
		border-bottom: 1px solid #d1d1d1;
		margin: 0;
		padding: 30px 0
	}
	.review form .right .input-item {
		flex-wrap: wrap
	}
	.review form .right .input-item label {
		margin: 0 0 10px
	}
	.review .right label,
	.review form .right input[type="text"] {
		width: 100%
	}
	#copyright .wrapper .left,
	#copyright .wrapper .left a {
		font-size: 12px
	}
	#copyright .wrapper .right {
		font-size: 14px
	}
	#content h1{
		font-size: 24px;
		margin: 0px 0px 20px;
	}
	.prize-page #content h2{
		font-size: 18px;
		margin: 0px 0px 20px;
	}
	.prize-page .time,
	.prize-page p.label.margin{
		margin: 0px 0px 20px;
	}
	#prize-form .input-item label{
		width: 100%;
		margin: 0px 0px 5px;
	}
	#prize-form input[type="number"], 
	#prize-form input[type="text"], 
	#prize-form textarea{ width: 100%; }

	.prize-page [type="checkbox"]:not(:checked) + label, 
	.prize-page [type="checkbox"]:checked + label { padding: 0px 0px 0px 30px; }

	.clean-water-game .head p{
		font-size: 16px;		
	}

	.clean-water-game iframe{
		height: 180px !important;
	}

	#clean-water-form .left{
		padding: 20px 0px 0px;
	}

	.landing-event-page .map .wrapper .right iframe{
		height: 180px !important;
	}

	.landing-event-page .video .wrapper .left iframe{
		height: 230px !important;
	}

	.landing-event-page .images .wrapper .image{ 
		max-height: 70px;
	}

	#clean-form.de .input-item.text label,
	#clean-form.de .input-item.text input{ width: 100%; }

	#clean-form.de .input-item.text label{
		margin: 0px 0px 5px;
	}

	#clean-form.de .input-item.privacy p{
		word-wrap: break-word;
	}

	#popup .inner{
		padding: 10px;
	}

	#popup .inner h2{
		font-size: 16px;
		margin: 0px 0px 10px;
	}

	#popup .inner p{
		margin: 0px 0px 5px;
		font-size: 13px;
		line-height: 18px;
	}

	#popup .inner p a{
		font-size: 13px;
	}

	.recycling-page .top-image-text h1 {
		font-size: 24px;
		color: #fff;
	}
	
	.recycling-page .top-image-text p{
		font-size: 14px;
		line-height: 19px;
	}
	
	.recycling-page .top-image-text p:first-of-type{
		font-size: 14px;
		line-height: 19px;
	}	
}

@media handheld,
only screen and (max-width:360px),
only screen and (max-device-width:360px) and (orientation:portrait) {
	.recycling-page .top-image-text p:first-of-type{
		margin: 10px 0px;
	}
}