* {
	box-sizing: border-box;
	line-height: 1rem;
	font-size: 0.666666rem;
	margin: 0;
	text-rendering: optimizelegibility;
	font-smooth: auto;
	-webkit-font-smoothing: auto;
}

@font-face {
	font-family: "OpenSans";
	src: url("fonts/OpenSans-Regular-webfont.eot");
	src: url("fonts/OpenSans-Regular-webfont.eot?#iefix")
			format("embedded-opentype"),
		url("fonts/OpenSans-Regular-webfont.woff") format("woff"),
		url("fonts/OpenSans-Regular-webfont.ttf") format("truetype"),
		url("fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "OpenSans-Light";
	src: url("fonts/OpenSans-Light-webfont.eot");
	src: url("fonts/OpenSans-Light-webfont.eot?#iefix")
			format("embedded-opentype"),
		url("fonts/OpenSans-Light-webfont.woff") format("woff"),
		url("fonts/OpenSans-Light-webfont.ttf") format("truetype"),
		url("fonts/OpenSans-Light-webfont.svg#open_sanslight") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "OpenSans-Semibold";
	src: url("fonts/OpenSans-Semibold-webfont.eot");
	src: url("fonts/OpenSans-Semibold-webfont.eot?#iefix")
			format("embedded-opentype"),
		url("fonts/OpenSans-Semibold-webfont.woff") format("woff"),
		url("fonts/OpenSans-Semibold-webfont.ttf") format("truetype"),
		url("fonts/OpenSans-Semibold-webfont.svg#open_sansextrabold")
			format("svg");
	font-weight: normal;
	font-style: normal;
}

html {
	font-size: 1.5em;
	color: #444;
}

body {
	padding: 0;
	font-family: "OpenSans", sans-serif;
}

body.public {
	display: flex;
	flex-flow: column nowrap;
	min-height: 100vh;
	background-color: #fbfbfb;
}

.btn a{
color: white !important;
}

body.public > * {
	width: 100%;
}

body #app {
	flex-grow: 1;
}

.main-container {
	height: 100%;
	display: flex;
	flex-flow: column;
}

