/* ------- fonts ------- */
@font-face{
	font-family:'Roboto';
	src:url('font/reg.woff2') format('woff2'),
		url('font/reg.woff') format('woff'),
		url('font/reg.ttf') format('truetype');
	font-weight:normal;
}
@font-face{
	font-family:'Roboto';
	src:url('font/bld.woff2') format('woff2'),
		url('font/bld.woff') format('woff'),
		url('font/bld.ttf') format('truetype');
	font-weight:bold;
}
@font-face{
	font-family:'arrows';
	src:url('font/arrows.woff2') format('woff2'),
		url('font/arrows.woff') format('woff'),
		url('font/arrows.ttf') format('truetype');
}

/* ------- general stuph -------*/
html{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	overflow:hidden;
	width:100%;
	height:100%;
}
*, *:before, *:after {
	box-sizing:inherit;
	-webkit-text-size-adjust:none;
}
body{
	width:100%;
	height:100%;
	margin:0;
	overflow:hidden;
	background:#fff;
}
.accelerate{
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
.hidden{
	display:none;
}
.invisible{
	position:absolute;
	width:0px;
	height:0px;
	visibility:hidden;
}
.text{
	font-family:'Roboto','Helvetica','Arial',sans-serif;
	color:#788288;
}
.text.bold{
	font-weight:bold;
}
.text.paragraph{
	font-size:16px;
	font-weight:normal;
}
.text.big{
	font-size:42px;
	letter-spacing:-1px;
}
.linklist{
	position:fixed;
	left:0;
	bottom:0;
	padding:4px 8px;
	transform:translate3d(0,0,0);
	transition:transform .2s ease;
}
.linklist .text{
	font-size:10px;
}
.linklist.open{
	transform:translate3d(0,-48px,0);
}
.linklist a{
	cursor:pointer;
}
a{
	font-family:'Roboto','Helvetica','Arial',sans-serif;
	color:#788288;
	transition:color .15s linear, text-shadow .15s linear;
}
a.green:hover, a.text.green:hover{
	color:#6ed246 !important;
	text-shadow:0 0 12px #6ed246;
}
a.violet:hover, a.text.violet:hover{
	color:#8264f0 !important;
	text-shadow:0 0 12px #8264f0;
}
.button, .buttonclose{
	position:relative;
	min-width:100px;
	padding:8px 12px;
	color:#788288;
	font-family:'Roboto','Helvetica','Arial',sans-serif;
	font-size:14px;
	text-align:center;
	line-height:18px;
	text-decoration:none;
	border:2px solid;
	border-radius:4px;
	transition:color .15s linear, background-color .15s linear, border-color .15s linear;
	-ms-touch-action:manipulation;
	touch-action:manipulation; 
}
.button:hover{
	background-color:#6ED246;
}
.button.green:hover, .buttonclose.green:hover{
	color:#fff;
	border-color:#6ED246;
	background-color:#6ED246;
}
.button.violet:hover, .buttonclose.violet:hover{
	color:#fff;
	border-color:#8264F0;
	background-color:#8264F0;
}
.button.big{
	font-size:20px;
	letter-spacing:-1px;
	padding:12px 16px;
}
.button.close{
	position:absolute;
	top:0;
	bottom:0;
	right:12px;
	width:30px;
	height:30px;
	min-width:0;
	margin:auto;
	padding:4px 6px;
	color:#fff;
	border-color:#fff;
	cursor:pointer;
	letter-spacing:0;
}
.logo-bs{
	display:inline-block;
	width:400px!important;
	max-width:100%!important;
	height:auto!important;
}
.logo{
	position:fixed;
	left:32px;
	top:32px;
	height:28px;
	pointer-events:none;
	transition:transform .15s ease;
}
.logo .svginj{
	width:169px;
	height:28px;
	margin-right:16px;
	fill:#788288;
	transition:fill .15s linear;
}
.logo span{
	position:relative;
	top:-7px;
	font-size:20px;
	font-weight:normal;
	line-height:28px;
	letter-spacing:-.5px;
	transition:color .15s linear;
}
#wavescontainer{
	position:absolute;
	top:50%;
	width:100%;
	height:200px;
	-webkit-transform:translate3d(0,-50%,0);
	transform:translate3d(0,-50%,0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	pointer-events:none;
}
.section{
	/*transition-delay:0.3s;
	transition:opacity .7s linear;
	opacity:0;*/
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
/*.section.active{
opacity:1;
}*/
.bg{
	position:absolute;
	width:100%;
	height:100%;
	background-size:224px;
	background-position:center;
	opacity:.1;
	pointer-events:none;
}
#header,#footer,#footer_eu{
	position:fixed;
	top:-48px;
	width:100vw;
	height:48px;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	transition:transform .15s ease;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
#footer,#footer_eu{
	top:100%;
	text-align:center;
}
#footer_eu{
	height:auto;
	padding:16px;
	z-index:9997;
}
#footer span{
	display:block;
	width:100%;
	color:#fff;
	line-height:48px;
}
#footer_eu span{
	display:none;
	width:calc(100% - 48px);
	color:#fff;
}
#footer_eu span.open{
	display:block;
}
#header.dog, #footer.dog, #footer_eu.dog, .landscapeoverlay.dog{
	background:linear-gradient(to right, #6ed246 0%,#1E641E 100%);
}
#header.cat, #footer.cat, .landscapeoverlay.cat{
	background:linear-gradient(to right, #8264F0 0%,#28286E 100%);
}
#header.open{
	-webkit-transform:translate3d(0,48px,0);
	transform:translate3d(0,48px,0);
}
#footer.open{
	-webkit-transform:translate3d(0,-48px,0);
	transform:translate3d(0,-48px,0);
}
#footer_eu.open{
	-webkit-transform:translate3d(0,-100%,0);
	transform:translate3d(0,-100%,0);
}
#header.open + .logo{
	-webkit-transform:translate3d(0,-22px,0);
	transform:translate3d(0,-22px,0);
}
#header.open + .logo span, #header.open + .logo .svginj{
	color:#fff;
	fill:#fff;
}
#header .button{
	position:absolute;
	right:9px;
	top:9px;
	min-width:0;
	padding:4px 6px;
	color:#fff;
	border-color:#fff;
	cursor:pointer;
	letter-spacing:0;
	white-space: nowrap;
}
#header .storelocator-container{
	position:absolute;
	right:120px;
	transform:translateY(-64px);
	transition:transform .35s ease;
}
#header .button.storelocator{
	padding:4px 6px 5px;
	transition:color .15s linear,background-color .15s linear,border-color .15s linear;
	animation:heartbeat 2s ease infinite;
}
@keyframes heartbeat{
	0%,10%,100%,50%{
		transform:scale(1);
	}
	5%{
		transform:scale(1.05);
	}
	15%{
		transform:scale(1.1);
	}
}
#header .button.pdf{
	right:78px;
	padding:4px 6px 5px 6px;
	transform:translateY(-64px);
	transition:transform .35s ease, color .15s linear, background-color .15s linear, border-color .15s linear;
}
#header .button.pdf.open, #header .storelocator-container.open{
	transform:translateY(0);
}
#header.dog.open .button:hover, #footer_eu .button:hover{
	color:#6ED246;
	border-color:#fff;
	background-color:#fff;
}
#header.cat.open .button:hover{
	color:#8264F0;
	border-color:#fff;
	background-color:#fff;
}
.dropdown{
	position:absolute;
	right:9px;
	top:56px;
	padding:4px 0px;
	border:2px solid;
	color:#788288;
	background-color:#fff;
	border-radius:4px;
	-webkit-transform:scale(0);
	transform:scale(0);
	transform-origin:88% -32px;
	opacity:0;
	transition:transform .2s ease,opacity .1s linear;
}
.dropdown:before{
	position:absolute;
	font-family:"arrows";
	content: "\e901";
	color:#fff;
	text-shadow: -3px 0 #788288, 0 3px #788288, 3px 0 #788288;
	font-size:32px;
	-webkit-transform:scale(1,-1);
	transform:scale(1,-1);
	right:-2px;
	top:-18px;
	pointer-events:none;
}
.dropdown.open{
	-webkit-transform:scale(1);
	transform:scale(1);
	opacity:1;
}
.dropdown.dog{
	border-color:#6ED246;
}
.dropdown.cat{
	border-color:#8264F0;
}
.dropdown.dog:before{
	text-shadow:-3px 0 #6ED246, 0 3px #6ED246, 3px 0 #6ED246;
}
.dropdown.cat:before{
	text-shadow:-3px 0 #8264F0, 0 3px #8264F0, 3px 0 #8264F0;
}
.dditem{
	font-family:'Roboto','Helvetica','Arial',sans-serif;
	font-size:14px;
	line-height:18px;
	text-decoration:none;
	padding:8px 8px;
	transition:color .1s linear, background-color .1s linear;
	cursor:pointer;
	-ms-touch-action:manipulation;
	touch-action:manipulation; 
}
.dditem.disabled{
	cursor:default;
	pointer-events:none;
}
.dditem.disabled span{
	-webkit-filter:grayscale(100%);
	filter:grayscale(100%);
	filter:gray;
}
.dditem span{
	margin-right:8px;
}
.dditem.dog:hover{
	color:#fff;
	background-color:#6ED246;
}
.dditem.cat:hover{
	color:#fff;
	background-color:#8264F0;
}
.dditem:first-child{
	margin-top:0;
}
.dditem:last-child{
	margin-bottom:0;
}
.step{
	position:absolute;
	width:50%;
	height:100%;
	opacity:.2;
}
.step .svginj{
	position:absolute;
	top:50%;
	width:100%;
	height:100%;
	-webkit-transform:translate3d(-25%,-52%,0) rotate(-20deg) scale(.75);
	transform:translate3d(-25%,-52%,0) rotate(-20deg) scale(.75);
}
.step .svginj.one path#two, .step .svginj.one path#three, .step .svginj.two path#one, .step .svginj.two path#three, .step .svginj.three path#one, .step .svginj.three path#two{
	display:none;
}
#act_images_dog, #act_images_cat, #wght_images, #age_images{
	-webkit-flex:0.9;
	flex:0.9;
	position:relative;
	width:100%;
}
.picture{
	position:absolute;
	bottom:8px;
	width:100%;
	height:95%;
	-webkit-transform:scale(1.5) rotate(7deg) translate3d(0,0,0);
	transform:scale(1.5) rotate(7deg) translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	opacity:0;
	transition:transform 0.3s ease, opacity 0.3s ease;
	pointer-events:none;
}
.picture.visible{
	-webkit-transform:scale(1) rotate(0deg);
	transform:scale(1) rotate(0deg);
	opacity:1;
	pointer-events:auto;
}
.picture .svginj, .picture img{
	position:relative;
	left:50%;
	width:80%;
	height:100%;
	-webkit-transform:translate3d(-50%,0,0);
	transform:translate3d(-50%,0,0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.content{
	-js-display:flex;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:column;
	flex-flow:column;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	width:40%;
	height:100%;
	padding-top:48px;
	padding-bottom:48px;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.content span.text.big.bold, .content span.text.paragraph{
	display:inline-block;
	position:relative;
	left:10%;
	width:80%;
	line-height:1em;
}
.content span.text.paragraph{
	min-height:4.8em;
	line-height:1.2em;
	text-align:justify;
	margin-bottom:8px;
}
.sliderarea{
	position:relative;
	width:100%;
}
#sldr_act, #sldr_wght, #sldr_age{
	display:inline-block;
	position:relative;
	left:10%;
	width:80%;
	margin-top:36px;
	margin-bottom:88px;
}
.landscapeoverlay, .pdfoverlay{
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:9998;
	font-size:28px;
	background:#fff;
}
.landscapeoverlay span, .pdfoverlay span{
	position:absolute;
	width:100%;
	top:70%;
	text-align:center;
}
.landscapeoverlay.dog span, .landscapeoverlay.cat span{
	color:#fff;
}
.landscapeoverlay .svginj{
	position:absolute;
	left:50%;
	top:40%;
	height:40%;
	fill:#788288;
}
.landscapeoverlay.dog .svginj, .landscapeoverlay.cat .svginj{
	fill:#fff;
}
.devicerot-animation{
	-webkit-animation:device-rotation ease 4s infinite;
	-webkit-transform-origin:50% 50%;
	animation:device-rotation ease 4s infinite;
	transform-origin:50% 50%;
}
@-webkit-keyframes device-rotation{
	0%,75%,100%{
		-webkit-transform:translate(-50%,-50%) rotate(-90deg);
	}
	40%,65%{
		-webkit-transform:translate(-50%,-50%) rotate(0deg);
	}
}
@keyframes device-rotation{
	0%,75%,100%{
		transform:translate(-50%,-50%) rotate(-90deg);
	}
	40%,65%{
		transform:translate(-50%,-50%) rotate(0deg);
	}
}
.pdfoverlay{
	z-index:9990;
	text-align:center;
	background:rgba(120,130,136,.85);
}
.pdfoverlay.open{
	display:block;
}
.pdfoverlay div{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:50%;
	height:50%;
	margin:auto;
}
.pdfoverlay img, .pdfoverlay span{
	display:block;
	position:static;
	color:#fff;
	max-width:100%;
	height:50%;
	margin:auto;
}

/* ------- selection ------- */
.selection_bg{
	position:absolute;
	left: 0;
	top: 0;
	width:100%;
	height:100%;
	background-size:224px;
	opacity:.1;
	transition:opacity .15s linear;
}
.selection_bg:hover{
	opacity:.25;
}
.selection_bg:hover + .selection.content_dog img, #barfselection.dog .selection:hover img, #beuteselection .selection:hover img{
	-webkit-transform:scale(.95);
	transform:scale(.95);
}
.selection_bg:hover + .selection.content_cat img, #barfselection.cat .selection:hover img{
	-webkit-transform:scale(.95);
	transform:scale(.95);
}
.selection_bg:hover + .selection.content_dog span, #barfselection.dog .selection:hover span, #beuteselection .selection:hover span{
	color:#6ED246;
}
.selection_bg:hover + .selection.content_cat span, #barfselection.cat .selection:hover span{
	color:#8264F0;
}
.selection_bg:hover + .selection.content_dog .button, #barfselection.dog .selection:hover .button, #beuteselection .selection:hover .button{
	color:#fff;
	border-color:#6ED246;
	background-color:#6ED246;
}
.selection_bg:hover + .selection.content_cat .button, #barfselection.cat .selection:hover .button{
	color:#fff;
	border-color:#8264F0;
	background-color:#8264F0;
}
.selection_bg.dog{
	background-position:right top;
	background-image:url('images/bg_dog.svg');
}
.selection_bg.cat{
	background-position:left top;
	background-image:url('images/bg_cat.svg');
}
.selection{
	position:absolute;
	width:50%;
	height:100%;
	color:#788288;
	cursor:pointer;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-ms-touch-action:manipulation;
	touch-action:manipulation;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	transition:color .15s linear;
}
button.selection{
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
}
.selection.dog{
	left:0px;
}
.selection.dog:hover{
	color:#6ED246;
}
.selection.cat{
	left:50%;
}
.selection.cat:hover{
	color:#8264F0;
}
.selection.content_dog, .selection.content_cat{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:100%;
	height:60%;
	margin:auto;
	padding:0 1rem;
	text-align:center;
	pointer-events:none;
}
.selection.content_dog img, .selection.content_cat img{
	max-width:100%;
	height:65%;
	margin-bottom:12px;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	transition:transform .15s ease;
}
.selection.content_dog span, .selection.content_cat span{
	display:inline-block;
	width:100%;
	color:inherit;
	margin-bottom:20px;
	transition:color .15s linear;
}
.selection.content_dog .button, .selection.content_cat .button{
	display:inline-block;
}
#barfselection.dog{
	display:flex;
	flex-wrap:wrap;
	padding-top:48px!important;
	padding-bottom:48px!important;
}
#barfselection.dog > .selection{
	display:block;
	position:static;
	width:33.33333%;
	height:50%;
}
#barfselection.dog > .selection:nth-child(5), #barfselection.dog > .selection:nth-child(6){
	width: 50%;
}
#barfselection.dog > .selection > .selection{
	margin-top:2.5%;
}
#barfselection.dog .selection.petmanbarf, #barfselection.cat .selection.petmanbarf{
	left:0px;
}
#barfselection.dog .selection.naturalbarf, #barfselection.dog .selection.barfinone{
	left:50%;
}
#barfselection.dog .selection.barfinone, #barfselection.dog .selection.beute{
	top:50%;
}
#barfselection.dog .selection.wholepreybarf{
	display:none;
}
#barfselection.cat .selection.petmanbarf, #barfselection.cat .selection.naturalbarf, #barfselection.cat .selection.beute, #barfselection.cat .selection.onetwodry{
	display:none;
}
#barfselection.cat .selection.wholepreybarf{
	left:50%;
}
#barfselection .selection.content_dog{
	width:100%;
}
#beuteselection{
	display:flex;
}
#beuteselection > .selection{
	width:33.33333%;
	height:50%;
}
#beuteselection > .selection:nth-child(3), #beuteselection > .selection:nth-child(6){
	left:33.333333%;
}
#beuteselection > .selection:nth-child(4), #beuteselection > .selection:nth-child(7){
	left:66.666666%;
}
#beuteselection > .selection:nth-child(5), #beuteselection > .selection:nth-child(6), #beuteselection > .selection:nth-child(7){
	top:50%;
}

