@media screen and (max-width: 67em) {
	#hero > .spacelarge {
		display: none;
	}
	#hero .flex.row {
		flex-direction: column;
	}
	#hero video, #hero > .flex img {
			position: static;
			width: 100%;
			height: auto;
			border-radius: 8px;
			transform: rotate(4deg);
			margin-bottom: 18px;
		}
		#hero .flex.row > div {
			order: 2;
		}
		#hero p.large {
			font-size: 1em;
		}
}
@media screen and (min-width: 67em) {
	#hero .flex.row > div {
		flex: 45% 0 0;
	}
	#hero video, #hero > .flex img {
		border-radius: 8px;
	    height: auto;
		width: 622px;
		transform: rotate(4deg);
		margin: 36px 0;
	}
}

@media screen and (max-width: 67em) {
	#raw-plan .flex.row {
		flex-direction: column;
	}
	#raw-plan .flex.row #how-steps {
		order: 2;
	}
}

/* QUIZ */
#gut-quiz {
	min-height: 400px;
}
#gut-quiz .question {
	width: 100%;
	clear: both;
	text-align: center;
}
#gut-quiz .question h2 {
	display: block;
	text-align: center;
	font-size: 2em;
}
/*.question.error input {
	animation: shake 0.82s cubic-bezier(.36,07,19,97) both;
	transform: translate3d(0, 0, 0);
	border: 1px solid #F97276!important;
}
.question.error input:focus, .question.error input:valid { border: 1px solid #fff!important; }*/
.question.error {
	animation: shake 0.82s cubic-bezier(.36,07,19,97) both;
	transform: translate3d(0, 0, 0);
}
.question.error h2 {
	color: #F97276;
}

#question-holder.gut-holder .row.question { display:none; }
#question-holder.gut-holder .row.question.active { display:block; }


/* MIKE STEPS */
#gut-btn-prev {
	position: absolute;
    left: -50px;
    background-color: #F97276;
    color: #F97276;
}
#gut-btn-next {
	position: absolute;
    right: -50px;
    background-color: #F97276;
    color: white;
}
#gut-btn-prev, #gut-btn-next {
	width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
    border-radius: 50%;
    font-size: 19px;
    cursor: pointer;
    z-index: 600;
}
#gut-btn-next i {
	width: 20px;
	height: 19px;
    background: url('../media/global-sprite.webp') -148px -153px;
    background-size: 315px 210px;
}
#gut-btn-prev i {
	width: 20px;
	height: 19px;
    background: url('../media/global-sprite.webp') -5px -185px;
    background-size: 315px 210px;
}
#gut-btn-prev i, #gut-btn-next i {
	display: inline-block;
	margin-top: 10px;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
@media screen and (min-width: 50em) {
	
	#gut-btn-prev, #gut-btn-next { top: 75px; }
	
}
@media screen and (min-width: 50em) and (max-width: 1400px) {
	
	#gut-btn-prev { left: 50px; }
	#gut-btn-next { right: 30px; }
	
}
@media screen and (max-width: 67em) {
	
	.page-template-template-gut-health-quiz #main.inner-narrow {
		padding: 0 1.125em;
	}
	#gut-btn-next, #gut-btn-prev {
		top: 360px;
		z-index: 200;
	}
	#gut-btn-next { right: 10px; top: -62px; }
	#gut-btn-prev { left: 10px; top: -62px; }
	#gut-quiz input[type="text"], #gut-quiz input[type="number"], #gut-quiz .select2-container--default .select2-selection--single {
		width: 100%;
		padding: 18px 14px;
		font-size: 24px;
	}
	#gut-quiz #dogsname {
		height: 72px;
	}
	#gut-quiz .select2-container--default .select2-selection--single .select2-selection__arrow b {
		margin-left: -20px;
	}
	#gut-quiz input.picker-input[type="text"] { max-width: 89%; }
	#weight-holder label { font-size: 13px; }
	#activity .field img {
		height: 53px;
		width: auto;
	}
	.ui.checkbox .box, .ui.checkbox label {
		font-size: 13px;
		line-height: 1.2em !important;
		padding: 7px 0;
	}
	
}