.main-container .content.main {
	flex-grow: 1;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

code {
	font-family: monospace;
}

ul,
ol {
	padding-left: 2rem;
}

p + p {
	margin-top: 1rem;
}

img {
	vertical-align: bottom;
}

h1,
h2,
h3 {
	line-height: 2rem;
	color: #555;
	font-size: 0.585416667rem;
	font-family: "OpenSans-Light", sans-serif;
}

h1 {
	font-size: 1.75rem;
	font-family: "OpenSans-Light", sans-serif;
}

h2 {
	font-size: 1.33333rem;
	font-weight: 200;
	text-align: center;
}

h3 {
	font-family: "OpenSans", sans-serif;
}

h1 *,
h2 *,
h3 * {
	font-size: inherit;
}

a {
	cursor: pointer;
}

/*animation logo*/
.placeholder {
	margin: 0 auto;
	height: 100vh;
}

input {
	padding: 0;
	border: 1px solid HSL(0, 0%, 93%);
	border-radius: 2px;
	padding-right: calc(1rem / 3);
	color: HSL(0, 0%, 30%);
	font-size: 0.541666667rem;
	outline: none;
	padding-left: 0.75rem;
}

input[type="text"],
input[type="email"],
input[type="password"] {
	height: 2rem;
	margin-left: 0.5rem;
}

input[type="radio"] {
	height: 0.5rem;
	margin-right: 0.25rem;
}

input[type="submit"] {
	cursor: pointer;
}

::-webkit-input-placeholder {
	color: hsl(0, 0%, 70%);
}
:-moz-placeholder {
	color: hsl(0, 0%, 70%);
	opacity: 1;
}
::-moz-placeholder {
	color: hsl(0, 0%, 70%);
	opacity: 1;
}
:-ms-input-placeholder {
	color: hsl(0, 0%, 70%) !important;
}

.grid-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.grid-container > * {
	background-size: cover;
	background-position: 50% 50%;
	flex-basis: 14rem;
	height: 10rem;
	display: flex;
	flex-flow: row;
	flex-grow: 1;
	transition: transform 200ms;
}

.grid-container > *:hover {
	transform: scale(1.05);
}

.no-animate:hover {
	transform: none !important;
}

.animal-cover {
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 3;
	left: 0;
	top: 0;
}

.animal-cover.fulfilled,
.animal-cover.adopted {
	background-color: rgba(124, 178, 66, 0.8);
}
.animal-cover.died {
	background-color: rgba(112, 116, 104, 0.8);
}

.cover-container {
	position: relative;
	width: 100%;
}
.cover-content {
	position: absolute;
	z-index: 4;
	color: #fff;
	width: 100%;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.cover-container .cover-content h3 {
	font-size: 0.83335rem;
	line-height: 1rem;
	text-align: center;
	color: #fff;
}

.cover-container .cover-content .dog-icon {
	height: 2rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	width: auto;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.cover-container .cover-content .dog-icon.fulfilled {
	background-image: url("/img/animal-fulfilled.png");
}
.cover-container .cover-content .dog-icon.died {
	background-image: url("/img/animal-died.png");
}
.cover-container .cover-content .dog-icon.adopted {
	background-image: url("/img/animal-adopted.png");
}

.cover-container .cover-content p {
	font-size: 0.6rem;
	text-align: center;
}

.cover-container .cover-content .btn {
	display: flex;
	width: 5rem;
	flex-wrap: nowrap;
	flex-direction: row;
	background: #fff;
	margin: 0 auto;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.cover-container .cover-content .btn p {
	color: #707468;
	font-size: 0.4rem;
	line-height: 0.6rem;
	vertical-align: middle;
	width: 3.5rem;
	height: 2rem;
	padding-right: 0.25rem;
	padding-top: 0.4rem;
}

.cover-container .cover-content .btn .state-btn {
	background-image: url("/img/state-btn.png");
	background-repeat: no-repeat;
	flex-grow: 1.5;
	background-position-y: 0.5rem;
	background-position-x: 0.4444444rem;
}

.animal-element {
	display: flex;
	flex-flow: column;
	flex-basis: 10rem;
	flex-shrink: 1;
	margin: 0.5rem;
	padding: 0.5rem;
	height: auto;
	position: relative;
	border-radius: 3px;
	max-width: 10.9rem;
	min-width: 10.9rem;
}

.animal-element .name-container {
	line-height: 1rem;
	margin-top: 0.5rem;
	display: inline-flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
}

.animal-element .name {
	font-size: 0.666666667rem;
	color: #444;
	width: 80%;
	word-break: normal;
}

.animal-element .show-text {
	font-size: 0.458333333rem;
	color: #ed0061;
}
.animal-element .shelter {
	font-size: 0.416666667rem;
	line-height: 0.5rem;
	color: #777;
	flex-grow: 1;
	display: inline-flex;
}

.shelter .name {
	display: flex;
	flex-flow: column;
	padding: 0.5rem 1rem;
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px black, -1px -1px 2px black;
	background: -moz-linear-gradient(top, #2f2727, rgba(26, 130, 247, 0));
	width: 100%;
	height: 50%;
}

.resource-list-pagination {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	padding-left: 0;
	margin-top: 0.5rem;
}

.resource-list-pagination .btn {
	list-style: none;
	background-color: hsl(89, 46%, 48%);
	color: #fff;
	height: 1.75rem;
	min-width: 7.5rem;
	padding: 0 1rem;
	text-align: center;
	max-width: 7.5rem;
	margin: 0.5rem;
	display: inline-block;
	height: 100%;
	width: 100%;
	line-height: 1.75rem;
	text-align: center;
	font-size: 0.625rem;
}

.resource-list-pagination .btn:hover {
	background-color: hsl(93, 47%, 42%);
}

.resource-list-pagination li:nth-child(2) {
}

.animal {
	display: flex;
	flex-flow: row;
	justify-content: flex-start;
	background-color: #fff;
	padding: 0rem 1rem 1rem 1rem;
	border-radius: 5px;
	margin-bottom: 1.5rem;
	box-shadow: 0px 1px 1px 0px hsl(0, 0%, 93%);
}

.animal .column {
	display: flex;
	flex-flow: column;
	width: 100%; /* support for the stupid ie11 flexbox implementation*/
}

.animal .column > div:nth-child(2) {
	display: flex;
	flex-flow: row;
}
.animal .column > div:nth-child(1) {
	padding-top: 1rem;
	font-size: 0.8rem;
	line-height: 0.8rem;
}

.animal .details div,
.animal .details div span {
	font-size: 0.541666667rem !important;
	overflow-x: hidden;
}

.animal .details a.shelter-link {
	margin-bottom: 1rem;
}

.animal .details div:last-child {
	font-size: 0.541666667rem !important;
}

.animal .details .status:last-child,
.animal .details .progress-bar:last-child {
	font-size: 0.4rem !important;
}

.animal p {
	max-width: none;
}

.animal .image {
	margin-right: 1rem;
	margin-top: 1rem;
	flex-basis: 9rem;
	flex-shrink: 0.1;
}

.animal .profile-photo {
	height: 7rem;
	width: 100%;
	flex-grow: 1;
	flex-shrink: 1;
	align-self: flex-start;
	background-size: cover;
	background-position: 50% center;
	overflow: auto;
}

.animal .learn-more {
	border: 1px solid red;
	display: flex;
}

.animal .learn-more .sponsor-banner {
	background-image: url("img/sponsor.png");
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
}

.animal .learn-more p {
	font-size: 0.4rem;
	font-weight: bold;
	font-style: italic;
}

.animal .learn-more button {
	background-color: #00638e;
	color: #fff;
	font-weight: bold;
	font-size: 0.4rem;
}
.animal .commercial-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.animal .commercial-info div {
	padding-right: 1rem;
}

.animal .commercial-info p {
	font-weight: bold;
	font-style: italic;
	font-size: 0.4rem;
	color: HSL(0, 0%, 20%);
}
.animal .commercial-info img {
	padding: 0;
}

.animal .commercial-info div img {
	margin-right: 1rem;
}

.animal .commercial-info a {
	margin: 0;
}

.animal .details {
	flex-grow: 1;
	flex-shrink: 1;
	align-items: flex-start;
	padding-right: 1rem;
	padding-top: 1rem;
	min-width: 10rem;
	font-size: 0.541666667rem !important;
	text-overflow: ellipsis;
}
.animal .description {
	padding-top: 1rem;
	flex-grow: 1;
	flex-shrink: 1;
	align-items: flex-start;
}

.progress-bar {
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	height: 1.2rem;
	display: flex;
	min-width: 8rem;
}

.details .progress-bar .progress-label,
div.progress-bar .progress-label {
	position: absolute;
	padding-left: 1rem;
	line-height: 1.2rem;
	height: 1.2rem;
	font-size: 0.4rem !important;
	color: #9e9e9e;
	text-indent: -0.5rem;
}

.details .progress-bar .progress-value-collected,
.details .progress-bar .progress-value-needed,
div.progress-bar .progress-value-collected,
div.progress-bar .progress-value-needed {
	max-width: 100%;
	background-color: #7db343;
	height: 1.2rem;
	line-height: 1.2rem;
	font-size: 0.4rem !important;
	color: #fff;
	overflow-x: hidden;
	white-space: nowrap;
	text-indent: 0.5rem;
	text-overflow: unset !important;
}
.details .progress-bar .progress-value-needed,
div.progress-bar .progress-value-needed {
	background-color: #f5f5f5;
	padding-right: 0%;
}

.details .progress-bar .progress-value-collected,
div.progress-bar .progress-value-collected {
	z-index: 2;
}

.animal .description p {
	text-align: justify;
	font-size: 0.541666667rem;
}
.animal .details p {
	font-size: 0.541666667rem;
	color: #9f9f9f;
}
.animal .details .needs-percentage {
	font-size: 0.5rem;
	text-align: center;
}

.animal .details .status {
	display: inline-flex;
	color: #fff;
	background: #ec407a;
	padding-right: 0.4rem;
	font-size: 0.4rem;
	vertical-align: middle;
	line-height: 1.2rem;
	height: 1.2rem;
	margin-top: 0.4rem;
	margin-bottom: 0.4rem;
}
.animal .details .status-icon,
.animal-element .status-icon {
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 0.4rem;
	text-align: center;
	line-height: 1.2rem;
	background: #e72063;
	color: #fff;
	font-weight: bold;
	font-size: 0.6rem;
}

.animal-element .status-container {
	position: relative;
	width: 100%;
}

.animal-element .status-icon {
	margin: 0 auto;
	position: absolute;
	top: -0.8rem;
	right: calc(50% - 0.6rem);
}

.animal a {
	font-size: 0.541666667rem;
	color: #444;
	line-height: 1rem;
	display: block;
}

.animal .details .name,
.animal .description .about-me {
	font-size: 0.8rem !important;
	line-height: 0.8rem;
	padding-bottom: 0.8rem;
}

.leaflet-container {
	height: 200px;
	width: 300px;
}

.product {
	display: flex;
	flex-flow: column;
	height: auto;
	margin-bottom: 1rem;
	margin-right: 0.75rem;
}

.product .image-container {
	max-height: 4.166666667rem;
	background-size: 66%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #fff;
	border-top: 1px solid hsl(0, 0%, 97%);
	border-left: 1px solid hsl(0, 0%, 96%);
	border-right: 1px solid hsl(0, 0%, 96%);
	border-bottom: 2px solid hsl(0, 0%, 94%);
	border-radius: 5px;
	align-items: center;
	object-fit: contain;
	overflow: auto;
	width: 100%;
	height: 4.166666667rem;
	max-width: 4.166666667rem;
}

.product .details {
	flex-grow: 1.75;
}

.product .details .name {
	font-size: 0.5rem;
	font-weight: bold;
	padding: 0.4rem 0.2rem 0.2rem 0.4rem;
	line-height: 0.8rem;
	max-height: 2rem;
	width: 6rem;
	overflow: hidden;
}

.product .details .collected,
.product .details .value {
	font-size: 0.45rem;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	color: HSL(0, 0%, 60%);
	line-height: 0.8rem;
}

.product .basket {
	flex-grow: 1;
	max-width: 5rem;
	height: 4rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.product .basket .basket-container {
	width: 3rem;
}

.product .basket .counter {
	background-color: #fff;
	font-size: 2.5rem;
	line-height: 2.75rem;
	height: 3.333333333rem;
	text-align: center;
	border-radius: 5px;
	border: 1px solid HSL(0, 0%, 92%);
	width: 2.5rem;
	font-weight: bold;
	color: #eeeeee;
	padding: 0.291666667rem;
}

.product .basket .counter.has-elements-true {
	color: #88bf52;
}

.product .basket .counter-2-digits {
	font-size: 1.4rem;
}
.product .basket .counter-3-digits {
	font-size: 1.1rem;
}
.product .basket .counter-4-digits {
	font-size: 0.8rem;
}
.product .basket .counter-5-digits {
	font-size: 0.6rem;
}

.product .basket .unit {
	text-align: center;
	font-size: 0.458333333rem;
	font-weight: bold;
	color: HSL(0, 0%, 76%);
	width: 3.5rem;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.product .basket .controls {
	margin-top: 0.416666667rem;
	flex-grow: 1;
	width: 2rem;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.product .basket .add,
.product .basket .remove {
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	font-weight: bold;
	border-radius: 1px;
	cursor: pointer;
	user-select: none;
}
.product .basket .add {
	background-color: #eeeeee;
	color: #414141;
}

.product .basket .add:hover {
	color: #79b446;
}

.product .basket .remove {
	color: #9e9e9e;
}

.product.card {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: stretch;
	box-shadow: none;
	background-color: #fbfbfb;
	max-width: 15rem;
}

.card {
	-moz-box-shadow: 0px 2px 2px 0px #ddd;
	-webkit-box-shadow: 0px 2px 2px 0px #ddd;
	box-shadow: 0px 1px 1px 0px hsl(0, 0%, 94%);
	background-color: white;
}

.grids {
	display: flex;
	flex-flow: row wrap;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.grid-container-product {
	max-width: 32rem;
	flex-grow: 1;
}

.grid-container-basket {
	min-width: 15rem;
	flex-grow: 1;
	margin-bottom: 1.5rem;
}

.grid-container-basket .basket {
	background-color: #fff;
	height: auto;
	position: -webkit-sticky;
	position: sticky;
	top: 4rem;
}

.main-container
	.banner-action-container
	~ .content
	.grid-container-basket
	.basket {
	top: 6rem; /* move the basket if banner-action-container is located in DOM */
}

.grid-container-basket .basket .heading {
	background-color: #7cb242;
	color: #fff;
	line-height: 2.5rem;
	height: 2.5rem;
	font-size: 0.75rem;
	width: 100%;
	padding-left: 1.2rem;
	justify-content: flex-start;
}

.grid-container-basket .basket .gift-icon {
	background-image: url("img/gift-icon.png");

	width: 1rem;
	height: 1rem;
	margin-right: 0.4rem;
	display: inline-flex;
	background-repeat: no-repeat;
	background-position-y: center;
	vertical-align: sub;
}

.basket .order-row-delete {
	background: none;
	border: none;
	cursor: pointer;
	width: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	transition: all 200ms;
	will-change: padding, width;
}

.basket tr:hover .order-row-delete {
	width: 1rem;
	padding: 0 0.25rem;
}

div.basket:nth-child(1) > hr:nth-child(2) {
	display: none;
}
.order .basket > hr:nth-child(2) {
	display: block !important;
	margin-top: 0;
	width: 90%;
}

.grid-container-basket .basket .empty {
	color: #666;
	padding: 1rem 1rem 1rem 0.8rem;
}

.grid-container-basket .basket hr {
	border: 0;
	width: 40%;
	color: #efefef;
	background-color: #efefef;
	height: 1px;
	margin-left: 0.7rem;
	margin-top: 0.5rem;
}
.grid-container-basket .basket table {
	border-collapse: collapse;
	margin-top: 0.4rem;
	width: 100%;
}

.grid-container-basket .basket td {
	padding-left: 0.8rem;
	color: hsl(0, 0%, 66%);
	font-size: 0.541666667rem;
	text-align: right;
	padding-top: 0;
	padding-bottom: 0;
	width: 2.5rem !important;
}

.grid-container-basket .basket td:first-child {
	max-width: 7rem;
	overflow: hidden;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
	color: #737373;
	text-align: left;
	padding-left: 0.8rem;
	padding-right: 0.5rem;
	font-size: 0.458333333rem;
}

.grid-container-basket .basket td:nth-child(2) {
	text-align: left;
}
.grid-container-basket .basket td:nth-child(3) {
	text-align: center;
}
.grid-container-basket .basket td:nth-child(4) {
	padding-right: 0.8rem;
}

.grid-container-basket .basket .animal-name a {
	font-size: 0.666666667rem;
	color: #212121 !important;
	line-height: 1.4rem;
}

div.basket:nth-child(1)
	> table:nth-child(3)
	> tr:nth-child(1)
	> td:nth-child(1)
	> a:nth-child(1) {
	font-size: 0.75rem; /* tak klient chciał */
}

.grid-container-basket .basket .shelter-name {
	font-size: 0.5rem;
	padding-right: 0.8rem;
	width: 100%;
}

.grid-container-basket .basket .details {
	display: flex;
	width: 100%;
	padding: 1rem 1rem 1rem 1rem;
	background-color: #fff;
	flex-flow: row wrap;
}

.grid-container-basket .basket .details .summary,
.grid-container-basket .basket .details .pay {
	font-size: 0.5rem;
	vertical-align: middle;
	flex-grow: 1;
	color: #737373;
}
.grid-container-basket .basket .details .pay:hover {
	background-color: hsl(93, 47%, 42%);
}

.grid-container-basket .basket .details .summary {
	line-height: 2rem;
	padding-right: 1rem;
	font-size: 0.5rem;
}

.grid-container-basket .basket .details .controls label,
.grid-container-basket .basket .details .summary strong {
	font-size: 0.458333333rem;
	width: 100%;
	padding-top: 0.2rem;
	text-align: right;
}

.grid-container-basket .basket .details .summary .price {
	color: HSL(0, 0%, 30%);
	font-size: 0.5rem;
	font-weight: 600;
}

.grid-container-basket .basket .details .controls {
	height: auto;
	display: flex;
	flex-flow: column;
	align-items: flex-end;
}

.grid-container-basket .basket .details .pay,
.payment-status button,
.grid-container-basket .basket .details .controls button,
.cta-button {
	background-color: #7db343;
	border-radius: 5px;
	color: #fff;
	line-height: 2rem;
	height: 2rem;
	border: 0;
	cursor: pointer;
	text-align: center;
	position: relative;
	left: 0;
	font-size: 0.5rem;
	font-weight: bold;
}

.grid-container-basket .basket .details .pay {
}

.order-data {
	color: #737373;
}

.order-data label,
.order-data p {
	font-size: 0.5rem;
}

.order-data > label:nth-child(4) {
	margin-bottom: 0.5rem;
}

.order-data hr {
	border: 0;
	color: HSL(0, 0%, 93%);
	background-color: HSL(0, 0%, 93%);
	height: 1px;
	margin-left: 1.1rem;
	margin-bottom: 0.75rem;
	margin-top: 0.2rem;
}

.order-data hr.transfers {
	margin-bottom: 0.25rem;
}

.order-data label {
	height: 2rem;
	margin-bottom: 0.75rem;
	margin-left: 0.6rem;
}

.order-data #fullname,
.order-data #email {
	max-width: 12rem;
	min-width: 10rem;
	width: 90%;
}

.small-form {
	text-align: center;
}

.small-form form {
	display: inline-block;
}

.small-form label {
	display: block;
	text-align: left;
	margin-top: 0.5rem;
}

.small-form form input {
	margin-left: 0;
	margin-right: 0;
	display: block;
	margin-bottom: 1rem;
	margin-top: 0.5rem;
}

.small-form form input[type="submit"] {
	margin-top: 1rem;
	width: 100%;
}

/*

Colors

*/

a {
	color: hsl(89, 46%, 48%);
	text-decoration: none;
	font-size: 0.58333333rem;
}

/*

BEGIN: content/container

//preserves optimal width

*/

.content {
	max-width: calc(297mm + 3rem);
	margin: 0 auto;
	padding: 0 1rem;
	width: 100%;
}

/*

END: content/container

*/

/*

BEGIN: header

*/

.header {
	height: auto;
	line-height: 3rem;
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: space-between;
	background-color: hsl(0, 0%, 100%);
	flex-wrap: wrap;
	min-height: 2rem;
	min-width: 100%;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	position: fixed;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid #eee;
}

.header .content {
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: space-between;
}

.header * {
	font-size: 0.58333rem;
	vertical-align: middle;
}

.header .logo-container {
	display: inline-block;
}

.header .logo {
	height: 2rem;
}

.header .naszezoo-href {
	flex-grow: 1;
	text-align: right;
	padding: 0 1rem;
}

.header a.login-link {
	color: #444;
}

.header a.order-link {
	padding-right: 0.5rem;
	color: #444;
	display: inline-flex;
	flex-flow: row nowrap;
}

.header .order-link img {
	position: relative;
	bottom: -2px;
	margin-right: 0.125rem;
}

.header .order-link .basket-count {
	background-color: #ed0061;
	color: white;
	border-radius: 4px;
	font-size: 0.416666667rem;
	padding: 0 0.2rem;
	height: 0.666666rem;
	line-height: 0.666666rem;
	text-align: center;
	position: relative;
	bottom: 4px;
	font-weight: bold;
	padding-top: 1px;
	margin-left: 0.2rem;
}

.main-nav {
	font-family: "OpenSans-Semibold", sans-serif;
}

.main-nav ul a.order-button,
.main-nav ul a.login-button {
	display: none;
}

.main-nav ul li span.counter {
	background-color: hsl(93, 47%, 42%);
	margin-left: 0.25rem;
	padding: 0.1rem 0.13rem;
	font-size: 0.4167777rem;
	font-family: "OpenSans", sans-serif;
	border-radius: 2px;
}

.main-nav ul li a:hover {
	background-color: hsl(93, 47%, 42%);
	width: 100%;
}
.main-nav ul li a:hover > span.counter {
	background-color: #7cb242;
}

.main-nav .content {
	display: flex;
	padding: 0;
	height: 2.5rem;
}

.main-nav .search-bar {
	display: flex;
	line-height: 2.5rem;
}

.main-nav .search-bar img {
	width: 1rem;
	height: 1rem;
	margin-top: 0.75rem;
	margin-right: 0.25rem;
}

.navigation {
	position: relative;
	z-index: 10;
	margin-top: 3rem;
	/*height: 2.5rem;  // usunąłem, bo powodowało to, że góra contentu była nieklikalna na mobilce*/
}

.header .menu-button {
	text-align: center;
	cursor: pointer;
	color: hsl(89, 46%, 48%);
	line-height: 2.5rem;
	font-weight: bold;
	display: none;
	font-size: 1rem;
	min-width: 2rem;
	height: 2rem;
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: 50%;
}

.header .toggle-off {
	background-image: url(./img/toggle-off.svg);
}

.header .toggle-on {
	background-image: url(./img/toggle-on.svg);
}

.more {
	position: relative;
	font-family: "OpenSans-Semibold", sans-serif;
	letter-spacing: 1px;
}

.more .more-list {
	position: absolute;
	display: none;
	border: 4px solid #ffffff;
	border-radius: 4px;
	top: 2rem;
	left: 50%;
	transform: translate(-50%, 0%);
	letter-spacing: normal;
	font-family: "OpenSans", sans-serif;
}
.more-list:after,
.more-list:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.more-list:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 4px;
	margin-left: 4px;
}
.more-list:before {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 10px;
	margin-left: -10px;
}

.more .more-list li {
	height: 1.25rem;
	line-height: 1rem;
}

.more .more-list li a {
	line-height: 1.25rem;
	width: 9rem;
	color: HSL(0, 0%, 45%);
	margin: 0;
	padding: 0;
	font-weight: normal;
	height: auto;
}

.more .more-list li a:hover {
	color: hsl(89, 46%, 48%);
	cursor: pointer;
	background-color: transparent;
}

.more:hover .more-list {
	display: flex;
	flex-flow: column;
	background-color: white;
	color: HSL(0, 0%, 39%);
	padding: 0.25rem 0.5rem;
}

.search-bar {
	display: flex;
	align-items: center;
	height: 100%;
}

.search-bar input {
	background: hsl(89, 46%, 48%) url("/img/magnifying-glass.png") left
		no-repeat;
	border: 0;
	width: 5rem;
	height: 100%;
	margin: 0;
	padding-left: 1.5rem;
	background-position-x: 0.25rem;
	font-size: 0.625rem;
	color: #fff;
}
.search-bar input::-webkit-input-placeholder {
	/* WebKit, Blink, Edge */
	color: white;
}
.search-bar input::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: white;
	opacity: 1;
}
.search-bar input:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: white !important;
}

.search-bar input:focus {
	background-color: #689f38;
	color: white;
	width: 100%;
}

.banner-action-container {
	position: -webkit-sticky;
	position: sticky;
	top: 3rem;
	z-index: 9;
	border-bottom: 1px solid hsl(0, 0%, 93%);
}

.banner-rear-background {
	display: inline-flex;
	justify-content: center;
	width: 100%;
	max-height: 4.15rem;
	height: 100%;
	flex-flow: row;
	flex-wrap: nowrap;
	position: absolute;
}

.banner-rear-background div {
	z-index: 0;
	flex-grow: 1;
}

.banner-holder {
	margin: 0 auto;
	display: flex;
	max-width: 100%;
}

@media all and (max-width: 60rem) {
	.more,
	.main-banner,
	.banner-action-container {
		/*display: none;*/
	}
}

/*

END: header

*/

/*

BEGIN: home

*/

.content.main.content-about {
	max-width: none;
	display: block;
	margin: 0;
	padding: 0;
}

.home-animals {
	text-align: right;
	color: HSL(0, 0%, 45%);
	margin: 1rem auto;
}
.home-animals span,
.home-animals a:first-child {
	font-size: 0.5rem;
}
.home-animals a:first-child {
	color: HSL(0, 0%, 45%);
	text-decoration: underline;
}
.home-animals a:nth-child(2) {
	padding: 0.5rem;
	color: white;
	border-radius: 3px;
	background-color: HSL(89, 46%, 48%);
	display: inline-block;
}

.about-main-bg {
	width: 100%;
	background-color: white;
	border-bottom: 1px solid HSL(0, 0%, 95%);
}

.about-main {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background-color: white;
	padding: 1rem;
	flex-flow: row wrap;
}

.about-main > div {
	width: 16rem;
	flex-grow: 1;
}

.about-main > div:nth-child(1) {
	padding-right: 1rem;
}

.about-main p,
.merch p {
	text-align: left;
	color: HSL(0, 0%, 45%);
}

.about-main p {
	font-size: 0.58333rem !important;
}

.merch p {
	font-size: 0.48333rem;
	font-weight: bold;
	max-width: 16rem;
}

.about-main strong {
	font-size: 0.58333rem;
	color: HSL(0, 0%, 30%);
}

.about-main div:first-child {
	position: relative;
}

.about-main .learn-more {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	font-size: 0.56666667rem;
}

.patrons .name {
	display: inline;
	color: hsl(89, 46%, 48%);
	font-weight: bold;
}

.patrons p {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-size: 0.58333rem;
}

.patrons-first,
.patrons-second {
	display: flex;
	align-items: flex-start;
}

.patrons-first img,
.patrons-second img {
	padding: 0rem !important;
	margin-top: 0.1rem;
	margin-right: 1rem;
	max-width: 5rem !important;
	height: 5rem;
	object-fit: cover;
	min-width: 5rem !important;
}

.patrons-first {
	margin-bottom: 1rem;
}

.merch {
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
	margin-top: 1rem;
}

.merch > div {
}

.merch p + p {
	margin-top: 0;
}

.merch .entity {
	display: flex;
	flex-flow: column;
}

.merch .entity {
	position: relative;
	width: 50%;
}

.merch .entity .items {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-flow: row wrap;
	min-height: 10rem;
}

div.entity:nth-child(1) > div:nth-child(1) > img:nth-child(1) {
	height: 1.708333333rem;
}
div.entity:nth-child(2) > div:nth-child(1) > img:nth-child(1) {
	height: 1.708333333rem;
	width: auto;
}

div.entity:nth-child(2) > div:nth-child(2) {
	justify-content: center;
}

.merch .entity div:nth-child(1) {
	display: flex;
	flex-flow: row wrap;
	min-height: 4rem;
}

.merch .entity .items > div {
	display: inline-block;
	padding-bottom: 0.5rem;
}

.merch .entity .logo {
	margin-bottom: 1rem;
	margin-top: 0.15rem;
}

.merch .entity a {
	font-weight: bold;
	width: 100%;
	text-align: right;
}

.merch .entity .description {
	padding: 0rem 1rem 1rem 1rem;
}

.merch .entity .second-desc {
	max-width: 18rem;
	margin: 0 auto;
}

.merch .items img:first-child {
	margin-left: 0;
}

.merch .items img {
	width: 5rem; /* because the stupid ie11 doesn't support object-fit property */
	height: 8.75rem; /* too ^ */
	background-color: hsl(0, 0%, 100%);
	border-radius: 3px;
	border: 3px solid hsl(0, 0%, 100%);
	box-shadow: 0px 1px 5px 1px hsla(0, 0%, 0%, 0.1);
	margin: 0 0.5rem;
	object-fit: cover;
}

.merch .items .goods-name {
	font-size: 0.5rem;
	margin-top: 0.5rem;
}
.merch .items .price {
	font-size: 0.416666667rem;
	color: HSL(0, 0%, 75%);
	letter-spacing: 0.1px;
	line-height: 0.5rem;
}
/*--------------------------------------------*/

.action-numbers {
	margin-top: 2rem;
	text-align: center;
}

.panel {
	display: flex;
	align-items: center;
	width: 100%;
}

.panel:nth-child(2n + 1) {
	margin-top: 1rem;
}

.panel > div {
	margin: 0.5rem;
}

.panel .numbers-container {
	width: 8.3333333rem;
}

.panel .items-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	width: 100%; /* support for the stupid ie11 flexbox implementation*/
}

.panel .photo-panel > div {
	position: absolute;
	height: 8.333333rem;
	width: 8.333333rem;
	background-color: white;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.58333rem;
	margin: 0.5rem;
}

.panel .photo-panel > div:hover {
	opacity: 0.9;
	cursor: pointer;
}

.panel img {
	width: 8.333333333rem;
	height: 8.333333333rem;
	padding: 0.05rem;
	background-color: #fff;
	border: 2px solid #fff;
	box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.09);
	margin: 0.5rem;
}

.action-numbers a {
	font-weight: bold;
}

.action-numbers p {
	color: HSL(0, 0%, 45%);
	font-size: 0.58333rem;
	text-align: right;
}

.action-numbers h2 {
	font-weight: 200;
	text-align: center;
}

.large-numbers {
	font-size: 1.6rem;
	color: HSL(335, 100%, 46%);
	font-family: "OpenSans-Light", sans-serif;
}

.home-animal-commercial p {
	font-weight: bold;
	font-style: italic;
	font-size: 0.4rem;
	color: HSL(0, 0%, 20%);
}

.movie-panel {
	width: 100%;
	background-color: hsl(0, 0%, 91%);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1rem;
	flex-flow: row wrap;
}

.movie-panel h2 {
	margin-bottom: 1rem;
	font-weight: 200;
}

.movie-panel p,
.movie-panel strong {
	font-size: 0.5rem;
	color: #666;
}

.movie-panel div:first-child {
	width: 24rem;
	padding: 1rem;
}

.movie-panel iframe {
	border: 0;
	width: 20rem;
	max-height: 12rem;
	padding: 1rem;
}
/*

END: home

*/

/*

BEGIN: main navigation

*/

.main-nav {
	/*height: auto;*/
	background-color: hsl(89, 46%, 48%);
	color: white;
	margin: 0;
	display: flex;
	justify-content: space-between;
}

.main-nav ul {
	display: flex;
	padding: 0;
}

.main-nav ul li {
	list-style: none;
	line-height: 2.5rem;
	padding: 0;
}

.main-nav a {
	color: white;
	text-decoration: none;
	line-height: 2.5rem;
	display: inline-block;
	padding: 0 0.75rem;
	height: 2.5rem;
	font-size: 0.6rem;
	width: 100%;
}

/*

END: main navigation

*/

/*

BEGIN: stages
//1- wybierz schronisko lub organizację; 2-wybierz potrzebującego zwierzaka, etc
*/
.stages {
	padding-top: 1.5rem;
	max-width: 36rem;
	width: 100%;
}

.stages .row-1,
.stages .row-2 {
	display: flex;
}

.stages .row-1 .ball {
	height: 2rem;
	width: 2rem;
	border-radius: 50%;
	background-color: hsl(89, 46%, 48%);
	color: white;
	text-align: center;
	line-height: 2rem;
	font-weight: bold;
	flex-shrink: 0;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	cursor: pointer;
	font-size: 0.5666667rem;
}

.stages .row-1 .connector {
	font-size: 1rem;
	line-height: 2rem;
	font-family: monospace;
	font-weight: 100;
	flex-grow: 1;
	text-align: center;
	border-bottom: 1px dashed;
	height: 1rem;
	align-items: center;
	align-content: stretch;

	background-color: rgba(0, 0, 0, 0) !important;
}

.stages .row-1 .connector.invisible {
	flex-grow: 0.5;
	visibility: hidden;
}

.stages .row-1 .ready {
	background-color: #7cb242;
	border-color: #7cb242;
}

.stages .row-1 .in-progress {
	background-color: #ed0061;
	border-color: #ed0061;
}

.stages .row-1 .not-ready {
	background-color: #ededed;
	border-color: #c2bfbf;
	color: #9f9f9f;
}

.stages .row-2 .step {
	text-align: center;
	width: 25%;
	color: #646464;
	margin: 0.5rem 0;
	font-size: 0.5rem;
}
.stages .row-2 .step strong {
	font-size: 0.5rem;
}
/*

END: stages

*/

/*
BEGIN: terms
*/

.terms {
	text-align: center;
}

.terms p,
.terms li,
.terms ul {
	max-width: 100%;
}

.terms ol {
	text-align: justify;
}

.terms ul {
	padding: 0;
	display: table;
	margin: 0 auto;
	text-align: left;
}

.terms p + p {
	padding: 0;
	margin: 0;
}

.terms .paragraph {
	padding-top: 1rem;
}

/*
END: terms
*/

/*
BEGIN: bottom-links
*/

.bottom-links {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid HSL(0, 0%, 95%);
	flex-flow: row wrap;
}

.bottom-links ul {
	list-style-type: none;
	padding-left: 0;
}

.bottom-links li,
.bottom-links a {
	font-size: 0.585416667rem;
}

.bottom-links a {
	color: HSL(0, 0%, 45%);
}

.bottom-links a:hover {
	color: hsl(89, 46%, 48%);
}

.bottom-links div {
	flex-grow: 1;
}

.bottom-links img {
	flex-grow: 3;
}

/*
END: bottom-links
*/

/*
BEGIN: footer
*/

.footer {
	background-color: white;
}

.footer.content {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	margin-top: 1rem;
}

.footer .logo {
	height: 2rem;
}

.footer > .logo-dlaschroniska,
.footer > .logo-sealcode,
.footer > .logo-bayer {
	margin: 1rem;
	display: flex;
	align-items: center;
	flex-flow: row;
}

.footer span {
	padding-right: 1rem;
	font-size: 0.5rem;
}

.help-center-cat {
	width: 100%;
	height: 8rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(/img/kot2.png);
}

.help-center-details {
	color: white;
	font-size: 1rem;
	height: 100%;
	display: flex;
	align-items: center;
}

underline {
	text-decoration: underline;
}

/*

END: footer

*/

/*

BEGIN: animations

*/

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*

END: animations

*/
@media all and (max-width: 80rem) {
	.about iframe {
		width: 100%;
	}
}

@media all and (max-width: 72rem) {
	.merch .entity {
		width: 100%;
	}
	.merch .entity div {
		justify-content: center;
	}
	.merch .entity .items {
		justify-content: center;
	}
	.merch .entity a {
		text-align: center;
		padding-bottom: 2rem;
	}
}

@media all and (max-width: 70.5rem) {
	.product.card {
		max-width: none;
	}
}

@media all and (max-width: 68rem) {
	.bottom-links .dog-image {
		display: none;
	}
	.bottom-links div {
		text-align: center;
	}
	.movie-panel div:first-child {
		text-align: center;
	}
}

@media all and (max-width: 64rem) {
	.grid-container-product {
		max-width: none;
	}
}

@media all and (max-width: 60rem) {
	.header {
		flex-flow: row;
		text-align: center !important;
	}

	.header .naszezoo-href {
		text-align: center;
	}

	.header .actions {
		display: none;
	}

	.collapsed {
		display: none;
	}

	.main-nav ul,
	.main-nav li {
		max-width: none;
		background-color: hsl(89, 46%, 48%);
	}

	.main-nav ul {
		flex-flow: column;
		background-color: #fff;
		position: relative;
		height: auto;
	}
	.main-nav ul li {
		width: 100%;
		text-align: center;
		border-bottom: 1px solid hsl(89, 46%, 40%);

		height: 2.5rem;
	}
	.main-nav ul a.order-button,
	.main-nav ul a.login-button {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.main-nav .search-bar {
		display: none;
	}

	.main-nav ul li:last-child {
		border-bottom: 0;
		width: 100%;
	}

	.header .menu-button {
		display: block;
	}

	.main-container > .header {
		position: fixed;
		background-color: #fff;
		top: 0;
		z-index: 10;
	}

	.main-container {
		margin-top: 3rem;
	}

	.navigation {
		margin-top: 0;
		position: fixed;
		width: 100%;
	}
	.animal {
		flex-wrap: wrap;
	}
	.about .patrons {
		flex-flow: row wrap !important;
	}
	.about .patrons .description {
		padding-right: 0 !important;
	}
}

@media all and (max-width: 52rem) {
	.animal {
		flex-wrap: wrap;
	}
	.animal .about-me {
		padding-top: 0.8rem;
		padding-bottom: 0;
	}
	.grids {
		flex-wrap: wrap-reverse;
	}
	.header .naszezoo-href {
		display: none;
	}
}

@media all and (max-width: 48rem) {
	.about-main > div:nth-child(1) {
		padding-right: 0rem;
	}
	.grid-container-product .product .details .name {
		max-width: 20rem;
		width: auto;
	}
	.panel {
		flex-flow: column;
	}
	.about .main p {
		padding-right: 0 !important;
	}
	.about .main h2,
	.about .main h3,
	.about .how-it-works h2 {
		text-align: center;
	}

	.about .main p,
	.about .how-it-works p {
		text-align: justify !important;
	}
}

@media all and (max-width: 40rem) {
	.bottom-links {
		flex-flow: column;
		text-align: center;
		margin-bottom: 1.5rem;
	}
	.bottom-links div {
		margin-top: 0.5rem;
	}
	.about iframe {
		width: 100%;
	}
	.animal .column > div:nth-child(2) {
		flex-flow: column;
	}
	.animal-element {
		max-width: 16rem;
		min-width: none;
	}
}

@media all and (max-width: 36rem) {
	.animal img {
		padding-right: 0;
		max-width: 100%;
		max-height: 16rem;
	}
	.stages {
		display: none;
	}
	.about-main p {
		text-align: justify;
	}
	.movie-panel iframe {
		width: 18rem;
	}
	.animal .commercial-info {
		padding: 0;
	}
}

@media all and (max-width: 32rem) {
	.animal-element {
		max-width: none;
		min-width: none;
	}
}

@media all and (max-width: 28rem) {
	.grid-container-basket {
		min-width: 0;
	}
	.grid-container-basket .basket td:first-child {
		width: auto;
		max-width: 5rem;
	}
	.grid-container-basket .basket td {
		padding-left: 0.3rem;
		padding-right: 0.3rem;
	}

	.grid-container-product .details {
		width: 3.75rem;
	}

	.grid-container-product .product .details .name {
		width: 4rem;
	}
	.grid-container-product .product .image-container {
		max-width: 3.167rem;
		max-height: 3.167rem;
	}
	.grid-container-basket .basket .details .controls {
		width: 100%;
	}
	.order > * {
		margin: -0.5rem !important;
	}
	.header .logo {
		height: 1.6rem;
	}
	.patrons-first,
	.patrons-second {
		display: flex;
		align-items: center;
		flex-flow: column;
	}
	.patrons-first img,
	.patrons-second img {
		margin-right: 0;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.footer.content span {
		display: none;
	}
	.movie-panel iframe {
		height: 8rem;
		width: 100%;
	}
}

@media all and (max-width: 37rem) {
	.animals-filter select.dropdown-large {
		width: 55vw !important;
	}
}

@media all and (max-width: 24rem) {
	.animals-filter {
		flex-flow: column !important;
		text-align: center;
	}
	.animals-filter select.dropdown-large {
		width: 50vw !important;
	}
	.about iframe {
		height: 8rem;
	}
}

/*

BEGIN: partners

*/

.partners {
	text-align: center;
}

.partners-grid {
	justify-content: center;
}

.partners .text {
	font-size: 1.33333333rem;
	line-height: 2rem;
	font-weight: 200;
}

.partners .organizations {
	font-size: 1rem;
	line-height: 2rem;
	font-weight: 200;
}

.partners .ambassadors {
	font-size: 0.75rem;
	line-height: 2rem;
}

.partner-element img {
	object-fit: cover;
	width: 100%;
	height: 8rem;
}

.partner-element {
	display: flex;
	flex-flow: column;
	flex-basis: 10rem;
	flex-shrink: 1;
	margin: 0.5rem;
	height: auto;
	max-width: 11rem;
}

.organization-element {
	display: flex;
	flex-flow: column;
	flex-basis: 5rem;
	flex-shrink: 1;
	margin: 0.5rem;
	padding: 0.5rem;
	min-height: 4.5rem;
	height: auto;
	max-width: 5rem;
	align-items: center;
	justify-content: center;
}

.partner-element .name {
	font-size: 0.6rem;
	margin-top: 1rem;
	line-height: 0.5rem;
	color: #000;
	font-weight: 500;
}

.partner-element .role {
	margin-bottom: 0.5rem;
	font-size: 0.5rem;
	line-height: 1rem;
	color: #a9a9aa;
}
/*

END: partners

*/

/*

BEGIN: order

*/

.order {
	display: flex;
	flex-flow: row wrap;
	margin: -0.5rem;
	margin-bottom: 1.5rem;
}

.order > * {
	flex-basis: 10rem;
	margin: 0.5rem;
}

.order > .order-data {
	align-self: flex-start;
	flex-grow: 1;
	padding-left: 1rem;
	padding-bottom: 1rem;
	padding-right: 1rem;
	padding-top: 0.5rem;
}

.order .order-data label {
	display: inline-block;
}

.order h2,
.order .basket .heading {
	font-weight: normal;
	font-size: 0.75rem;
	line-height: 1rem;
	display: flex;
	align-items: center;
	margin-top: 0rem;
	color: hsl(0, 0%, 15%);
	font-family: "OpenSans-Light", sans-serif;
}

.order .basket hr {
	border: 0;
	width: 50%;
	color: HSL(0, 0%, 93%);
	background-color: HSL(0, 0%, 93%);
	height: 1px;
	margin-left: 0.8rem;
}

.order .grid-container-basket .basket td:first-child {
	max-width: 10rem;
}

.order .grid-container-basket .basket td {
	width: 1.5rem !important;
}

.order .grid-container-basket .basket td:nth-child(2) {
	text-align: right;
}

.order .basket table hr {
	margin-top: 0.6rem;
	width: 80%;
}

.order td:first-child {
	font-size: 0.458333333rem !important;
}

.order td.animal-name a {
	font-weight: bold;
}

.order .grid-container-basket .basket .details .controls div {
	align-items: center;
	display: inline-flex;
}

.order .grid-container-basket .basket .details .controls button {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.order .grid-container-basket .basket .details {
	padding-bottom: 2rem;
}

.order .grid-container-basket .basket i.lock-icon {
	width: 1.2rem;
	height: 1rem;
	background-image: url(img/lock.png);
	background-repeat: no-repeat;
}

.order .payment-radio {
	background-repeat: no-repeat;
	background-size: cover;
	width: 3.125rem;
	height: 1.75rem;
	display: inline-flex;
	outline: 2px solid #fff;
	display: inline-flex;
}

.order .checked {
	outline: 2px solid #7cb242;
}
.order .payment-radio:hover {
	outline: 2px solid hsl(93, 47%, 42%);
}

.order .payment-radio-check {
	background-image: url(img/payment-check.png);
	margin: 0.5rem;
}
.order .payment-radio-online {
	background-image: url(img/payment-online.png);
	margin: 0.5rem;
}

.order label p {
	text-align: center;
	font-size: 0.541666667rem;
}

.order label a {
	font-size: 0.458333333rem;
}

.order .controls label input {
	height: 0.5rem;
	position: relative;
	top: 0.133333rem;
	margin-right: 0.3rem;
}

.order .ball {
	font-size: 0.5rem;
	background-color: hsl(89, 46%, 48%);
	color: white;
	border-radius: 50%;
	display: inline-block;
	height: 0.75rem;
	width: 0.75rem;
	margin: 0.5rem 0.3rem 0.5rem 0rem;
	font-weight: bold;
	line-height: 0.75rem;
	text-align: center;
}

.order .basket .heading {
	background-color: #fff;
	padding-left: 0.8rem;
}

.order .card {
	box-shadow: none;
}

.payment-status h1 {
	font-size: 1.33333333rem;
	line-height: 2rem;
	font-weight: 200;
}

.payment-status {
	display: flex;
	flex-flow: column;
	text-align: center;
	padding: 1rem;
}

.payment-status span {
	line-height: 1rem;
}

.payment-status button {
	width: 10rem;
	margin: 0 auto;
	margin-top: 1rem;
}

.payment-status .details table {
	margin: 0 auto;
	padding-bottom: 0.5rem;
}

.payment-status .details table thead td:first-child {
	padding: 0;
}

.payment-status .details table td:first-child {
	text-align: left;
	padding-right: 0.5rem;
	color: hsl(0, 0%, 40%);
	padding-left: 0;
}

.payment-status .details table td {
	text-align: right;
	font-size: 0.58333rem;
	color: hsl(0, 0%, 15%);
	padding-left: 1rem;
}

.payment-status .details {
	padding-top: 0.5rem;
}

@media all and (max-width: 28rem) {
	.payment-status .details table td {
		font-size: 0.5rem;
	}
}

@media all and (max-width: 24rem) {
	.payment-status .details table td {
		padding: 0;
		font-size: 0.4583333rem;
	}

	.payment-status a {
		font-size: 0.5rem;
	}
}

@media all and (max-width: 56rem) {
	.order .grid-container-basket .basket td:first-child {
		max-width: 7rem;
	}
}
/*
END: order

*/

/*
BEGIN: animals-filter
*/

.animals-filter {
	display: flex;
	flex-flow: row wrap;
	padding-left: 0;
	justify-content: center;
}

.animals-filter .loading-container {
	display: none !important;
}

.animals-filter:nth-child(2) {
	margin-bottom: 1rem;
}

.animals-filter label {
	line-height: 2rem;
	margin: 0 0.5rem;
	font-size: 0.5rem;
	clear: both;
}

.animals-filter li {
	list-style: none;
}

select {
	margin-left: 0.5rem;
}

.animals-filter select.dropdown,
.animals-filter select.dropdown-large {
	margin-top: 0;
	margin-bottom: 0;
}
/*
END: animals-filter
*/

/*
BEGIN: loading
*/
@keyframes jump {
	0% {
		transform: translateY(0);
	}
	7% {
		transform: scaleY(0.8) scaleX(1.2) translateY(2px);
	}
	10% {
		transform: scaleY(0.8) scaleX(1.2) translateY(2px);
	}
	19% {
		transform: scaleX(0.9) scaleY(1.1) translateY(-0.5rem);
	}
	37% {
		transform: translateY(-1rem);
	}
	55% {
		transform: scaleX(0.9) scaleY(1.1) translateY(-0.5rem);
	}
	70% {
		transform: scaleY(0.8) scaleX(1.2) translateY(2px);
	}
	100% {
		transform: translateY(0);
	}
}

.loading-container {
	text-align: center;
	padding-top: 3rem;
	padding-bottom: 3rem;
	padding-left: 1rem;
}

.loading-box {
	width: 1rem;
	height: 1rem;
	background-color: hsl(89, 46%, 48%);
	display: inline-block;
	vertical-align: bottom;
	animation: jump 700ms;
	animation-iteration-count: infinite;
}

.loading-box.gifts {
	background-image: url(/img/gift-icon-green.png);
	background-size: 100% 100%;
	background-color: transparent;
}

.loading-shadow {
	display: inline-block;
	margin-right: 1rem;
	width: 1rem;
	margin-left: -1rem;
	width: 1rem;
	box-shadow: 0px 4px 2px 1px rgba(0, 0, 0, 0.16);
}

.loading-text {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 2rem;
	color: hsl(89, 46%, 48%);
}

/*
END: loading
*/

/*
BEGIN: help-center
*/
.help-center-header {
	text-align: center;
	font-weight: 300;
	margin-bottom: 1rem;
}

.help-center-block h3 {
	padding-left: 1.5rem;
	font-weight: 300;
}

.help-center-content {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.help-center-content > div {
	width: 15rem;
}

@media all and (max-width: 50rem) {
	.help-center-content > div {
		width: 25rem;
	}
}

.help-center-block {
	margin: 0 1rem;
}

.help-center-pair {
	width: 100%;
	border: 1px solid HSL(0, 0%, 95%);
	background-color: white;
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	display: inline-flex;
}

.help-center-pair img {
	cursor: pointer;
	height: 1rem;
}

.help-center-point {
	cursor: pointer;
	margin-bottom: 0;
	font-size: 0.541666667rem;
}

.help-center-answer {
	display: none;
	margin-top: 0;
	padding-top: 0.5rem;
	font-size: 0.541666667rem;
}

.help-center-answer strong {
	font-size: 0.541666667rem;
}
/*
END: help-center
*/

/*
BEGIN: map
*/

.map-wrapper {
	max-width: 30rem;
	margin: 0 auto;
}

.map-container {
	position: relative;
	margin: 0 auto;
	padding-top: calc(100% - 2rem); /* it's pretty handling height for map */
}

.woj {
	fill: #eeeeee;
	cursor: pointer;
}

.woj:hover {
	stroke: #ed0061;
	stroke-width: 174px;
}

.voivodeship-label {
	display: flex;
	flex-flow: column;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.voivodeship-label .count {
	border-radius: 3px;
	background-color: #ed0061;
	color: white;
	height: calc(5rem / 3);
	width: calc(5rem / 3);
	line-height: calc(5rem / 3);
	text-align: center;
	align-self: center;
	position: relative;
	bottom: 6px;
}

.voivodeship-label.active {
	color: white;
	z-index: 2;
}

.voivodeship-label.active .count {
	opacity: 1;
	background-color: white;
	color: #333;
}

.voivodeship-label.active .count.count-0 {
	background-color: transparent !important;
}

.voivodeship-label .count-0 {
	opacity: 0;
}

.voivodeship-label .voivodeship-name {
	text-shadow: 1px 1px 0px #eee, -1px -1px 0px #eee, 1px -1px 0px #eee,
		-1px 1px 0px #eee, 1px 0px #eee, 0px 1px #eee, -1px 0px #eee,
		0px -1px #eee, 2px 2px 0px #eee, -2px -2px 0px #eee, 2px -2px 0px #eee,
		-2px 2px 0px #eee, 2px 0px #eee, 0px 2px #eee, -2px 0px #eee,
		0px -2px #eee;
}

.voivodeship-label.active .voivodeship-name {
	text-shadow: 1px 1px 0px #ed0061, -1px -1px 0px #ed0061,
		1px -1px 0px #ed0061, -1px 1px 0px #ed0061, 2px 2px 0px #ed0061,
		-2px -2px 0px #ed0061, 2px -2px 0px #ed0061, -2px 2px 0px #ed0061;
}

.voivodeship-label .voivodeship-shelters {
	position: absolute;
	height: 9rem;
	left: 2.5rem;
	top: -3.75rem;
	overflow-x: visible;
	display: flex;
	align-items: center;
}

.voivodeship-label .voivodeship-shelters .voivodeship-shelters-box {
	opacity: 0;
	max-height: 9rem;
	pointer-events: none;
	transition: all 200ms;
	background-color: white;
	text-overflow: ellipsis;
	box-shadow: 1px 1px 6px #0006;
	border-radius: 3px;
	position: relative;
}

.voivodeship-label .voivodeship-shelters-box:after {
	position: absolute;
	height: 1rem;
	background-image: url(/img/white-gradient-bottom.png);
	pointer-events: none;
	display: block;
	content: " ";
	bottom: 0;
	left: 0;
	width: 100%;
}

.voivodeship-label .voivodeship-shelters-box:before {
	display: block;
	height: 0.583333333rem;
	width: 0.333333333rem;
	content: " ";
	position: absolute;
	background-image: url(/img/triangle-white-left.png);
	right: calc(100% + 0px);
	top: calc(50% - 0.25rem);
}

.voivodeship-label .voivodeship-shelters .scroll-container {
	height: 100%;
	max-height: 9rem;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.voivodeship-label.direction-left .voivodeship-shelters {
	right: 2.5rem;
	left: unset;
}

.voivodeship-label.direction-left .voivodeship-shelters-box:before {
	right: unset;
	left: calc(100% + 0px);
	background-image: url(/img/triangle-white-right.png);
}

.map-input {
	border-color: #eeeeee;
	width: 10rem;
	height: 1.666666667rem;
	border-radius: 0;
	-webkit-appearance: none;
}
.map-inputs-grid {
	flex-flow: row wrap;
	display: flex;
	justify-content: space-around;
	margin-bottom: 1rem;
}
.map-input-line {
	border-color: #eeeeee;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
.map-input-element {
	flex-flow: column;
	display: flex;
	flex-basis: 10rem;
	max-width: 10rem;
	margin: 1rem 0;
}

.map-text {
	flex-flow: row wrap;
	color: grey;
	font-size: 0.541666667rem;
	display: flex;
}

.voivodeship-label .voivodeship-shelters .scroll-content {
	padding: 0.5rem 0;
}

.voivodeship-label.active .voivodeship-shelters-box {
	opacity: 1;
	pointer-events: all;
}

.voivodeship-label .voivodeship-shelters .voivodeship-shelter {
	white-space: nowrap;
	text-align: left;
	padding: 0 0.5rem;
	cursor: pointer;
	color: #333;
}

.voivodeship-label .voivodeship-shelters .voivodeship-shelter:hover {
	background-color: #ed0061;
	color: white;
}

.voivodeship-label .count-0 .voivodeship-shelters .voivodeship-shelter:hover {
	background-color: initial !important;
	color: inherit !important;
}

.voivodeship-label .voivodeship-shelters .voivodeship-shelter a {
	color: inherit;
	width: 100%;
	display: inline-block;
}

@media all and (max-width: 63rem) {
	.voivodeship-label .voivodeship-name {
		visibility: hidden;
		width: 3rem;
	}
}

@media all and (max-width: 39rem) {
	.voivodeship-label {
		visibility: hidden;
	}
}
/*

END: map
*/

/*
BEGIN: async
*/

.async {
	animation-name: fade-in;
	animation-duration: 200ms;
	animation-fill-direction: both;
}

/*
END: async
*/

/*
BEGIN: single-shelter
*/
/*it's the same code as for animal*/
/*
END single-shelter
*/

/*
START: thanks
*/

.thanks {
	color: HSL(0, 0%, 25%);
	text-align: center;
}

.thanks .text {
	text-align: center;
	font-weight: 200;
	font-size: 1rem;
	margin-top: 1rem;
}

.thanks .text strong {
	font-size: 1rem;
	font-weight: 400;
}

.thanks .first-panel {
	margin-top: 1rem;
	text-align: center;
	font-weight: 200;
}

.thanks .animal-panel {
	display: flex;
	justify-content: space-around;
	background-color: white;
	padding: 1rem;
	margin-top: 1rem;
	flex-flow: row wrap;
	margin-bottom: 1rem;
}

.thanks .animal-panel .animal-photo {
	max-width: 12rem;
	max-height: 12rem;
	object-fit: cover;
}

.thanks .animal-panel .animal-photo,
.thanks .animal-panel .thanks-text,
.thanks .animal-panel .bone-tick {
	flex-grow: 1;
	padding: 0.5rem;
}

.thanks .animal-panel .thanks-text {
	display: flex;
	flex-direction: column;
	flex-basis: 25rem;
}

.thanks .animal-panel .thanks-text .first-panel {
	background-color: HSL(0, 0%, 98%);
	padding: 0.5rem;
	font-size: 14px;
	position: relative;
}

.thanks .animal-panel .thanks-text .first-panel:after,
.thanks .animal-panel .thanks-text .first-panel:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.thanks .animal-panel .thanks-text .first-panel:after {
	border-color: rgba(0, 0, 0, 0);
	border-right-color: #fafafa;
	border-width: 10px;
	margin-top: -10px;
}

.thanks .animal-panel .thanks-text .first-panel:before {
	border-color: rgba(0, 0, 0, 0);
	border-right-color: #fafafa;
	border-width: 11px;
	margin-top: -11px;
}

.thanks .animal-panel .thanks-text .second-panel {
	font-size: 0.5rem;
	padding: 1rem 0rem;
	text-align: justify;
}

.thanks .animal-panel .bone-tick {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.thanks .animal-panel .bone-tick span {
	font-size: 0.5rem;
	margin-top: 0.5rem;
	color: HSL(0, 0%, 70%);
}

.thanks .options,
.how-to-help .options {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.thanks .options img,
.how-to-help .options img {
	border: 1px solid HSL(0, 0%, 94%);
}

.thanks .options > div,
.how-to-help .options > div {
	margin: 0 auto;
	display: flex;
	flex-flow: row;
}

.thanks .options > div > div,
.how-to-help .options > div > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.5rem 1rem;
	margin: 0 auto;
	height: 11.5rem;
	width: 10.3333333rem;
}

.thanks .options .encouragement,
.how-to-help .options .encouragement {
	font-size: 0.583333333rem;
	max-width: 10.3333333rem;
}

.thanks .options > div > div a,
.how-to-help .options > div > div a {
	text-align: right;
	font-size: 0.5rem;
	font-weight: bold;
	margin-top: 0.5rem;
}

@media screen and (max-width: 74rem) {
	.thanks .options > div,
	.how-to-help .options > div {
		flex-flow: row wrap;
	}
}

/*

END: order

/*

/*
END: thanks
*/

/*
START: about
*/

.about h2,
.about h3 {
	font-weight: 400;
	font-family: "OpenSans-Light", sans-serif;
	font-size: 1.33333rem;
}

.about h3 {
	font-size: 0.75rem;
	font-family: "OpenSans-Light", sans-serif;
	line-height: 1rem;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

.about .main .fundation {
	color: #ed0061;
	font-size: 0.7rem;
	font-family: "OpenSans", sans-serif;
}

.about .main .take-action p {
	padding: 0.5rem 0rem 1.25rem;
}

.pathText {
	fill: #000000;
}
.clickedText {
	fill: #ffffff;
}
.clicked {
	fill: #ed0061;
}
.map-input {
	border-color: #eeeeee;
	width: 10.833333333rem;
	height: 1.666666667rem;
	border-radius: 0;
	-webkit-appearance: none;
}
.map-inputs-grid {
	flex-flow: row wrap;
	display: flex;
	justify-content: space-around;
}
.map-input-line {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	border: 0;
	color: HSL(0, 0%, 90%);
	background-color: HSL(0, 0%, 90%);
	height: 1px;
}
.map-input-element {
	flex-flow: column;
	display: flex;
	flex-basis: 10rem;
	max-width: 10rem;
}
.map-text {
	flex-flow: row wrap;
	color: grey;
	font-size: 0.541666667rem;
	display: flex;
}
.map-ball {
	background-color: #7cb242;
	width: 0.75rem;
	height: 0.75rem;
	color: #ffffff;
	border-radius: 50%;
	font-size: 0.541666667rem;
	line-height: 0.75rem;
	text-align: center;
	margin: 0.1rem;
	margin-right: 0.3rem;
}

/*

END: map

*/

.about .patrons .name {
	font-size: 0.708333333rem;
	font-family: "OpenSans", sans-serif;
}
.about .patrons .profession {
	font-size: 0.75rem;
	font-family: "OpenSans-Light", sans-serif;
}

.about .patrons .description {
	padding-right: 1rem;
	line-height: 0.9rem;
}

.about .patrons {
	display: inline-flex;
	flex-flow: row;
}

.about .patrons-first img,
.patrons-second img {
	border: 3px solid #fff;
	box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.09);
}

.about iframe {
	border: 0;
}

.about .main p {
	font-size: 0.541666667rem;
	text-align: left;
	color: HSL(0, 0%, 45%);
	line-height: 0.9rem;
	padding-right: 2rem;
}
.about .main p:last-child {
	padding-bottom: 0.5rem;
}
.about .patrons p {
	font-size: 0.541666667rem;
}

.about .main > div {
	padding-top: 1rem;
	padding-bottom: 1rem;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 16rem;
}

.about .main {
	display: flex;
	flex-flow: row wrap;
}

.about .how-it-works {
	padding-bottom: 1rem;
}

.about .how-it-works .steps {
	display: flex;
	justify-content: space-around;
	flex-flow: row wrap;
	text-align: center;
}

.about .how-it-works .steps > div {
	margin-left: 1rem;
	margin-right: 1rem;
}

.about .how-it-works .steps > div > div:nth-child(3) {
	font-size: 0.5rem;
	padding-bottom: 0.5rem;
	padding-top: 0.2rem;
}

.about .how-it-works .steps .ball {
	margin: 1rem auto;
	height: 1.75rem;
	width: 1.75rem;
	border-radius: 50%;
	color: white;
	text-align: center;
	line-height: 1.75rem;
	font-weight: bold;
	flex-shrink: 0;
	background-color: HSL(89, 46%, 48%);
	border-color: HSL(89, 46%, 48%);
	font-size: 0.6rem;
}

.about .how-it-works .action {
	font-size: 0.75rem;
}

.about .how-it-works .who {
	color: hsl(0, 0%, 50%);
}

/*
END: about
*/

/*
BEGIN: contact
*/

.form-header {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-bottom: 1rem;
	background-color: #fbfbfb;
}
.form-header h1 {
	font-weight: 100;
	color: #8c8c8c;
}
.form-container {
	display: flex;
	color: #555555;
}
.form-container p,
.form-container label,
.form-container li,
.form-container input,
.form-container textarea,
.form-container button,
.form-container strong {
	font-size: 0.58333rem;
}
.form-container input {
	color: black;
}
.form-container .contact-info {
	margin: 1rem 0rem;
}
.form-container .contact-form {
	width: 69%;
	margin-right: 2rem;
}
.form-container .contact-sidebar {
	width: 30%;
}
.form-container .contact-sidebar p:first-child {
	margin-top: 1rem;
}
.form-container .contact-sidebar p,
.form-container .contact-sidebar ul {
	margin-bottom: 1rem;
}
.form-container .contact-sidebar ul {
	padding-left: 0;
}
.form-container .contact-sidebar ul > li {
	list-style: none;
}
.form-container .contact-form form {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
	box-sizing: border-box;
	width: 14rem;
	margin-left: 0;
	height: 2rem;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}
.contact-form form label {
	font-size: 0.666666rem;
}
.contact-form form .form-item {
	max-width: 14rem;
	height: 5rem;
}
.contact-form form label {
	color: #ccc;
}
.contact-form form strong {
	color: #4a4a4a;
}
.contact-form form input,
.contact-form form textarea {
	border-radius: 5px;
	color: #4a4a4a;
	border: 1px solid #ccc;
}
.contact-form form input:focus,
.contact-form form textarea:focus {
	box-shadow: 0px 0px 0px 1px hsl(89, 46%, 48%);
	outline: none;
}
.contant-form input {
	width: 100%;
}
.contact-form .form-item-text-area {
	max-width: 23rem;
	width: 100%;
}
.contact-form .form-item-text-area textarea {
	width: 100%;
	height: 6rem;
	display: block;
	padding: 0.5rem;
	margin-top: 0.5rem;
}
.contact-form button span {
	font-size: 0.5rem;
}
.contact-form form button {
	height: 2rem;
	width: 7rem;
	margin: 2rem auto;
	color: #ffffff;
	background-color: hsl(89, 46%, 48%);
	border-radius: 0.25rem;
	border-color: transparent;
	transition: background-color 0.3s;
	cursor: pointer;
}
.contact-form form button:hover {
	background-color: hsl(93, 47%, 42%);
}
.contact-form form button:focus {
	outline: none;
}
.contact-sidebar a {
	color: hsl(89, 46%, 48%);
	transition: color 0.3s;
}
.contact-sidebar a:hover {
	color: #4a4a4a;
}

@media screen and (max-width: 72rem) {
	.contact-form form .form-item {
		width: 100%;
		max-width: 35rem;
	}
	.contact-form .form-item-text-area {
		max-width: 35rem;
		width: 100%;
	}

	.contact-form input[type="text"],
	.contact-form input[type="email"] {
		width: 100%;
		display: block;
	}
	.contact-form .form-item text {
		width: 100%;
		max-width: 35rem;
	}
}

@media screen and (max-width: 56.875rem) {
	.form-container {
		flex-direction: column;
	}
	.form-container .contact-sidebar,
	.form-container .contact-form {
		width: 100%;
	}
	.form-container .contact-form form {
		justify-content: flex-start;
		flex-order: 2;
	}
}

@media screen and (max-width: 45rem) {
	.form-container .contact-form form {
		justify-content: space-around;
	}
	.form-container .contact-sidebar {
		text-align: center;
	}
	.form-container .contact-form button {
		width: 100%;
	}
}

@media screen and (max-width: 21.25rem) {
	.contact-form input[type="text"],
	.contact-form input[type="email"] {
		width: 10rem;
	}
}

/* ERROR */
.form-header strong {
	color: #ed0061;
	font-size: 1.75rem;
}

.contact-form .error input,
.contact-form .error textarea {
	background-color: #f9dde6;
	color: #ed0061;
	box-shadow: 0px 0px 0px 1px #f9dde6;
}

.contact-form .error input:focus,
.contact-form .error textarea:focus {
	box-shadow: 0px 0px 0px 1px #ed0061;
}

.contact-form .error label {
	color: #ed0061;
}

.contact-form .error_msg {
	background-color: #f9dde6;
	color: #ed0061;
	border-radius: 0.25rem;
	border: 1px solid #ed0061;
	padding: 1rem;
}

.contact-form .error_msg ul {
	padding-left: 0.75rem;
}

/*
END: contact
*/

/*
START: how-to-help
*/

.how-to-help h1 {
	font-size: 1.33333333rem;
	line-height: 2rem;
	font-weight: 200;
}

.how-to-help img {
	width: 8.333333333rem;
	height: 8.333333333rem;
	box-shadow: 0px 1px 5px 1px hsla(0, 0%, 0%, 0.1);
	margin-bottom: 0.5rem;
}

.how-to-help a {
	font-weight: bold;
	font-size: 0.483333333rem;
}

.how-to-help .all-squares {
	display: flex;
	flex-direction: column;
}

.how-to-help .all-squares .upper-squares,
.how-to-help .all-squares .lower-squares {
	display: flex;
}

.how-to-help .all-squares .upper-squares div,
.how-to-help .all-squares .lower-squares div {
	margin: 1rem;
	text-align: right;
}

.how-to-help .all-squares .upper-squares div:last-child,
.how-to-help .all-squares .lower-squares div:last-child {
	display: flex;
	align-items: center;
	text-align: left;
}

/*
END: how-to-help
*/

/*
BEGIN: truncate
*/
.read-more {
	overflow: hidden;
	position: relative;
	transition: max-height 200ms;
}
.read-more div {
	font-size: 0.541666667rem;
	text-align: justify;
}

.read-more.needs-truncate.truncated:after {
	display: block;
	content: " ";
	position: absolute;
	background-image: url(/img/white-gradient-bottom.png);
	bottom: 0;
	width: 100%;
	height: 1rem;
}

/*
END: truncate
*/

/*
BEGIN: button
*/

.button {
	background-color: hsl(89, 46%, 48%);
	color: white;
	border-radius: 0.125rem;
	border: none;
	display: inline-block;
	height: 1.5rem;
	margin: 0.25rem 0;
	cursor: pointer;
	font-size: 0.458333333rem;
	font-weight: bold;
}

/*
END: button
*/

/*BEGIN : bayer-learn-more*/
.content-bayer-learn-more {
	max-width: none;
	display: block;
	margin: 0;
	padding: 0;
}

.bayer-learn-more {
	display: flex;
	flex-flow: column;
}

.bayer-learn-more .watchword h2,
.bayer-learn-more .products .item .content {
	max-width: calc(297mm + 3rem);
	margin: 0 auto;
	padding: 0 1rem;
	width: 100%;
}

.bayer-learn-more .watchword {
	background-color: hsl(0, 0%, 89%);
	font-size: 0.958333333rem;
	width: 100%;
	padding: 1.5rem;
	position: relative;
	top: -1rem;
}

.bayer-learn-more .watchword h2 {
	font-size: 1rem;
	line-height: 1.2rem;
	color: hsl(0, 0%, 26%);
	letter-spacing: -0.5px;
}

.bayer-learn-more .watchword h2:nth-child(2) {
	font-family: "OpenSans-Semibold", sans-serif !important;
}

.bayer-learn-more .products {
	display: block;
	background-color: hsl(0, 0%, 99%);
	position: relative;
	top: -1rem;
}

.bayer-learn-more .products .item {
	width: 100%;
	margin-top: 1rem;
	margin-bottom: 1rem;
	background-color: #fff;
	border-bottom: 5px solid hsl(0, 0%, 98%);
	padding: 1rem;
}

.bayer-learn-more .products .item .content {
	display: flex;
	flex-flow: row;
}

.bayer-learn-more .products .item .content p,
.bayer-learn-more .products .item .content strong,
.bayer-learn-more .products .item .content em,
.bayer-learn-more .products .item .content li {
	text-align: left;
	font-size: 0.6rem;
}

.bayer-learn-more .products .item .content div[class^="item"] {
	position: relative;
	top: -1rem;
	padding: 1rem;
}

.bayer-learn-more .products .item .content div[class^="item"] img {
	width: 6rem;
	margin-bottom: 1rem;
	max-height: 8rem;
	object-fit: contain;
}

.bayer-learn-more .products .item .content div[class^="logo"] {
	margin-bottom: 1rem;
}

.bayer-learn-more .products .item .content div[class^="logo"] img {
	max-width: 8rem;
}

.bayer-learn-more .products .item .content .description {
	display: flex;
	justify-content: flex-start;
	flex-flow: column;
}
.bayer-learn-more .products .item .content .description div:first-child {
	margin-bottom: 1rem;
}

.bayer-learn-more .button {
	font-size: 0.6rem;
	height: 2rem;
	padding: 0 0.5rem;
	font-family: "OpenSans-Light", sans-serif;
}

@media all and (max-width: 44rem) {
	.bayer-learn-more .products .item .content {
		flex-flow: row wrap;
		justify-content: center;
	}
}
/*END : bayer-learn-more*/

.dangerous-html {
	font-size: inherit;
}

.breakable {
	word-break: break-all;
}

.password-reset {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.password-reset__submit {
	margin-top: 1rem;
}

.content-animals .empty-list-message {
	font-size: 1rem;
	max-width: 30rem;
	margin: 0 auto;
}