#pivo-box-popup *, #pivo-box-popup-mobile * {
	font-family: "DIN Condensed", sans-serif;
}

#pivo-box-popup, #pivo-box-popup-mobile {
	position: fixed;
	background-color: #fff;
	z-index: 9999;
	-webkit-transition: transform .4s ease;
	transition: transform .4s ease;
}

#pivo-box-popup {
	width: 320px;
	height: 250px;
	box-shadow: rgba(0, 0, 0, 0.5) 4px 4px 17px;
}

#pivo-box-popup-mobile {
	width: 100vw;
	height: 155px;
	bottom: 0;
	left: 0;
	-webkit-transform: translateY(100px);
	transform: translateY(100px);
	display: none;
}

@media screen and (max-width: 640px) {
	#pivo-box-popup-mobile {
		display: block;
	}

	#pivo-box-popup {
		display: none;
	}
}

.pivo-box-grid {
	padding: 20px;
	display: grid;
	grid-template-columns: auto 129px;
	grid-column-gap: 32px;
	grid-template-rows: 90% 10%;
	grid-template-areas:
		'content header'
		'footer  footer';
	width: 100%;
	height: 100%;
	align-items: center;
}

#pivo-box-popup:hover {
	-webkit-transform: translateX(0) !important;
	transform: translateX(0) !important;
}

#pivo-box-popup-mobile:hover, #pivo-box-popup-mobile.active {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

#pivo-box-popup-mobile.animated {
	-webkit-animation: pivo-box-show-mobile 5.6s;
	animation: pivo-box-show-mobile 5.6s;
}

#pivo-box-popup > div {
	box-sizing: border-box;
}

/* Positioning */
/* LEFT */
#pivo-box-popup.pivo-box-bottom-left, #pivo-box-popup.pivo-box-top-left {
	left: 0;
	-webkit-transform: translateX(-320px);
	transform: translateX(-320px);
	border-right: 4px solid #383937;
}

/* RIGHT */
#pivo-box-popup.pivo-box-bottom-right, #pivo-box-popup.pivo-box-top-right {
	right: 0;
	-webkit-transform: translateX(320px);
	transform: translateX(320px);
	border-left: 4px solid #383937;
}

/* BOTTOM */
#pivo-box-popup.pivo-box-bottom-left, #pivo-box-popup.pivo-box-bottom-right {
	bottom: 0;
}

/* TOP */
#pivo-box-popup.pivo-box-top-left, #pivo-box-popup.pivo-box-top-right {
	top: 80px;
}

#pivo-box-popup.pivo-box-bottom-left.animated, #pivo-box-popup.pivo-box-top-left.animated {
	-webkit-animation: pivo-box-show-left 5.6s;
	animation: pivo-box-show-left 5.6s;
}

#pivo-box-popup.pivo-box-bottom-right.animated, #pivo-box-popup.pivo-box-top-right.animated {
	-webkit-animation: pivo-box-show-right 5.6s;
	animation: pivo-box-show-right 5.6s;
}

/* Parts */
#pivo-box-popup .pivo-box-header {
	width: 100%;
	color: #383937;
	text-align: center;
	line-height: 1.1;
	text-transform: uppercase;
	font-size: 1em;
	grid-area: header;
}

#pivo-box-popup-mobile .pivo-box-header {
	height: 55px;
	background-color: #000;
	color: #fff;
	text-align: center;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	cursor: pointer;
}

#pivo-box-popup-mobile .pivo-box-info {
	width: 350px;
}

#pivo-box-popup-mobile .pivo-box-content {
	height: 75px;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
}

#pivo-box-popup-mobile .pivo-box-footer {
	height: 15px;
	padding: 5px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15px;
	text-align: center;
	color: #717270;
	line-height: 15px;
}

#pivo-box-popup-mobile .pivo-box-content svg {
	height: 30px;
}

#pivo-box-popup-mobile .pivo-box-content .pivo-box-subinfo {
	display: flex;
	align-items: center;
	color: #717270;
}

#pivo-box-popup-mobile .pivo-box-content .pivo-box-subinfo-icon {
	padding: 0 10px;
	text-align: center;
	line-height: 16px;
}

#pivo-box-popup-mobile .pivo-box-content .info-counter {
	font-size: 25px;
	margin-right: 10px;
}