/* TODO: DELETE THIS ONCE MAKRELE GOES ONLINE */
#beuteselection > .selection:nth-child(5), #beuteselection > .selection:nth-child(6){
	width:50%
}
#beuteselection > .selection:nth-child(6){
	left:50%;
}

.text.welcome{
	position:absolute;
	left:0;
	right:0;
	bottom:24px;
	width:60%;
	margin:auto;
	text-align:center;
	font-size:0.8em;
	line-height:1.3em;
}

/* ------- Activity ------- */
#act_normal_active #outside, #age_images .picture #second, #age_images .picture #third{
	-webkit-transform:scale(1,0);
	transform:scale(1,0);
	transform-origin:256px 205px;
	transition:transform 0.25s ease;
}
#act_normal_active #outside.open{
	-webkit-transform:scale(1,1);
	transform:scale(1,1);
}

/* ------- Weight ------- */
#wght_images .picture, #age_images .picture{
	transition:none;
	-webkit-transform:none;
	transform:none;
	opacity:1;
}
#wght_images .picture .svginj #cat, #wght_images .picture .svginj #dog{
	transform-origin:253.1px 0px;
}

/* ------- Age ------- */
#age_images .picture #second{
	transform-origin:253.37px 316.59px !important;
}
#age_images .picture #third{
	transform-origin:259.74px 173.12px !important;
}