@media screen and (min-width: 50em) and (max-width: 67em) {
	
	#gut-btn-next, #gut-btn-prev {
    	top: 169px;
    }
    #gut-quiz .select2-container--default .select2-selection--single .select2-selection__arrow b {
		margin-left: -30px;
	}
	
}

/* Input styling */
#gut-quiz input[type="text"], #gut-quiz input[type="number"] {
	outline: none;
	font-size: 30px;
	float: none;
	clear: both;
	text-align: center;
	display: block;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid #ffffff;
	box-shadow: 0 0 24px 0 rgba(0,0,0,0.11);
	padding: 20px;
	max-width: 500px;
	width: 100%;
	transition: all 0.4s ease;
}
input.needsatt { border: 1px solid #F97276!important; }
#dob-holder div, #gut-quiz-p-3 div { display: inline-block; }
#dob-holder div label, #gut-quiz-p-3 div label {
	display: block;
	margin-top: 10px;
}
#dob-holder #doggyyears {
	display: block;
	margin-top: 90px;
}
#dogdob { display: none; }
#weight-holder label {
	display: block;
	max-width: 440px;
    margin: 10px auto 0 auto;
    display: block;
    text-align: center;
}
#gut-quiz input.picker-input[type="text"] {
	/*max-width: 160px;*/
	max-width: 500px;
    width: 100%;
	display: inline-block;
	margin: 0 10px;
}
.grouped.fields.radios.vertical .field {
	text-align: left;
}
.vertical .ui.radio {
	line-height: 32px;
}
.vertical .ui.radio label {
	padding-left: 32px;
}
.ui.radio.checkbox {
    min-height: 23px;
}
.ui.checkbox .box, .ui.checkbox label {
    cursor: auto;
    position: relative;
    display: block;
    outline: 0;
    font-size: 1em;
    z-index: 123;
}
.center .ui.checkbox label { display: inline-block; }
.ui.checkbox input.hidden+label, .ui.checkbox input.hidden~label {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 29px;
}
#feeding .ui.checkbox input.hidden~label {
	line-height: 19px;
	padding-top: 20px;
}
.ui.checkbox input.hidden:disabled+label {
	cursor: not-allowed;
	opacity: .5;
}
.ui.checkbox {
    position: relative;
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    outline: 0;
    vertical-align: baseline;
    font-style: normal;
    min-height: 20px;
    font-size: 15px;
    line-height: 22px;
    min-width: 17px;
}
.ui.checkbox input[type=checkbox], .ui.checkbox input[type=radio], .ui.checkbox input[type=email] {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0!important;
    outline: 0;
    z-index: 3;
    width: 24px;
    height: 24px;
    box-shadow: none;
}
.ui.radio.checkbox .box:before, .ui.radio.checkbox label:before {
    content: '';
    -webkit-transform: none;
    transform: none;
    width: 24px;
    height: 24px;
    border-radius: 500rem;
    top: 1px;
    left: 50%;
    margin-left: -12px;
}
.ui.checkbox .box:before, .ui.checkbox label:before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    content: '';
    background: #fff;
    border-radius: .21428571rem;
    -webkit-transition: border .1s ease,opacity .1s ease,-webkit-transform .1s ease,-webkit-box-shadow .1s ease;
    transition: border .1s ease,opacity .1s ease,-webkit-transform .1s ease,-webkit-box-shadow .1s ease;
    transition: border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease;
    transition: border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease,-webkit-transform .1s ease,-webkit-box-shadow .1s ease;
    border: 1px solid #84D8E9;
}
.ui.checkbox .box:after, .ui.checkbox label:after {
    position: absolute;
    font-size: 14px;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    text-align: center;
    opacity: 0;
    color: rgba(0,0,0,.87);
    -webkit-transition: border .1s ease,opacity .1s ease,-webkit-transform .1s ease,-webkit-box-shadow .1s ease;
    transition: border .1s ease,opacity .1s ease,-webkit-transform .1s ease,-webkit-box-shadow .1s ease;
    transition: border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease;
    transition: border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease,-webkit-transform .1s ease,-webkit-box-shadow .1s ease;
}
.ui.radio.checkbox input:indeterminate~.box:after, .ui.radio.checkbox input:indeterminate~label:after {
    opacity: 0;
}
.ui.checkbox input:indeterminate~.box:after, .ui.checkbox input:indeterminate~label:after {
    font-size: 12px;
    content: '\e801';
}
.ui.radio.checkbox .box:after, .ui.radio.checkbox label:after {
    width: 24px;
    height: 24px;
    border-radius: 500rem;
    background-color: #84D8E9;
	border: none;
	line-height: 27px;
	top: 0;
	left: 50%;
    margin-left: -12px;
}
.vertical .ui.radio.checkbox label:before, .vertical .ui.radio.checkbox label:after {
	left: 0;
	margin-top: 4px;
}
.ui.radio.checkbox input:checked~.box:before, .ui.radio.checkbox input:checked~label:before {
    background-color: #fff;
}
.ui.checkbox input:checked~.box:before, .ui.checkbox input:checked~label:before {
    background: #fff;
}
.ui.checkbox:not(.radio) input:checked~label:after {
    color: transparent;
    font-size: 0;
    content: "";
    height: .3125rem;
    width: .565rem;
    background-color: transparent;
    border-left: .1875rem solid;
    border-bottom: .1875rem solid;
    border-color: rgba(0,0,0,.95);
    left: 6px;
    top: 6px;
    /* margin-left: -0.325rem; */
    /* margin-top: -0.365rem; */
    display: block;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition: all 0.2s linear;
}
.ui.checkbox input:checked~.box:after, .ui.checkbox input:checked~label:after { opacity: 1; }