#pivo-box-popup-mobile .pivo-box-subinfo.full .pivo-box-subinfo-text, #pivo-box-popup-mobile .pivo-box-content.full .pivo-box-subinfo .counter {
	color: #469721;
}

#pivo-box-popup .pivo-box-header .pivo-box-info {
	font-weight: normal;
	font-size: 18px;
}

#pivo-box-popup .pivo-box-header .pivo-box-subinfo {
	color: #dedfdd;
	margin-top: 20px;
	font-size: 18px;
}

#pivo-box-popup .pivo-box-header .pivo-box-subinfo p {
	margin-top: 3px;
}

#pivo-box-popup .pivo-box-header .pivo-box-subinfo .counter {
	font-size: 20px;
	display: inline-block;
	position: relative;
	top: -7px;
}

#pivo-box-popup .pivo-box-header .pivo-box-subinfo .fa-truck {
	height: 25px;
}

#pivo-box-popup .pivo-box-header .pivo-box-subinfo.full p, #pivo-box-popup .pivo-box-header.full .pivo-box-subinfo .counter {
	color: #469721;
}

#pivo-box-popup .pivo-box-content {
	grid-area: content;
}

#pivo-box-popup #pivo-box-graphics {
	width: 100%;
	display: block;
	margin: 0 auto;
	position: relative;
}

#pivo-box-popup .pivo-box-footer {
	font-size: 13px;
	grid-area: footer;
	text-align: center;
	color: #717270;
	line-height: 15px;
}

#pivo-box-popup .pivo-box-handle {
	width: 35px;
	height: 140px;
	background: #383937;
	position: absolute;
	cursor: pointer;
}

#pivo-box-popup .pivo-box-handle .counter {
	font-size: 20px;
	font-family: "DIN Condensed", Sans-serif;
	color: #fff;
	position: absolute;
	text-align: center;
	width: 115px;
	transform-origin: 0 0;
}

/* LEFT */
#pivo-box-popup.pivo-box-bottom-left .pivo-box-handle {
	right: -35px;
	bottom: 0px;
	clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
}

#pivo-box-popup.pivo-box-bottom-left .pivo-box-handle .counter {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	bottom: -35px;
	left: 5px;
}

#pivo-box-popup.pivo-box-bottom-right .pivo-box-handle {
	left: -35px;
	bottom: 10px;
	clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
}

#pivo-box-popup.pivo-box-bottom-right .pivo-box-handle .counter {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	bottom: -35px;
	right: 0;
	transform-origin: 100% 0;
}

#pivo-box-popup.pivo-box-top-left .pivo-box-handle {
	right: -35px;
	top: 10px;
	clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

#pivo-box-popup.pivo-box-top-left .pivo-box-handle .counter {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	bottom: -10px;
	left: 0;
}

#pivo-box-popup.pivo-box-top-right .pivo-box-handle {
	left: -35px;
	top: 10px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
}

#pivo-box-popup.pivo-box-top-right .pivo-box-handle .counter {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	bottom: -10px;
	right: 0;
	transform-origin: 100% 0;
}

/* Animation */
@-webkit-keyframes pivo-box-show-left {
	0% {
		transform: translateX(-320px);
	}
	10% {
		transform: translateX(0);
	}
	90% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-320px);
	}
}

@keyframes pivo-box-show-left {
	0% {
		transform: translateX(-320px);
	}
	10% {
		transform: translateX(0);
	}
	90% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-320px);
	}
}

@-webkit-keyframes pivo-box-show-right {
	0% {
		transform: translateX(320px);
	}
	10% {
		transform: translateX(0);
	}
	90% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(320px);
	}
}

@keyframes pivo-box-show-right {
	0% {
		transform: translateX(320px);
	}
	10% {
		transform: translateX(0);
	}
	90% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(320px);
	}
}

@-webkit-keyframes pivo-box-show-mobile {
	0% {
		transform: translateY(100px);
	}
	10% {
		transform: translateY(0);
	}
	90% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100px);
	}
}

@keyframes pivo-box-show-mobile {
	0% {
		transform: translateY(100px);
	}
	10% {
		transform: translateY(0);
	}
	90% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100px);
	}
}