/* ------- Result page ------- */
#result .content{
	-webkit-flex-flow:row;
	flex-flow:row;
	width:100% !important;
	padding-bottom:8px;
}
#res_images{
	-webkit-flex:1;
	flex:1;
	position:relative;
}
#res_images .picture{
	display:none;
	transition:none;
	-webkit-transform:none;
	transform:none;
}
#res_images .picture.visible{
	display:block;
}
#result table{
	-webkit-align-self:center;
	align-self:center;
	width:50%;
	margin-right:5%;
	border-spacing:0;
	color:#788288;
}
#result table tr:first-child{
	text-align:center;
	font-size:14px;
}
#result table tr:first-child .text{
	margin-bottom:8px;
}
#result table tr:not(:last-child):not(:first-child) td{
	padding:0;
	padding-top:4px;
	padding-bottom:8px;
	font-weight:bold;
}
#result table tr:not(:last-child):not(:first-child) td:first-child{
	padding-left:4px;
	padding-right:4px;
	text-align:center;
	text-decoration:none;
	border-radius:4px 0px 0px 4px;
	transition:color .15s linear, background-color .15s linear, border-color .15s linear;
	-ms-touch-action:manipulation;
	touch-action:manipulation; 
}
/*#result table tr:nth-child(2) td:first-child{
border-top-left-radius:4px;
border-top-right-radius:4px;
}
#result table.dog tr:nth-last-child(2) td:first-child,#result table.cat tr:nth-last-child(3) td:first-child{
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
}*/
#result table td.clickable{
	position:relative;
	overflow:visible;
}
#result table.dog td.clickable:hover, #result table.dog td.clickable.hover{
	border-color:#6ed246 !important;
	background-color:#6ed246;
	color:#fff;
	cursor:pointer;
}
#result table.cat td.clickable:hover, #result table.cat td.clickable.hover{
	border-color:#8264f0 !important;
	background-color:#8264f0;
	color:#fff;
	cursor:pointer;
}
#result table td.clickable:before{
	content:attr(data-info);
	display:block;
	position:absolute;
	left:0;
	top:50%;
	color:#fff;
	font-family:'Roboto','Helvetica','Arial',sans-serif;
	font-size:1em;
	padding:4px 6px;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
	pointer-events:none;
	vertical-align:middle;
	opacity:0;
	transform:translate(-100%,-50%);
	transition:opacity .15s linear 0s;
}
#result table td.clickable:hover:before, #result table td.clickable.hover:before{
	opacity:1;
	transition:opacity .15s linear .25s;
}
#result table.dog td.clickable:before{
	background:#6ed246;
}
#result table.cat td.clickable:before{
	background:#8264f0;
}
#result table td:nth-of-type(even){
	border-left:2px solid #788288;
	text-align:right;
	white-space:nowrap;
}
#result table .text{
	line-height:1em;
	color:inherit;
}
#result .sliderarea{
	display:flex;
	align-items:center;
	justify-content:center;
}
#sldr_res{
	flex:1;
	left:0;
	max-width:400px;
	height:16px;
	margin:12px 24px 16px 0;
}
#sldr_res .noUi-handle{
	top:-18px;
}
#sldr_res .noUi-pips-horizontal{
	height:0;
	padding:4px 0;
}
#result .sliderarea .text{
	flex:.25;
	margin-bottom:5px;
	text-align:center;
}
#result table a{
	display:none;
	line-height:10px;
	text-align:center !important;
	cursor:pointer;
}
#result table .text.paragraph{
	left:0;
	width:100%;
	margin-top:8px;
	font-size:9px;
	font-weight:normal;
	text-align:justify;
}
#result .linklist{
	position:absolute;
	left:auto;
	right:0;
	bottom:0;
	transform:none;
}
#result_image_dog #meat, #result_image_dog #vegetables, #result_image_dog #bone, #result_image_dog #fruits, #res_images #oil{
	-webkit-transform:translate3d(0,-60px,0);
	transform:translate3d(0,-60px,0);
	opacity:0;
	transition:transform 0.4s ease, opacity 0.4s ease;
}
#result_image_dog #meat.open, #result_image_dog #vegetables.open, #result_image_dog #bone.open, #result_image_dog #fruits.open{
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	opacity:1;
}
#result_image_dog #meat{
	transition-delay:0.6s;
}
#result_image_dog #vegetables{
	transition-delay:1.2s;
}
#result_image_dog #bone{
	transition-delay:1.8s;
}
#result_image_dog #fruits{
	transition-delay:2.4s;
}
#result_image_cat #mix1, #result_image_cat #mix2, #result_image_cat #mix3{
	-webkit-transform:translate3d(0,40px,0);
	transform:translate3d(0,40px,0);
	opacity:0;
	transition:transform 0.4s ease, opacity 0.4s ease;
}
#result_image_cat #mix1.open, #result_image_cat #mix2.open, #result_image_cat #mix3.open{
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	opacity:1;
}
#result_image_cat #mix1{
	transition-delay:0.6s;
}
#result_image_cat #mix2{
	transition-delay:1.2s;
}
#result_image_cat #mix3{
	transition-delay:1.8s;
}
#result_image_dog #oil.open{
	-webkit-animation:oil-animation ease 1s 3s forwards;
	animation:oil-animation ease 1s 3s forwards;
}
#result_image_cat #oil.open{
	-webkit-animation:oil-animation ease 1s 2.4s forwards;
	animation:oil-animation ease 1s 2.4s forwards;
}
@-webkit-keyframes oil-animation{
	0%{
		-webkit-transform:translate3d(0,-20px,0);
		opacity:0;
	}
	75%{
		opacity:.7;
	}
	100% {
		-webkit-transform:translate3d(0,180px,0);
		opacity:0;
	}
}
@keyframes oil-animation{
	0%{
		transform:translate3d(0,-20px,0);
		opacity:0;
	}
	75%{
		opacity:.7;
	}
	100% {
		transform:translate3d(0,180px,0);
		opacity:0;
	}
}