.ui.radio.checkbox input:checked~.box:after, .ui.radio.checkbox input:checked~label:after, .option.simple input:checked~label:after {
	background: #84D8E9 url('../media/global-sprite.webp') -267px -14px;
    background-size: 166px 117px;
    opacity: 1;
    z-index: 77 !important;
    content: ' ';
}
.ui.radio.checkbox input:checked~.box:after, .ui.radio.checkbox input:checked~label:after {
	background-position: -252px -13px;
    background-size: 157px 115px;
}

.grouped.fields.radios:not(.vertical) {
	display: flex;
	justify-content: center;
	position: relative;
}
.grouped.fields.radios:not(.vertical):after {
	width: 100%;
	height: 1px;
	content: ' ';
	background: #84D8E9;
	position: absolute;
	left: 0;
	top: 12px;
}
.grouped.fields.radios .field {
	flex-grow: 1;
	flex-basis: 0;
    text-align: center;
}
.grouped.fields.checkboxes {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
	text-align: left;
}
.grouped.fields.checkboxes .field {
	margin-bottom: 9px;
}
.grouped.fields.checkboxes #top-level-health .field, .grouped.fields.checkboxes #intollerances .field {
	padding: 0 50px;
}
.grouped.fields.checkboxes #top-level-health .ui.checkbox #health-none~label, .grouped.fields.checkboxes #intollerances .ui.checkbox #intollerence-environmental~label, .grouped.fields.checkboxes #intollerances .ui.checkbox #intollerence-unknown~label {
	line-height: 18px;
}
.grouped.fields.checkboxes .ui.checkbox input[type=checkbox] {
	top: 2px;
}
.grouped.fields.checkboxes .ui.radio.checkbox label:before, .grouped.fields.checkboxes .ui.radio.checkbox label:after {
	left: 0;
	top: 2px;
	margin-left: 0;
	text-indent: 0; 
}
.grouped.fields.checkboxes .ui.radio.checkbox label:before, .grouped.fields.checkboxes .ui.radio.checkbox label:after {
	border-radius: 2px;
}
.grouped.fields.checkboxes .ui.radio.checkbox label:before, .grouped.fields.checkboxes .ui.radio.checkbox label:after {
	margin-left: -12px;
}

#activity img, #doggrowing img, #obesity img, #feeding img { margin-bottom: 10px; }
#feeding img { opacity: .25; }
#feeding .ui.radio.checkbox input:checked {
	opacity: 1;
}
#feeding .ui.radio.checkbox input:checked ~ img { opacity: 1; }