/* ------- Modal Content ------- */
.tingle-modal-box__content .text.big{
	display:block;
	line-height:1;
	margin-bottom:1rem;
}

/* ------- Media Queries ------- */
@media screen and (max-height:600px){
	#beuteselection .button.big{
		padding:8px 12px;
		font-size:14px;
		letter-spacing:-1px;
	}
}
@media screen and (min-width:1200px){
	.content{
		width:40% !important;
	}
	.text.welcome{
		width:50%;
	}
	#result table td:nth-of-type(even){
		text-align:center;
	}
}
@media screen and (max-width:880px){
	#result table .text.big{
		font-weight:bold;
		font-size:36px;
	}
	.text.welcome{
		width:90%;
	}
}
@media screen and (min-width:768px){
	.content{
		width:70%;
	}
	.remodal{
		max-width:700px;
	}
}
@media screen and (max-width:821px) and (orientation:portrait){
	#result .content{
		-webkit-flex-flow:column;
		flex-flow:column;
	}
	#result table{
		width:70%;
		margin:auto;
	}
}
@media screen and (max-width:900px) and (orientation:landscape){
	.landscapeoverlay{
		display:block;
	}
	#main,#header,.logo,.dropdown,.remodal{
		display:none;
	}
}
@media screen and (max-width:821px){
	.content{
		width:90%;
	}
	#result table .text.big{
		font-weight:bold;
		font-size:28px;
	}
	#result table td.clickable:before{
		display:none;
	}
	.linklist .text span:first-child{
		display:none;
	}
}
@media screen and (max-width:480px){
	.content{
		padding-top:36px;
		padding-bottom:36px;
	}
	#header{
		top:-36px;
		height:36px;
	}
	#header.open{
		-webkit-transform:translate3d(0,36px,0);
		transform:translate3d(0,36px,0);
	}
	#header.open + .logo{
		-webkit-transform:translate3d(0,-6px,0);
		transform:translate3d(0,-6px,0);
	}
	#footer_eu{
		padding:8px;
	}
	#footer{
		height:36px;
	}
	#footer.open{
		-webkit-transform:translate3d(0,-36px,0);
		transform:translate3d(0,-36px,0);
	}
	#footer span{
		line-height:36px;
	}
	#header .button{
		right:3px;
		top:3px;
		min-width:0;
	}
	#header .storelocator-container{
		right:92px;
	}
	#header .button.pdf{
		right:48px;
		padding:4px 6px;
	}
	#header .icon-arrow_drop_down:before{
		content:'';
		margin-left:0px;
	}
	.dropdown{
		right:7px;
		top:44px;
		transform-origin:88% -24px;
	}
	.dditem{
		padding:4px 4px;
	}
	.logo{
		top:16px;
		left:16px;
	}
	.logo .svginj{
		margin-bottom:8px;
		width:97px;
		height:16px;
	}
	.logo span{
		top:-12px;
		font-size:12px;
		letter-spacing:0px;
	}
	.pdfoverlay div{
		width:100%;
	}
	#act_images_dog, #act_images_cat, #wght_images, #age_images, #res_images{
		-webkit-flex:1;
		flex:1;
	}
	.picture .svginj{
		width:100%;
	}
	.selection{
		position:static;
	}
	.selection, #barfselection.dog .selection, #barfselection.cat .selection{
		left:0;
		width:100%;
		height:50%;
	}
	#barfselection.dog .selection{
		height:20%;
	}
	.selection.content_dog img, .selection.content_cat img{
		margin-bottom:0px;
	}
	.selection.content_dog span, .selection.content_cat span{
		margin-bottom:6px;
	}
	.selection_bg.dog{
		background-position:right bottom;
	}
	#barfselection.dog, #barfselection.cat, #beuteselection{
		padding:0 0 48px 0 !important;
	}
	#barfselection .selection.content_dog{
		top:36px;
		bottom:36px;
		margin:auto;
	}
	#beuteselection{
		flex-direction:row;
		flex-wrap:wrap;
	}
	#beuteselection > .selection{
		width:50%;
		height:33.333333%;
	}
	.text.welcome{
		display:none;
	}
	.button.big{
		font-size:16px;
		padding:4px;
	}
	.text.paragraph{
		font-size:12px;
	}
	.text.big{
		font-size:28px;
	}
	.linklist{
		padding:0;
	}
	.linklist.open{
		transform:translate3d(0,-36px,0);
	}
	#result .linklist{
		display:none;
	}
	.content span.text.big.bold, .content span.text.paragraph{
		left:0;
		width:100%;
	}
	#sldr_act, #sldr_wght, #sldr_age{
		margin-top:16px;
		margin-bottom:72px;
	}
	.noUi-value{
		padding:2px 4px !important;
	}
	.step{
		top:55%;
		width:100%;
		height:45%;
	}
	.step .svginj{
		-webkit-transform:translate3d(-25%,-52%,0) rotate(-20deg);
		transform:translate3d(-25%,-52%,0) rotate(-20deg);
	}
	#result table{
		width:90%;
		margin:auto;
	}
	#result table .text{
		text-align:left;
		font-weight:normal;
		font-size:12px;
	}
	#result table a{
		display:block;
	}
	#result table .text.paragraph{
		display:none;
	}
	#result table tr:not(:last-child) td:first-child{
		padding:0px;
	}
}
@media screen and (max-width:650px){
	.logo span{
		display:none;
	}
}
@media screen and (max-width:400px){
	#result table .text.big{
		font-size:24px;
	}
	#result table td{
		padding-top:4px;
		padding-bottom:4px;
	}
	#result .sliderarea .text:first-child{
		display:none;
	}
}
@media screen and (max-width:361px){
	#barfselection{
		text-align:center;
	}
	#barfselection span{
		display:inline-block;
	}
	#barfselection .button{
		display:inline-block;
	}
	.text.big{
		font-size:20px !important;
	}
}
@media screen and (max-height:768px){
	.text.big{
		font-size:28px;
	}
	.text.welcome{
		width:70%;
	}
}
@media screen and (max-height:479px){
	.text.big{
		font-size:20px;
	}
	#result table tr:not(:last-child) td:first-child{
		padding:0px;
	}
	.text.welcome{
		width:90%;
	}
	#barfselection.dog, #barfselection.cat, #beuteselection{
		padding:40px 0 36px 0 !important;
	}
	#barfselection.dog .selection{
		height:30%;
	}
}

/* ------- Country flags ------- */
.flag{
	display:inline-block;
	background:url('images/flags.png') no-repeat;
	background-size:100%;
	width:24px;
	height:16px;
	overflow:hidden;
	margin-bottom:-3px;
}
.flag-cr{background-position:0 0%;}
.flag-cz{background-position:0 9.090909%;}
.flag-de{background-position:0 18.181818%;}
.flag-dk{background-position:0 27.272727%;}
.flag-en{background-position:0 36.363636%;}
.flag-es{background-position:0 45.454545%;}
.flag-fr{background-position:0 54.545455%;}
.flag-hu{background-position:0 63.636364%;}
.flag-it{background-position:0 72.727273%;}
.flag-nl{background-position:0 81.818182%;}
.flag-pl{background-position:0 90.909091%;}
.flag-si{background-position:0 100%;}

/* ------- Icons ------- */
.icon-arrow_drop_down:before{
	font-family:"arrows";
	content: "\e901";
	margin-left:4px;
}
.icon-arrow_forward:before{
	font-family:"arrows";
	content: "\e900";
}

/* ------- NoUISlider ------- */
.noUi-target,.noUi-target *{
	box-sizing: border-box;
	moz-box-sizing: border-box;
	moz-user-select: none;
	ms-touch-action: none;
	ms-user-select: none;
	touch-action: none;
	user-select: none;
	webkit-touch-callout: none;
	webkit-user-select: none;
}
.noUi-target{
	direction: ltr;
	position: relative;
}
.noUi-base{
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 4px;
	border:2px solid #788288;
	z-index: 1
}
.noUi-origin{
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
.noUi-handle{
	position: relative;
	z-index: 1;
}
.noUi-stacking .noUi-handle {
	z-index: 10
}
.noUi-state-tap .noUi-origin {
	-webkit-transition: left .3s, top .3s;
	transition: left .3s, top .3s
}
.noUi-state-drag *{
	cursor: inherit!important
}
.noUi-base{
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	backface-visibility:hidden;
}
.noUi-horizontal{
	height: 24px
}
.noUi-horizontal .noUi-handle{
	width: 48px;
	height: 48px;
	left: -24px;
	top: -14px;
}
.noUi-background{
	background: #F0F4FA;
}
.noUi-connect.dog{
	background:linear-gradient(to right, #6ed246 0%,#1E641E 100%);
	-webkit-transition: background 450ms;
	transition: background 450ms
}
.noUi-connect.cat{
	background:linear-gradient(to right, #8264F0 0%,#28286E 100%);
	-webkit-transition: background 450ms;
	transition: background 450ms
}
.noUi-target {
	border-radius: 4px;
}
.noUi-handle {
	border: 2px solid;
	border-color:#788288;
	border-radius: 4px;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	cursor: default;
	transition:border-color 0.1s linear;
}
.noUi-handle.dog{
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yNjkgMjQ1IDMyIDI0IiB3aWR0aD0iMzIiIGhlaWdodD0iMjQiPjxwYXRoIGZpbGw9IiM2RUQyNDYiIGQ9Ik0tMjQ5IDI0NXY2LjRsNS42IDUuNi01LjYgNS42djYuNGwxMi0xMi0xMi0xMnptLTggMHY2LjRsLTUuNiA1LjYgNS42IDUuNnY2LjRsLTEyLTEyIDEyLTEyeiIvPjwvc3ZnPg==);
}
.noUi-handle.cat{
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yNjkgMjQ1IDMyIDI0IiB3aWR0aD0iMzIiIGhlaWdodD0iMjQiPjxwYXRoIGZpbGw9IiM4MjY0RjAiIGQ9Ik0tMjQ5IDI0NXY2LjRsNS42IDUuNi01LjYgNS42djYuNGwxMi0xMi0xMi0xMnptLTggMHY2LjRsLTUuNiA1LjYgNS42IDUuNnY2LjRsLTEyLTEyIDEyLTEyeiIvPjwvc3ZnPg==);
}
.noUi-active.dog{
	border-color:#6ed246;
}
.noUi-active.cat{
	border-color:#8264f0;
}
[disabled] .noUi-connect,
[disabled].noUi-connect {
	background: #788288
}
[disabled] .noUi-handle,
[disabled].noUi-origin {
	cursor: not-allowed
}
.noUi-pips,
.noUi-pips * {
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
.noUi-pips {
	position: absolute;
	font-family:'Roboto','Helvetica','Arial',sans-serif;
	font-size:12px;
	color: #788288
}
.noUi-value{
	position: absolute;
	padding:6px 8px;
	white-space:nowrap;
	-webkit-transform:translate(-50%,0);
	transform:translate(-50%,0);
}
.noUi-value-sub {
	color: #788288;
	font-size: 10px
}
.noUi-marker {
	position: absolute;
	background: #788288;
}
.noUi-marker-large,
.noUi-marker-sub {
	background: #788288
}
.noUi-pips-horizontal {
	padding: 10px 0;
	height: 66px;
	top: 100%;
	left: 0;
	width: 100%;
}
.noUi-value-horizontal {
	margin-top: 24px;
	color:#788288;
	background-color:#fff;
	border:2px solid;
	border-radius:4px;
	text-decoration:none;
	cursor:pointer;
	-ms-touch-action:manipulation;
	touch-action:manipulation;
	outline:none;
	transition:color .15s linear, background-color .15s linear, border-color .15s linear;
}
.noUi-value-horizontal.green:hover{
	color:#fff;
	border-color:#6ED246;
	background-color:#6ED246;
}
.noUi-value-horizontal.violet:hover{
	color:#fff;
	border-color:#8264F0;
	background-color:#8264F0;
}
.noUi-value-horizontal.noUi-value-sub {
	padding-top: 15px
}
.noUi-marker-horizontal.noUi-marker {
	margin-left: -1px;
	width: 2px;
	height: 5px
}
.noUi-marker-horizontal.noUi-marker-sub {
	height: 10px
}
.noUi-marker-horizontal.noUi-marker-large {
	height: 15px
}

/* ------- tingle.js ------- */
.tingle-modal *{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.tingle-modal{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:1000;
	-js-display:flex;
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	visibility:hidden;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-moz-box-orient:vertical;
	-moz-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	overflow-y:auto;
	background:rgba(120,130,136,.85);
	opacity:0;
	-webkit-transition:opacity .2s ease;
	-moz-transition:opacity .2s ease;
	-o-transition:opacity .2s ease;
	transition:opacity .2s ease;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-moz-box-align:center;
	-ms-flex-align:center;
	align-items:center;
}
.tingle-modal:after{
	content:"";
	display:inline-block;
	margin-bottom:48px;
}
/* modal
-------------------------------------------------------------- */
.tingle-modal__close{
	position:fixed;
	top:0px;
	right:18px;
	z-index:1000;
	padding:0;
	width:40px;
	height:40px;
	border:none;
	background:transparent;
	color:#fff;
	font-size:40px;
	line-height:normal;
	cursor:pointer;
}
.tingle-modal-box{
	position:relative;
	margin-top:48px;
	margin-bottom:auto;
	width:600px;
	max-width:90%;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	background:#fff;
	opacity:1;
	cursor:auto;
	-webkit-transition:-webkit-transform .3s ease;
	-moz-transition:-moz-transform .3s ease;
	-o-transition:-o-transform .3s ease;
	transition:transform .3s ease;
	-webkit-transform:scale(.95);
	-moz-transform:scale(.95);
	-ms-transform:scale(.95);
	-o-transform:scale(.95);
	transform:scale(.95);
	-webkit-flex-shrink:0;
	-ms-flex-negative:0;
	flex-shrink:0;
}
.tingle-modal-box__content{
	padding:2em;
}
/* state
-------------------------------------------------------------- */
.tingle-enabled{
	overflow:hidden !important;
	/*height:100vh !important;*/
}
.tingle-modal--visible{
	visibility:visible;
	opacity:1;
}
.tingle-modal--visible .tingle-modal-box{
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
}
.tingle-modal--overflow{
	padding-top:0;
}

/* ------- FullPage.js ------- */
html.fp-enabled,.fp-enabled body{
	margin:0;
	padding:0;
	overflow:hidden;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.fp-section{
	position:relative;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.fp-section.fp-table,.fp-slide.fp-table{
	display:table;
	table-layout:fixed;
	width:100%;
}
.fp-notransition{
	-webkit-transition:none !important;
	transition:none !important;
}
.fp-auto-height.fp-section,.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell{
	height:auto !important;
}
.fp-responsive .fp-auto-height-responsive.fp-section,.fp-responsive .fp-auto-height-responsive .fp-slide,.fp-responsive .fp-auto-height-responsive .fp-tableCell {
	height:auto !important;
}