@media screen and (min-width: 50em) {
	
	#health-concerns .grouped.fields.checkboxes .field {
		width: 50%;
		float: left;
	}
	#health-concerns .grouped.fields.checkboxes .field:nth-of-type(2n) {
		clear: left;
	}
	#health-concerns .grouped.fields.checkboxes .field:first-of-type {
		width: 100%;
	}
	
}


/* SELECT2 CUSTOMISATIONS */
#gut-quiz .select2-container {
	/*max-width: 530px;*/
	max-width: 500px;
	width: 100%;
	display: block!important;
    margin: 0 auto!important;
}
#gut-quiz .select2-container .selection {
	padding-left: 14px;
    padding-right: 38px;
    background: #fff;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    border: none;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.11);
    display: block;
}
#gut-quiz .select2-container--default .select2-selection--single {
	outline: none;
	font-size: 30px;
	padding: 18px 0;
	width: auto;
	float: none;
	clear: both;
	text-align: center;
	height: auto;
	border: none;
	background: none;
}
#gut-quiz  .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 28px;
    right: 17px;
}
#gut-quiz  .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #84D8E9 transparent transparent transparent;
	border-width: 7px 6px 0 6px;
}
#gut-quiz  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #84D8E9 transparent;
    border-width: 0 6px 7px 6px;
}
#gut-quiz  .select2-container .select2-selection--single .select2-selection__rendered {
	overflow: visible;
	line-height: 42px;
	padding: 0;
}
#gut-quiz  .select2-dropdown { border-color: #84D8E9; }


@media screen and (min-width: 50em ) {
	
	#sizealert { top: 100px; }
	#sizealert form label {
		width: 20%;
		float: left;
		line-height: 39px;
	}
	#sizealert form input {
		width: 75%;
		float: right;
	}
		
}

/* RESULTS */
#question-holder.gut-holder .row.question.results p, #question-holder.gut-holder .row.question.results .tile {
	text-align: left;
}
#gut-score-summary {
	background: white;
    padding: 20px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    margin-bottom: 0;
}
#gut-insights {
	background: white;
	border: 1px solid #000;
}
#gut-insights .tile {
	border-bottom: 1px solid #000;
	display: flex;
}
#gut-insights .tile:last-of-type {
	border-bottom: none;
}
#gut-insights .tile > * {
	padding: 10px;
}
#gut-insights .tile strong {
	border-right: 1px solid #000;
	margin-right: 10px;
	flex: 22% 0 0;
}
#gut-score-badge {
	display: flex;
    border: 1px solid #000;
    background: white;
    align-items: center;
}
#gut-score-badge > span {
	padding: 20px;
}
#gut-score-badge .grade {
	border-right: 1px solid #000;
	flex: 22% 0 0;
    padding: 20px 0;
}
#gut-score-badge .grade > span {
	border-radius: 50%;
	padding: 12px;
	border: 5px solid #F97276;
	transform: rotate(-24deg);
    display: inline-block;
    height: 63px;
    width: 63px;
    text-align: center;
    line-height: 30px;
    font-family: 'Gooper';
}
#gut-score-badge .score {
	font-weight: normal;
    font-size: 25px;
    font-family: 'Gooper';
}
.cta-group {
	margin-top: 18px;
}
.cta-group a {
	margin: 0 8px;
}
@media screen and (max-width: 67em ) {
	
	#gut-insights .tile {
		flex-direction: column;
	}
	#gut-insights .tile strong {
		padding-bottom: 0;
		margin-right: 0;
		border: 0;
	}
	.cta-group a {
		margin: 8px 0;
	}
	.product-row.food.inner-wrapper {
		padding: 0;
	}
	.product-row.food .flex.mobile-collapse {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
	.product-row.food .flex.mobile-collapse p {
		font-size: 11px;
	}
	.product-row.food .flex.mobile-collapse > div {
		margin-bottom: 0 !important;
	}
	.product-row.food .rounded:last-of-type {
		grid-column: 1 / -1;
	}
	
}