/*
Theme Name: Okoa Pet Theme
Theme URI:
Description: Custom theme for OkoaPet.com
Author: Roman Franklin
Author URI:
Version: 1.0
*/


/* || GENERAL STYLES */
/* ------------------------------------------------ */

html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	overflow-x: hidden;
}

.inline-list, .list-style-none {
	list-style: none;
	margin: 0;
	padding: 0;
}

.inline-list li {
	display: inline-block;
}

a {
	color: #032d77;
	text-decoration: none;
	transition: 0.25s;
}

a:hover {
	text-decoration: none;
	color: #ea5f02;
}

.the-boop-single-article a {
	font-weight: bold;
	text-decoration: underline;
}

img {
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	color: #032d77;
	font-family: karmina-sans, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.subheading {
	font-family: ff-avance-pro, serif;
	font-style: italic;
	font-weight: 400;
}

.full-width {
	width: 100vw;
	margin-left: calc(50% - 50vw);
    /* overflow-x: hidden; */
}

.full-height {
	height: calc(100vh - 150px);
}





/* || TYPOGRAPHY */
/* ------------------------------------------------ */

@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("assets/fonts/font-awesome/fa-brands-400.eot");
    src: url("assets/fonts/font-awesome/fa-brands-400.eot#iefix") format("embedded-opentype"), url("assets/fonts/font-awesome/fa-brands-400.woff") format("woff2"), url("assets/fonts/font-awesome/fa-brands-400.woff") format("woff"), url("assets/fonts/font-awesome/fa-brands-400.ttf") format("truetype"), url("assets/fonts/font-awesome/fa-brands-400.svg") format("svg");
}

.fab {
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400;
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("assets/fonts/font-awesome/fa-solid-900.eot");
  src: url("assets/fonts/font-awesome/fa-solid-900.eot#iefix") format("embedded-opentype"), url("assets/fonts/font-awesome/fa-solid-900.woff") format("woff2"), url("assets/fonts/font-awesome/fa-solid-900.woff") format("woff"), url("assets/fonts/font-awesome/fa-solid-900.ttf") format("truetype"), url("assets/fonts/font-awesome/fa-solid-900.svg") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

.fa,.fab,.fal,.far,.fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1
}

.fa-facebook-f::before { content: "\f39e"; }
.fa-twitter::before { content: "\f099"; }
.fa-linkedin-in::before { content: "\f0e1"; }
.fa-instagram::before { content: "\f16d"; }
.fa-shopping-cart::before { content: "\f07a"; }
.fa-caret-left::before { content: "\f0d9"; }
.fa-caret-right::before { content: "\f0da"; }
.fa-plus::before { content: "\f067"; }
.fa-minus::before { content: "\f068"; }
.fa-times::before { content: "\f00d"; }
.fa-search::before { content: "\f002"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-phone::before { content: "\f095"; }
.fa-play::before { content: "\f04b"; }

body {
	color: #032d77;
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.marydale {
	font-family: marydale, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.proxima {
	font-family: proxima-nova, sans-serif;
}

.text-black {
	color: #000;
}

.text-blue {
	color: #032d77;
}

.text-yellow {
	color: #f7dd6d;
}

.text-orange {
	color: #ffa412;
}

.sr-only {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}


/* || HEADER AND NAVIGATION */
/* ------------------------------------------------ */

.op-site-header {
	position: fixed;
	width: 100%;
	top: 0;
	background: #fff;
	z-index: 1039;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
	transition: 0.2s;
}

.admin-bar .op-site-header {
	top: 32px;
}

.op-topbar {
	background-color: #032d77;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	padding: 0 32px;
	/* text-transform: uppercase; */
	min-height: 55px;
}

.topbar-right {
	position: absolute;
	right: 0;
}

.op-topbar .contact 		{ font-size:14px; }
.op-topbar .contact a 		{ color:#fff; transition:0.2s; }
.op-topbar .contact a:hover { color:#ee6b58; }

ul.social 		{ font-size: 20px; color: #fff; }
ul.social li 	{ width: 40px; text-align: center; }
ul.social li a 	{ color: #fff; }

.op-main-header {
	background: #fff;
    padding: 10px 0 14px;
}

.op-main-header .container { height:100%; }

.op-main-header-interior {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	height: 100%;
    background: #fff;
}

.op-main-header--left,
.op-main-header--right {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    	align-self: center;
}


/*------------------------------------------------- Logo */

.op-logo img 	{ max-height: 56px; }
.op-link-block 	{ display: inline-block; }


/*------------------------------------------------- Nav Menu */

.op-main-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100%;
}

.op-main-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    margin-bottom: 0;
}

.op-main-menu .nav-home {
	height: 100%;
}

.op-main-menu ul > .menu-item {
	margin-right: 15px;
}

.op-main-menu ul > .menu-item:last-child {
	margin-right: 0;
}

.op-main-menu .menu-item {
    position: relative;
    height: 100%;
}

.op-main-menu ul .menu-item > a {
	height: 100%;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	display: -ms-inline-flex;
	display: -o-inline-flex;
	display: inline-flex;
	font-size: 16px;

	overflow: hidden;
	align-items: center;
	text-transform: uppercase;
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.cart-total {
	display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    color: #fff;
    margin-left: 8px;
    margin-top: -2px;
    background-color: #ee6b58;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

ul.accepted-cards {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

ul.accepted-cards li {
	margin-right: 4px;
	height: 25px;
	width: 40px;
}

.op-topbar a.view-cart {
	color: #fff;
	font-size: 22px;
	padding: 12px 0;
}

.op-main-menu .menu-item-has-children > ul {
	top: 100%;
	width: 200px;
    padding-left: 0;
    background: #fff;
    position: absolute;
    display: block;
    z-index: 10;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    opacity: 0;
    visibility: hidden;
    padding: 10px 0;
    border-radius: 4px;
	box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.1)
}

.op-main-menu .menu-item:hover > ul {
	opacity: 1;
	visibility: visible;
}

.op-main-menu .menu-item-has-children > ul > li {
	padding: 0;
    margin: 0;
    position: relative;
    line-height: 16px;
}

.op-main-menu .menu-item-has-children > ul > li a {
	height: 100%;
    display: block;
    padding: 7px 20px;
    background: transparent;
    font-size: 13px;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 1.6em;
}

.op-main-menu .menu-item-has-children > ul > li:hover > a {
	background-color: #f3f3f3;
}

span.cart {
	margin-left: 8px;
}



/*---------------------- MOBILE MENU */

.mobile-button-wrapper,
.mobile-menu-wrapper {
    display: none;
}

.mobile-menu-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: -1;
    transform: translateY(-100%);
    transition: 0.3s ease-in-out;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.mobile-menu-wrapper.active {
    display: block;
    transform: translateY(100%);
}

.mobile-menu-button {
    height: 50px;
    width: 50px;
    padding: 10px;
    border: 1px solid #eaeaea;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    line-height: 1.5em;
    background-color: #fff;
    border-radius: 4px;
}

.op-menu-icon {
    width: 100%;
    height: 4px;
    background: #222;
    position: relative;
    transition: 0.3s;
}

.op-menu-icon::before,
.op-menu-icon::after {
    content: "";
    position: absolute;
    height: 4px;
    width: 100%;
    background: #222;
    left: 0;
}

.op-menu-icon::before {
    top: -8px;
}

.op-menu-icon::after {
    bottom: -8px;
}

.op-mobile-menu ul {
    list-style: none;
    padding: 0;
}

.op-mobile-menu ul.sub-menu {
    padding-left: 20px;
}

.op-mobile-menu ul li {
	position: relative;
}

.op-mobile-menu ul li::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 85%;
	background: #ccc;
	height: 1px;
}

.op-mobile-menu ul li a {
	display: block;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 900;
}






/* || MAIN */
/* ------------------------------------------------ */

main {
	padding-top: 134px;
}

.op-content.default-page {
	background: url('assets/images/bg-elements.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.home .op-content {
	background-position: center 850px;
}

.woocommerce .op-content {
	background: #fff;
}

/*.op-btn-wrapper {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}*/

.op-btn-wrapper.center {
	text-align:center;
}

.op-btn-wrapper.right {
	text-align: right;
}

.op-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: none;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
	border-radius: 20px;
    text-transform: uppercase;
    padding: 8px 15px;
    font-weight: 700;
    font-size: 14px;
}

.btn-big {
	font-size: 25px;
	padding: 15px 50px;
	border-radius: 50px;
}

.btn-red {
    color: #fff;
    background-color: #ee6b58;
}

.btn-red:hover {
	color:#fff;
	background: #ea442b;
}

.btn-yellow {
	color:#fff;
	background-color: #e0e505;
}

.btn-yellow-2 {
	color: #042759;
	background-color: #f4c234;
}

.btn-yellow-2:hover {
	background: #042759;
	color: #fff;
}

.btn-orange {
	color:#042759!important;
	background-color: #f4c234;
}

.btn-orange:hover {
	background: #fff;
}

.btn-blue {
	color: #85afdd;
	background-color: #032d77;
}

.btn-blue:hover {
	color: #fff;
}

.btn-text-blue {
	color: #01bad8;
}

.op-page-header {
	padding-top: 80px;
}

.op-page-content {
	padding-bottom: 80px;
}


/* || FRONT PAGE */
/* ------------------------------------------------ */

.front-page-content {
	flex: 1;
}

.welcome {
	font-size: 54px;
    line-height: 46px;
    margin-bottom: 40px;
}

@media (min-width: 1200px) {
	.pup {
		padding-left:75px;
	}
}

.op-section {
	padding-bottom: 100px;
}

.op-front-page-header {
	background-color: #ffa312;
	background-image: url('assets/images/front-page-header.jpg');
	background-size: cover;
	background-position: center -100px;
	background-repeat: no-repeat;
    padding: 80px 0;
	min-height:  600px;
	position: relative;
	overflow: hidden;
}

.separator.curved {
	height: 60px;
    width: 100vw;
    background: #fff;
    position: absolute;
    bottom: 0;
    border-radius: 200% 200% 0 0;
    left: 0;
}












.product-link-wrapper {
	padding: 0 15px;
}

.product-link-wrapper a {
	transition: 0.15s;
	display: block;
}

.product-link-wrapper a:hover {
	transform: scale(1.05) rotate(5deg);
}

.product-link-wrapper.right a:hover {
	transform: scale(1.05) rotate(-5deg);
}


/* || Section Why Okoa */
/* ------------------------------------------------ */

.why-okoa-icon {
	height:91px;
	width:100px;
	margin:0 auto 20px;
	background: url('assets/images/why-okoa-icons.png');
}

.why-okoa-section a h4,
a .why-okoa-icon {
	transition: 0.15s;
}

a:hover .why-okoa-icon {
	transform: rotate(-5deg);
}

.why-okoa-section a:hover h4 {
	color: #ee6b58;
}

.why-okoa-icon.icon-1 {
	background-position: 0 0;
}

.why-okoa-icon.icon-2 {
	background-position: -100px 0;
}


.why-okoa-icon.icon-3 {
	background-position: -200px 0;
}

.why-okoa-grey-icons,
.okoa-badges {
	width: 87.5px;
	height: 85px;
	background: url('assets/images/why-okoa-grey-icons.png');
}

.okoa-badges.dark,
.why-okoa-grey-icons.dark {
	background: url('assets/images/dark-badges.png');
}

.why-okoa-grey-icons.light-blue {
	background: url('assets/images/light-blue-badges.png');
}

.why-okoa-grey-icons.icon-1 { background-position: 0 0; }
.why-okoa-grey-icons.icon-2 { background-position: -87.5px 0; }
.why-okoa-grey-icons.icon-3 { background-position: -175px 0; }
.why-okoa-grey-icons.icon-4 { background-position: -262.5px 0; }
.why-okoa-grey-icons.icon-5 { background-position: -350px 0; }
.why-okoa-grey-icons.icon-6 { background-position: -437.5px 0; }
.why-okoa-grey-icons.icon-7 { background-position: -525px 0; }
.why-okoa-grey-icons.icon-8 { background-position: -612.5px 0; }
.why-okoa-grey-icons.icon-9 { background-position: -700px 0; }


/* || Section About */
/* ------------------------------------------------ */

.section-about {
/*	background-image: url('assets/images/cat-crown.png');
	background-position: left center;
	background-repeat: no-repeat;*/
	padding-bottom: 100px;
}

.cat-bg {
    position: absolute;
    top: 0;
    transform: translateX(-100%);
}

.dog-bg {
    position: absolute;
    top: 0;
    right: -185px;
}


/* || 30 DAY GUARANTEE */
/* ------------------------------------------------ */

.thirty-day-guarantee {
	background: #f2f2f2;
	padding: 40px 0;
}

.luna-pup {
	/* width: 375px; */
/* 	width: 48%; */
	height: 304px;
/* 	padding-left: 160px;
	box-sizing: content-box; */
}

.luna {
/* 	position: relative;
	left: 160px; */
}

.thirty-day-icon {
	right: 0;
	top: -15px;
}

.the-guarantee {
	margin-left: 10px;
}


/* || TESTIMONIALS */
/* ------------------------------------------------ */

#testimonials-slider {
	width: 100%;
}

#testimonials-slider .carousel-inner {
	overflow: visible;
}

#testimonials-slider .carousel-item.active,
#testimonials-slider .carousel-item-next,
#testimonials-slider .carousel-item-prev {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

#testimonials-slider .carousel-indicators {
	bottom: -50px;
}

.carousel-indicators li {
	height: auto;
	width: 20px;
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	border: 1px solid transparent;
	position: relative;
	background: transparent;
}

.carousel-indicators li::before{
	content: "";
	padding-top: 100%;
	width: 100%;
	display: block;
}

.carousel-indicators li .pad {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.carousel-indicators li::after{
	content: "";
	height: 6px;
	width: 6px;
	border-radius: 100%;
	background: #4991bc;
	position: absolute;
}

.carousel-indicators li.active {
	border: 1px solid #4991bc;
}

.testimonials {
	background: #eaebec;
	position: relative;
	overflow: hidden;
}

.quotation-marks {
	position: relative;
	padding: 40px 15px 70px;
	z-index: 2;
}

.quotation-marks::before, .quotation-marks::after {
	height: 83px;
	width: 111px;
	content: "";
	background-image: url('assets/images/quotation-marks.png');
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: -1;
}

.quotation-marks::before {
	top: -13px;
	left: 0;
}

.quotation-marks::after {
	bottom: -13px;
	right: 0;
	transform: scale(-1, -1);
}

.testimonial-wrapper {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
	cursor: pointer;
}

@media (min-width: 1200px) {

	.testimonial-wrapper {
		max-width: 300px;
	}
}


.testimonial-item {
	background:#fff;
	border-radius: 30px;
	padding: 15px;
	position: relative;
	min-height: 160px;
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items:  center;
}

.testimonial-image {
	height: 130px;
	width: 130px;
	border: 15px solid #e0e505;
	border-radius: 20px;
	transform: rotate(-9deg) translateX(-50%);
	transform-origin: left;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -65px;
	background: #fff;
	box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	transition: 0.15s;
}

.testimonial-wrapper:hover .testimonial-image {
	transform: rotate(0) translateX(-50%) scale(1.05);
}

.testimonial-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.testimonial-content {
	padding-left: 75px;
}

.testimonial-content p {
	line-height:  1.2em;
	color: #032d77;
	font-size: 14px;
}

.testimonial-modal img {
	height: auto;
	width:100%;
}

.testimonial-modal .modal-content {
	border-radius: 10px;
	position: relative;
	box-shadow: 7px 7px 14px rgba(0, 0, 0, 0.2);
	border: 15px solid #fff;
}

.testimonial-modal .modal-close {
	position: absolute;
	top: -40px;
	right: -40px;
	color:#fff;
	background: #032d77;
	border: 3px solid #fff;
	border-radius: 100%;
	height: 35px;
	width: 35px;
	cursor: pointer;
	text-align: center;
	line-height: 32px;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
	opacity: 0.5;
	transition: 0.2s;
}

.testimonial-modal .modal-close:hover {
	opacity: 1;
}

.testimonial-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	color:#fff;
	padding: 20px;
}

.testimonial-caption p {
	font-size: 14px;
}

.modal.fade .modal-dialog {
transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,0px);
    transform: translate(0,0px);
}


/* || AS SEEN ON */
/* ------------------------------------------------ */

.as-seen-on { background: #e4e5e6; padding: 50px 0 90px; }
.as-seen-on .channels {
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	justify-content: center;
}
.as-seen-on .channels li { margin: 20px 25px; }
.as-seen-on .channels li.break { width: 100%; margin: 0; }

@media (max-width: 768px) {
	.as-seen-on .channels li { width: 100px; margin: 10px 15px; }
}

/* || Section The Boop */
/* ------------------------------------------------ */

.fp-the-boop {
	background-color: #ffa412;
	background-image: url('assets/images/boop-section-bubbles.png');
	background-size: cover;
	background-position: 50% -100px;
}

.fp-the-boop .boop-logo {
	max-width: none;
	position: absolute;
	top: 30px;
	right: 0;
	transform: translateX(50px);
}

.the-boop-title {
	transform: rotate(-17deg);
    font-weight: 800;
    font-size: 84px;
    position: relative;
    top: 85px;
    left: 45px;
    line-height: 45px;
}

.the-boop-title span {
	font-size: 60px;
    position: absolute;
    top: -44px;
    left: 56px;
    letter-spacing: 3px;
}

.boop-article {
	flex: 1;
	padding: 50px 20px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
}

.boop-article .article-image {
	width: 85%;
	border-radius: 100%;
	overflow: hidden;
	margin: 0 auto 20px;
	position: relative;
}

.boop-article .article-image::before {
	content: "";
	padding-top: 65%;
	display: block;
}

.boop-article .article-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

.article-preview {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.article-preview h3 {
	flex: 1;
}

.article-preview .date {
	color: #f4f183;
	font-size: 18px;
}







/* || Section Furtography */
/* ------------------------------------------------ */

.furtography {
	background: #efeb73;
	padding-top: 60px;
	padding-bottom: 60px;
}

.furtography h2 {
	font-size: 48px;
	font-weight: 900;
}

.furtography h2 span {
	position: relative;
	display: inline-block;
}

.furtography h2 span::after {
	position: absolute;
	left: 0;
	bottom: 0px;
	height: 12px;
	width: 100%;
	background: url('assets/images/underline-fur.png') center no-repeat;
	content: "";
	background-size: 100%;
}

.furtography p {
	font-size: 20px;
}

.furtography ul.social li a {
	color: #ffa412;
	font-size: 26px;
}

.instagram-feed-wrapper {
	width: 100%;
	background: #fff;
	position: relative;
}

.instagram-feed-wrapper::before {
	content: "";
	padding-top: 100%;
	display: block;
}

.instagram-feed {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.instagram-pic {
	height: 50%;
	width: 50%;
	position: relative;
	overflow: hidden;
}

.instagram-pic:hover img {
	z-index: 10;
	transform: scale(1.1);
}

.instagram-pic::before {
	content: "";
	padding-top: 100%;
	display: block;
}

.instagram-pic img {
	position: absolute;
	height: 100%;
	width: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
	transition: 0.15s;
}

/* || HUSH PUPPY FB LANDING PAGE */
/* ------------------------------------------------ */

.op-landing-page-header {
	background: #05bad8;
	position: relative;
	padding-top: 40px;
	padding-bottom: 150px;
	overflow: hidden;
}


.op-landing-page-header h1 {
	font-size: 50px;
	line-height: 1;
	margin-bottom: 20px;
}

.discount-button-wrapper {
	margin-top: -45px;
	z-index: 10;
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
}

.discount-button {
	z-index: 100;
	margin: 0 auto;
	position: relative;
	left: -120px;
	bottom: -45px;
	width: 350px;
	height: 288px;
}

@media (min-width: 768px) {
	.discount-button {
		width: 449px;
		height: 370px;
	}
}

.discount-button a {
	display: block;
}

.discount-button a img {
	transition:0.2s;
}

.discount-button a img.discount {
	transform-origin: 33% 67%;
}

.discount-button a:hover > img.package {
	transform:scale(1.05) rotate(2deg);
}

.discount-button a:hover > img.thirty-day {
	transform:scale(1.08) rotate(-2deg);
}

.discount-button a:hover > img.discount {
	transform:scale(1.03) rotate(12deg);
}

.discount-button-text {
	position: absolute;
    left: 100%;
    bottom: 0;
    width: 100%;
    margin-left: 10px;
    transform: translateY(-50%);
    text-transform: uppercase;
    font-family: proxima-nova, sans-serif;
    font-size: 30px;
    color: #f7dd6d;
    line-height: 1.05;
    font-weight: 500;
}

.discount-button-text span {
	font-size: 40px;
}

.landing-page .separator.curved {
	height: 22vw;
    width: 120vw;
    background: #96d8e7;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
    border-radius: 200%;
    left: -10vw;
}

.shift-up {
	margin-top: -80px;
}

.landing-page-header-bottom {
	background: #96d8e7;
	overflow: visible;
	padding-bottom: 40px;
}

.header-bottom-content p.h2 {
	font-family: 'proxima-nova', sans-serif;
	text-transform: uppercase;
	font-size: 30px;
}

.sad-pup-wrapper {
	position: relative;
	width: 255px;
	height: 308px;
}

.sad-pup-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
}

.light-orange-bg {
	background-color: #ffa412;
	overflow: hidden;
}

.dark-orange-bg {
	background-color: #ec910b;
}

.rounded-background {
	position: absolute;
	height: 100%;
	width: calc(50vw - 375px);
	right: 0;
	background: #ffc364;
}

.rounded-bg-circle {
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translateX(-50%);
/* 	padding-top: 100%;
	padding-left: 100%; */
	width: 780px;
	border-radius: 100%;
	background: inherit;
}

.rounded-bg-circle::after {
	content: "";
	padding-bottom: 100%;
	display: block;
}

.light-orange-bg h2 {
	font-size: 40px;
}

.light-orange-bg p {
	font-size: 28px;
}

.dr-rob p.lead {
	font-size: 32px;
	color: #f4e4a2;
	font-family: 'proxima-nova', sans-serif;
	font-weight: 900;
	max-width: 930px;
	line-height: 1;
	margin: 0 auto;
}

.leaf-bg {
	background-image: url('assets/images/leaf-bg.png');
	background-position: center;
	background-repeat: no-repeat;
}

.dr-rob-wrapper {
	margin: 0 auto;
	position: relative;
	width: 646px;
	height: 368px;
	left: -40px;
}

.dr-rob-wrapper img {
	position: absolute;
	bottom: 0;
	left: 0;
}

.dr-rob-text {
	position: absolute;
	left: 310px;
	top: 75px;
	padding-right: 40px;
}

.dr-rob-text span.name {
	font-family: 'karmina-sans', sans-serif;
	font-size: 30px;
	font-weight: 600;
}

.dr-rob-text p {
	font-size: 27px;
	font-style: italic;
	line-height: 1;
	margin-left: 20px;
}

.landing-page .testimonials {
	background: #032d77;
}

.landing-page .testimonials h2 {
	color: #75cedf;
}

.landing-page .testimonials h3 {
	display: none;
}

.landing-page .testimonial-image {
	border-color: #75cedf;
}

.landing-page .quotation-marks::before,
.landing-page .quotation-marks::after {
	background-image: url('assets/images/quotation-marks-lp.png');
}




/* || INGREDIENTS */
/* ------------------------------------------------ */

.page-template-ingredients .op-landing-page-header {
	background-color: #96d8e7;
	background-image: url('assets/images/ingredients/header-bg.png');
	background-position: left;
	background-size: cover;
	padding-bottom: 10vw;
}

.page-template-ingredients .landing-page .separator.curved {
	background: #687aba;
	left: -50vw;
	width: 200vw;
}

.ingredients-main {
	background: #687aba;
	padding-bottom: 120px;
}

.ingredient-wrapper {
	/*background: #fff;*/
	border-radius: 20px;
	height: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	cursor: pointer;
	transition:0.15s;
}

.ingredient-wrapper:hover {
	transform:scale(1.03);
}

.ingredient-image {
	height: 230px;
/* 	background: url('https://okoapet.com/wp-content/themes/okoapet/assets/images/ingredients/hemp.jpg') center no-repeat;
	background-size: cover; */
}

.ingredient-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.ingredient-content {
	padding: 15px;
	background: #fff;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	z-index: 1;
}

.ingredient-content .title {
	min-height: 140px;
	text-align: center;
	font-size: 20px;
	font-family: karmina-sans, sans-serif;
	font-weight: 900;
	color: #032d77;
	text-transform: uppercase;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}

.ingredient-content .arrow {
	background: #ee6b58;
	height: 36px;
	width: 36px;
	border-radius: 100%;
	position: relative;
	margin: 5px auto 10px;
	transition: 0.15s;
	transform-origin:50%;
	transform: rotate(180deg);
}

.ingredient-wrapper:hover .arrow,
.ingredient-wrapper.open .arrow {
	transform: rotate(0deg);
}

.ingredient-content .arrow::before,
.ingredient-content .arrow::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -2px;
	margin-top: -11px;
	width: 4px;
	height: 18px;
	background: #fff;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.ingredient-content .arrow::before {
	transform: rotate(45deg);
	transform-origin: 0 100%;
}

.ingredient-content .arrow::after {
	transform: rotate(-45deg);
	transform-origin: 100% 100%;
}

.ingredient-wrapper .desc {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items:center;
	flex:1;
	text-align: center;
    padding: 20px 15px 15px;
    background: #fff;
    z-index: 0;
    margin-top: -20px;
    transform: translateY(-100%);
    transition: 0.2s ease-out;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}

.ingredient-wrapper.open .desc {
	transform: translateY(0);
}



/* || MOBILITY FB LANDING PAGE */
/* ------------------------------------------------ */

.mobility-landing-page {
	background: url('assets/images/mobility-chews/ChalkboardPattern.jpg');
}

.questions-wrapper {
	padding: 40px 0;
    position: relative;
}

.questions {
	color: #fff;
    list-style: none;
    font-family: marydale, sans-serif;
    position: absolute;
    left: 60px;
    transform: rotate(-5deg);
    font-size: 28px;
    font-weight: 900;
}

.questions li {
	padding: 10px 0;
	position: relative;
}

.questions li::before {
	content: "";
	position: absolute;
	left: -52px;
	top: 50%;
	transform: translateY(-50%);
	height: 46px;
	width: 46px;
	background: url('assets/images/mobility-chews/numbers.png');
}

.questions li:first-child::before {
	background-position: 0 0;
}

.questions li:nth-child(2)::before {
	background-position: -46px 0;
}

.questions li:last-child::before {
	background-position: -92px 0;
	left: -51px;
}

.puppy-bg {
	background: url('assets/images/mobility-chews/puppy-bg.png') center top no-repeat;
	background-size: 100% auto;
	padding-top: 650px;
	padding-bottom: 200px;
	margin-bottom: -150px;
}

.happy-go-puppy-content {
	color: #fff;
	text-align: center;
}

.happy-go-puppy-content h2 {
	font-size: 40px;
}

.happy-go-puppy-content h2 span {
	font-family: marydale, sans-serif;
	font-size: 64px;
	line-height: 1.5em;
}

.product-bag {
	position: relative;
}

.coupon-happy {
	position: absolute;
    right: 0;
    text-align: left;
    top: 62%;
    width: 38%;
    margin-left: 10px;
    transform: translateY(-50%);
    text-transform: uppercase;
    font-family: proxima-nova, sans-serif;
    font-size: 30px;
    color: #f7dd6d;
    line-height: 1.05;
    font-weight: 500;
}

.coupon-happy span {
	font-size: 40px;
}

.hover-rotate {
	transition: 0.2s;
}

.hover-rotate:hover {
	transform: scale(1.05) rotate(-5deg);
}

h2.mobility-header {
	font-size: 60px;
}

.mobility-copy {
	color: #fff;
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
}

.mobility-copy span {
	text-transform: uppercase;
	font-weight: 700;
}

.mobility-copy.big {
	font-size: 25px;
}

.mobility-copy.bigger {
	font-size: 30px;
}

.casey-testimonial {
	margin: 30px 0;
	padding: 60px 0 80px;
	position: relative;
}

.casey-testimonial::before,
.casey-testimonial::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	background: url('assets/images/mobility-chews/divider.png') center top no-repeat;
	background-size: 100% auto;
	width: 100%;
	height: 15px;
}

.casey-testimonial::before {
	top: 0;
}

.casey-testimonial::after {
	bottom: 0;
}

.casey-testimonial h2 {
	margin-bottom: 40px;
}

.casey-testimonial p {
	color: #fff;
	font-size: 28px;
	text-align: right;
	max-width: 480px;
	position: relative;
	z-index: 2;
}

.casey-testimonial p::before,
.casey-testimonial p::after {
	position: absolute;
	content: "";
	background: url('assets/images/mobility-chews/quotation-mark.png') center no-repeat;
	height: 84px;
	width: 112px;
	z-index: -1;
}

.casey-testimonial p::before {
	top: 0;
	left: 0;
	transform: translate(-40%, -60%);
}

.casey-testimonial p::after {
	bottom: 0;
	right: 0;
	transform: translate(40%, 60%) scale(-1);
}

.mobility-footer {
	padding: 60px 0;
}

.mobility-footer p {
	font-style: italic;
	color: #fff;
	font-size: 27px;
}

.dr-rob-section {
	padding-top: 80px;
	margin-bottom: -40px;
}

.mobility-landing-page .dr-rob-wrapper {
	width: 511px;
	height: 357px;
	left: auto;
	top: -80px;
}

.mobility-landing-page .dr-rob-text {
	text-align: center;
	top: 68px;
	left: 20px;
	max-width: 320px;
}

.mobility-landing-page .dr-rob-text p {
	font-size: 16px;
	margin-left: 0;
	line-height: 1.2;
}

.name-bottom {
	    text-align: right;
    font-size: 24px;
    font-weight: 600;
    margin-right: 30px;
    margin-top: 20px;
    font-family: karmina-sans, sans-serif;
}

/* || THE BOOP */
/* ------------------------------------------------ */

.op-content.the-boop {
	background-color: #ffa312;
	background-image: url('assets/images/boop-bg-top.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	color:#fff;
	padding-top: 0;
	margin-top: 120px;
	position: relative;
}

.boop-bg-bottom {
	position: absolute;
	width: 100%;
	top: 60%;
	bottom: 0;
	background: #ffc363;
	background-image: url('assets/images/boop-bg-bubble.png');
	background-repeat: no-repeat;
	background-position: right bottom;
}

.boop-bg-bottom img {
	position: absolute;
	width: 100%;
	top: 0;
	transform: translateY(-99%);
}

.boop-logo {
    position: absolute;
    right: -80px;
    top: -35px;
    z-index: 2;
}

.boop-pups {
	position: absolute;
}

.the-boop .container {
	padding: 40px 15px 160px;
}
.single .the-boop .container {
	padding-bottom: 40px;
}

.the-boop-articles {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-right:25px;
}

.right-border {
	border-right: 2px solid #f4e4a2;
}

.article-wrapper {
	background: #fff;
	width: 47%;
	margin: 60px 0 40px;
	padding: 25px;
	border-radius:40px;
	transition: all 0.15s ease-out;
}

.article-wrapper:hover {
	transform: scale(1.05);
}

.article-wrapper a {
	display: block;
}

.article-wrapper h3,
.article-wrapper p {
	color:#000;
}

.article-wrapper p {
	line-height: 1.2em;
}

.article-wrapper h3 {
	font-weight:800;
	line-height:0.9em;
}

.thumbnail {
	overflow: hidden;
	height: 250px;
	width: 100%;
	border-radius: 40px;
	box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
	transform: translateY(-60px) rotate(-8deg);
	transition: inherit;
}

.thumbnail img {
	height:100%;
	width: 100%;
	object-fit: cover;
}

.article-wrapper:nth-child(even) .thumbnail {
	transform: translateY(-60px) rotate(8deg);
}

.article-wrapper:hover .thumbnail {
	transform: translateY(-60px) rotate(0deg);
}

.pagination {
	justify-content: center;
}

.nav-links {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	margin-bottom: 30px;
}

a:not(.prev):not(.next):not(.dots).page-numbers {
	background: #fff;
	color: #ee6b58;
	border-radius: 30px;
	height: 30px;
	width: 30px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	transition:  0.2s;
	margin: 0 6px;
}

.prev.page-numbers,
.next.page-numbers {
	font-size:  26px;
	color: #fff;
	height: 100%;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.2s;
}

a:not(.prev):not(.next):not(.dots).page-numbers:hover {
	background: #f19689;
	color: #fff;
}

.prev.page-numbers:hover,
.next.page-numbers:hover {
	color: #ee6b58;
}

.page-numbers.current {
	height: 45px;
	width:  45px;
	border-radius: 45px;
	margin: 0 4px;
	background: #ee6b58;
	color: #fff;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.share-article {
	width: 350px;
	max-width: 100%;
    margin: 0 auto;
    border-top: 1px solid #e2e2e2;
    padding: 20px;
    margin-top: 40px;
}

.share-article h4 {
	text-align: center;
	color: #000;
}

ul.share-icons {
	display: flex;
    justify-content: center;
    align-items: center;
}

ul.share-icons li {
	height: 35px;
	width: 35px;
	border-radius: 100%;
	background: #ee6b58;
	margin: 0 4px;
}

ul.share-icons li:first-child { margin-left: 0;}
ul.share-icons li:last-child { margin-right: 0; }

ul.share-icons li a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #fff;
	text-decoration: none;
}


.blog .footer-buffer,
.single-post .footer-buffer {
	display: none;
}

.single .thumbnail {
	transform: none;
	height: 500px;
	margin-bottom: 40px;
}

.article-content {
	color: #000;
    background: #fff;
    border-radius: 40px;
    padding: 40px;
}

.article-content h3 {
	color:#000;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper {
	width: 100%;
    position: relative;
    max-width: 650px;
    margin: 0 auto;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper::before {
	content: "";
	padding-top: 56.25%;
	width: 100%;
	display: block;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


/* || SIDEBAR */
/* ------------------------------------------------ */

.widget {
	margin-bottom: 25px;
}

.widget-title {
	font-size: 18px;
	text-transform: uppercase;
	color:#fff;
}

.blog-sidebar input[type="text"] {
	background: transparent;
    border: 4px solid #f8d25d;
    border-radius: 25px;
    color:#fff;
    width:100%;
    padding: 8px 45px 6px 15px;
    text-transform: uppercase;
    font-size:14px;
    font-weight:700;
    line-height: 1;
}

.blog-sidebar input[type="text"]:focus {
	background: rgba(255, 255, 255, 0.2);
	outline: none;
}

.blog-sidebar input[type="text"]::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.blog-sidebar .search-btn {
	position: absolute;
    right: 7px;
    border-radius: 100%;
    height: 24px;
    width: 24px;
    top: 50%;
    margin-top: -13px;
    background: #fff;
    border: 0;
    color: #ffa312;
}

.widget ul {
	padding: 0;
    margin: 0;
    list-style: none;
}

.widget ul li a {
	color: #fff;
	text-transform: uppercase;
}

.sidebar-products {
	/*max-height:  calc(100vh - 134px);*/
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.admin-bar .sidebar-products {
	/*max-height:  calc(100vh - 166px);*/
}

.sidebar-product {
    transition: 0.2s;
    margin-bottom: 20px;
    max-height: 48%;
}

.sidebar-product:last-child {
	margin-bottom: 0;
}

.sidebar-product:hover {
	transform:scale(1.05)
}

.sidebar-product a {
	display: block;
	position: relative;
    overflow: hidden;
    border-radius: 20px;
    height: 100%;
}

.sidebar-product img {
	margin: 0;
	height: 100%;
    width: 100%;
    object-fit: cover;
}

.product-overlay {
	position: absolute;
	bottom: 0;
	background: rgba(3, 45, 119, 0.5);
	font-family: karmina-sans, sans-serif;
	padding: 8px;
}




/* || ABOUT */
/* ------------------------------------------------ */

.op-about-header {
	background-color: #3dbd1a;
	position: relative;
    min-height: 500px;
    padding-bottom: 80px;
}

.about-page-header-bg img {
	width: 100%;
	height: auto;
	display: block;
}

.about-group img {
display: block;
    margin: 0 auto;
    position: relative;
    bottom: -40px;
}

.about-icon {
	height:120px;
	width:120px;
	margin:0 auto 20px;
	background: url('assets/images/about-icons.png');
}

.about-icon.icon-1 {
	background-position: 0 0;
}

.about-icon.icon-2 {
	background-position: -120px 0;
}


.about-icon.icon-3 {
	background-position: -240px 0;
}

.about-icon.icon-4 {
	background-position: -360px 0;
}


/* || SIDEBAR








/* || SHOP PAGE */
/* ------------------------------------------------ */


.hero-wrap {
	background: #F6F7F7;
	padding: 20px;
	height: 100%;
}

.hero-wrap h2 {
	font-size: 28px;
}

.product-featured-image {
	max-width: 250px;
	display: block;
	margin: 0 auto;
}

.product-featured-image img {
	width: 100%;
	height: auto;
}

.woocommerce ul.products.okoa-product-list {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
}

.okoa-product-list {
	clear: both;
}

.okoa-product-wrapper {
/*	width: 30%;
    margin: 0 1.5%;*/
}

.okoa-product {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	height:100%;
	text-align: center;
	transition: 0.2s;
}

.image-wrap {
	width:100%;
	position: relative;
	margin-bottom: 15px;
	transition: 0.2s;
}

.image-wrap::before {
	content: "";
	display: block;
	padding-top: 100%;
	width: 100%;
}

/*.okoa-product:hover .image-wrap{
	transform: scale(1.02);
}*/

.image-wrap img {
	height:100%;
	width: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

.image-wrap__overlay {
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff7d;
    opacity: 0;
    transition: 0.25s;
}

.image-wrap:hover .image-wrap__overlay {
	opacity: 1;
}

.okoa-product__meta {
	display: block;
}


.okoa-product__title {
	font-size: 24px;
}

.okoa-product__meta:hover .okoa-product__title {
	color: #ea5f02;
	transition: 0.2s;
}

.okoa-product__tagline {
	text-align: center;
	font-style: italic;
	font-size: 20px;
	font-family: ff-avance-pro, serif;
		transition: 0.2s;
}

.okoa-price {
	color: #ee6b58;
	font-size:20px;
}

.okoa-product__button-wrapper {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex: 1;
	align-items: flex-end;
	justify-content: center;
}

.okoa-product__button {
    display: block;
    margin: 0 auto;
    border-radius: 25px;
    text-transform: uppercase;
    background: #ee6b58;
    color: #fff;
    padding: 0px 16px;
    font-weight: 700;
    height: 35px;
    font-size: 100%;
    line-height: 36px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    transition: 0.15s;
}

.okoa-product__button.simple {
    background: #ee6b58;
}

.okoa-product__button.blue {
	background: #032d77;
}

.okoa-product__button.green {
	background:#78D64B;
}

.okoa-product__button:hover {
	color: #fff;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
	transform: translateY(1px);
}




/* || SINGLE PRODUCT */
/* ------------------------------------------------ */

/* .product-page .container {
    padding: 40px 15px 160px;
} */

.op-gallery-video {
	height: 100%;
	width: 100%;
}

.okoapet-gallery-video-thumb {
	position: relative;
	cursor: pointer;
}

.okoapet-gallery-video-thumb::before {
	position: absolute;
	content: "\f04b";
	font-family: 'Font Awesome 5 Free';
	height: 100%;
	width: 100%;
	background: rgba(255, 255, 255, 0.2);
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #05bad8;
	font-size: 48px;
	transition: opacity 0.2s;
	pointer-events: none;
	opacity: 0.5;
}

.okoapet-gallery-video-thumb:hover::before {
	/* background: rgba(255, 255, 255, 0.1); */
	opacity: 1;
}

.okoapet-gallery-video-thumb img {
	opacity: 1!important;
}

.woocommerce div.product div.images .flex-control-thumbs {
	margin:  0 -2.5px;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: calc(25% - 5px);
	margin: 5px 2.5px;
	border: 2px solid #b4e6f0;
}

.op-content.product-page {
	background-color: #23c0de;
	background-image: url('assets/images/product-bg-top.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	color:#fff;
	padding-top: 0;
	margin-top: 120px;
	position: relative;
}


.product-bg-bottom {
	position: absolute;
	width: 100%;
	top: 60%;
	bottom: 0;
	background: #65D3E8;
/*	background-image: url('assets/images/boop-bg-bubble.png');
	background-repeat: no-repeat;
	background-position: right bottom;*/
}

.product-bg-bottom img {
	position: absolute;
	width: 100%;
	top: 0;
	transform: translateY(-99%);
}

.woocommerce.single-product .article-content {
	padding: 20px;
}

.woocommerce.single-product div.product {
	background: #d5eff5;
	padding: 20px;
	padding-bottom: 0;
	border-radius: 20px;
}

.woocommerce #content div.product .woocommerce-tabs, .woocommerce div.product .woocommerce-tabs,
.woocommerce-page #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs {
	margin-left: -20px;
	margin-right: -20px;
}

.woocommerce div.product .product_title {
	line-height: 36px;
    font-weight: 500;
    font-size: 33px;
    font-family: proxima-nova;
}

.woocommerce div.product .woocommerce-product-rating,
.woocommerce.single-product .price {
	margin-bottom: 0;
}

.woocommerce-product-details__short-description {
	font-size: 18px;
	line-height: 22px;
}

ul.product-badges {
	list-style: none;
	padding: 0;
	margin: 0;
}

.desc-main ul.product-badges {
	text-align: center;
}

ul.product-badges li {
	height: 75px;
	width: 75px;
	display: inline-block;
	margin-top: 20px;
	background-image: url('assets/images/icons/larger-badges.png');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

ul.product-badges li.badge-1 { background-position: 0 center; }
ul.product-badges li.badge-2 { background-position: -75px center; }
ul.product-badges li.badge-3 { background-position: -150px center; }
ul.product-badges li.badge-4 { background-position: -225px center; }
ul.product-badges li.badge-5 { background-position: -300px center; }
ul.product-badges li.badge-6 { background-position: -375px center; }
ul.product-badges li.badge-7 { background-position: -450px center; }
ul.product-badges li.badge-8 { background-position: -525px center; }

/* --------------- Variations and attributes ---*/

.woocommerce div.product form.cart .variations {
	margin-bottom: 0;
}

.variations .variations-row,
.single-product .quantity-wrapper,
.wcsatt-options-wrapper {
	background: #b4e6f0;
	border-radius: 10px;
	padding: 10px 20px;
	margin-bottom: 10px;
}

body:not(.single-product) .quantity-wrapper {
	justify-content: flex-end;
}

.wcsatt-options-wrapper {
	position: relative;
}

.wcsatt-options-wrapper::before {
	content: "";
	height: 62px;
	width: 62px;
	background: url('assets/images/icons/discount-bug_ver-1.0.1.png') center no-repeat;
	background-size: 100%;
	left: -45px;
	top: -6px;
	position: absolute;
}

.variations-row .label,
.single-product .quantity-label {
	width: 120px;
}

.wcsatt-options-product-prompt .wcsatt-options-prompt-text {
	margin-bottom: 0;
	text-align: left;
	line-height: 1;
	width: 120px;
}

.wcsatt-options-product-prompt {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

ul.wcsatt-options li,
ul.wcsatt-options-cart li,
ul.wcsatt-options-product li,
ul.wcsatt-options-prompt-radios li {
	text-align: left;
}

.wcsatt-sub-options,
.wcsatt-sub-discount,
.wcsatt-options-prompt-action-input {
	display: none;
}

.wcsatt-options-prompt-action-input + label {

}

.wcsatt-options-prompt-label::before {
	content: "";
	height: 60px;
	width: 60px;
	background: #fff;
	border-radius: 100%;
}

.variations-row .label label,
.single-product .quantity-label label,
.wcsatt-options-prompt-text-label {
	font-size: 27px;
	color: #032d77;
	font-family: proxima-nova;
}



.woocommerce div.product form.cart .variations .label label,
.quantity-label label{
	font-weight: 400;
	margin: 0;
}

.woocommerce div.product form.cart .variations select,
.attribute-radio-button {
	display: none;
}

.attribute-icon {
	cursor: pointer;
	margin-right: 15px;
	text-align: center;
	width: 90px;
	margin-bottom: 0;
}

.attribute-check {
	background-color: #fff;
	height: 65px;
	width: 65px;
	border-radius: 100%;
	margin: 0 auto 3px;
	overflow: hidden;
}

.attribute-name {
	font-weight: 800;
	font-size: 14px;
	color: #032d77;
}

.attribute-radio-button:checked ~ label .attribute-check {
	background-color: #05bad8;
}

.attribute-icon-bg {
	background-image: url('https://okoapet.com/wp-content/themes/okoapet/assets/images/icons/attribute-icons.png?ver=1.0.1');
	background-position: left center;
	background-repeat: no-repeat;
}

.attribute-icon-bg.peppermint 		{ background-position: -65px center; }
.attribute-icon-bg.peanut-butter 	{ background-position: -130px center; }
.attribute-icon-bg.chicken-liver 	{ background-position: -195px center; }
.attribute-icon-bg.icon-one-time 	{ background-position: -261px center; }
.attribute-icon-bg.icon-subscribe	{ background-position: -325px center; }

.woocommerce-variation.single_variation {
	text-align: center;
	margin-bottom: 10px;
}

.woocommerce.single-product div.product form.cart div.quantity {
	margin-left: 15px;
}

ul.wcsatt-options {
	padding: 0;
}

.wcsatt-options-product-dropdown {
	padding: 6px 12px;
	border-radius: 20px;
	border: 2px solid #032d77;
	background: transparent;
	color: #032d77;
    font-weight: bold;
}

.desc-product-package { max-width: 200px; }

.woocommerce table.shop_table_responsive tr td.td-cards::before, 
.woocommerce-page table.shop_table_responsive tr td.td-cards::before { content: ""; display: none;}


/* --------------- Tabs and panels ---*/

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    border: 1px solid #fff;
    border-bottom: 0;
    padding: 10px 50px;
    font-size: 16px;
    background: #05bad8;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:not(:first-child) {
	margin-left: -20px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:first-child { z-index: 2; }
.woocommerce div.product .woocommerce-tabs ul.tabs li:nth-child(2) { z-index: 2; }
.woocommerce div.product .woocommerce-tabs ul.tabs li:nth-child(3) { z-index: 1; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: #fff;
    z-index: 4;
    border-bottom-color: #fff;
}

/* .woocommerce div.product .woocommerce-tabs ul.tabs li:first-child,
.woocommerce div.product .woocommerce-tabs ul.tabs li:nth-child(2),
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-top-left-radius: 20px;
} */

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: #0d3277;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce.single-product div.product .woocommerce-tabs .panel {
	padding-top: 1.618em;
	background: #fff;
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin-bottom: 0;
}

.desc-science-inside {
	padding: 3em 20px;
}

.desc-science-inside h2 {
	font-family: proxima-nova;
	font-weight: 700;
	font-size: 44px;
	margin-bottom: 0;
}

.desc-science-inside .h3 {
	font-size: 22px;
}

.desc-ingredients-wrapper {
	margin-top: -25px;
	position: relative;
}

.desc-ingredients-wrapper .buffer {
	width: 225px;
}

.desc-science-inside .ingredient {
	max-width: 285px;
}

.desc-science-inside .ingredient img {
	max-width: 180px;
	width: 100%;
	display: block;
	margin: 0 auto;
}

.desc-science-inside .ingredient h3 {
	font-size: 19px;
	color: #032d77;
}

.desc-science-inside .ingredient p {
	font-size: 14px;
	color: #032d77;
	line-height: 18px;
}



.panel .desc-main {
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	padding: 3em;
}

.desc-content-wrapper {
	background: #fff;
	padding: 20px;
	color: #032d77;
}

.desc-content-wrapper .subheading {
	color: #05bad8;
	font-size: 22px;
	font-family: proxima-nova;
}


.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: #ee6b58;
	font-size: 2em;
}

.article-content {
	margin-bottom: 40px;
}

.woocommerce::after {
	display: table;
	content: "";
	clear: both;
}

.woocommerce div.product form.cart {
	margin-top: 15px;
}

.quantity {
  position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

input[type=number]
{
  -moz-appearance: textfield;
}

.woocommerce div.product form.cart div.quantity {
	width: 100%;
	max-width: 170px;
	position: relative;
}

.woocommerce .quantity .qty {
  width: 70px;
  height: 42px;
  line-height: 1.65;
  float: left;
  display: block;
  border: 0;
  margin: 0;
    width: 100%;
    padding: 0 50px;
    background: transparent;
}

.quantity input:focus {
  outline: 0;
}

.quantity-button {
	cursor: pointer;
	text-align: center;
	color: #546b70;
	font-size: 13px;
	line-height: 35px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	height:40px;
	width: 40px;
	border-radius:100%;
	border: 4px solid #a7d6df;
	top: 0;
	position: absolute;
}

.quantity-button.quantity-up {
  right:0;
}

.quantity-button.quantity-down {
  left: 0;
}


.woocommerce div.product form.cart .button {
	float: none;
	display: block;
	margin: 0 auto;
	border-radius:25px;
	text-transform: uppercase;
	background: #ee6b58;
}

.serving-size-guidelines-wrapper {
	text-align: center;
	max-width: 700px;
	width: 100%;
	padding: 0 15px;
    margin: 0 0 20px;
    border: 2px solid #05bad8;
    border-radius: 20px;
}

.serving-size-guidelines-wrapper .row:not(:last-child) {
	border-bottom: 2px solid #05bad8;
}

.serving-size-guidelines-wrapper .row {
	font-size: 24px;
	font-weight: bold;
	color: #032d77;
	padding-top: 3px;
	padding-bottom: 3px;
}

.serving-size-guidelines-wrapper .cell {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.serving-size-guidelines-wrapper .cell:first-child {
	width: 180px;
	padding:  0 15px;
	margin:  0 auto;
}

.serving-header h5 {
	font-size: 22px;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1;
	color: #05bad8;
	padding: 15px;
	margin: 0;
}

.serving-size-icon {
	height: 90px;
	width: 150px;
	background: url('assets/images/products/guideline-icons.jpg');
	background-position: center;
	background-repeat: no-repeat;
}

.webp .serving-size-icon {
	background: url('assets/images/products/guideline-icons.webp');
}

.serving-size-icon.small  { background-position: 0 center; }
.serving-size-icon.large  { background-position: -150px center; }









/* || TEAM BIOS */
/* ------------------------------------------------ */

.op-bios-header {
	background: #8ae75d;
	background-image: url('assets/images/bios-header.png');
	background-position: center top;
	background-size: 100% auto;
	position: relative;
}

.bios-header-title {
	max-width: 500px;
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform:translateX(-50%);
}

.page-template-team-bios-template main {
	background: #8ae75d;
}

.bios-bg-bottom {
/*	position: absolute;
	width: 100%;
	bottom: 0;*/
	background: #8ae75d;
}

.bios-bg-bottom img {
	width: 100%;
	top: 0;
}

.bio-modal .modal-dialog {
	max-width: 900px;
}

.bio-modal .modal-content {
	background: url('assets/images/bio-modal-bg.png');
	border: 0;
	border-radius: 0;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
	padding: 40px 80px;
}

.bio-modal .modal-header {
	border: 0;
	border-radius: 0;
}

.bio-modal .bio-title {
	margin-bottom: 60px;
}

.bio-modal .bio-description {
	background: #f4e4a2;
	border-radius: 20px;
	padding: 50px 40px;
	font-size: 18px;
	position: relative;
}

.bio-modal .bio-description::before,
.bio-modal .bio-description::after {
	content:"";
	position: absolute;
	top: 0;
	left: 50%;
	width: 15px;
	height: 40px;
	border-top: 40px solid transparent;
}

.bio-modal .bio-description::before {
	transform: translate(-100%, -100%);
	border-right: 20px solid #f4e4a2;

}

.bio-modal .bio-description::after {
	transform: translateY(-100%);
	border-left: 20px solid #f4e4a2;
}

.bio-modal .bio-image {
	margin: 0 auto 40px;
}

.bio-modal .bio-image img {
	margin: 0 auto;
	display: block;
}

.bio-modal .close {
	background: #466c71;
    color: #fff;
    height: 50px;
    opacity: 1;
    width: 50px;
    border-radius: 100%;
    border: 4px solid #fff;
    padding: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    position: absolute;
    right: -15px;
    transition: 0.25s;
    opacity: 0.75;
}

.bio-modal .close:hover {
	opacity: 1;
}

.bio-modal .close:active {
	transform: translateY(1px);
}

.bio-modal .close:focus {
	outline: 0;
}

@media (max-width: 1200px) {
	.bio-modal .modal-dialog {
		max-width: 800px;
	}

	.bio-modal .modal-content {
		padding: 40px;
	}
}


@media (max-width: 992px) {
	.bio-modal .modal-dialog {
		max-width: 600px;
		width: 90%;
	}
}

@media (max-width: 768px) {
	.bio-modal .bio-image {
		max-width: 300px;
	}
}

@media (max-width: 576px) {
	.bio-modal .modal-dialog {
		margin: 25px auto;
	}

	.bio-modal .modal-body {
		padding: 0;
	}

	.bio-modal .modal-content,
	.bio-modal .bio-description {
		padding: 30px 15px;
	}
}




/* || WOOCOMMERCE */
/* ------------------------------------------------ */

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	background-color:  #ee6b58;
}

.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
	background-color: #ea442b;
}

.woocommerce .col2-set {
	padding-bottom: 30px;
	border-bottom: 1px solid #aaa;
	margin-bottom: 30px;
}

.woocommerce .col2-set .woo-col-1, .woocommerce-page .col2-set .woo-col-1 {
    float: left;
    width: 48%;
}

.woocommerce .col2-set .woo-col-2, .woocommerce-page .col2-set .woo-col-2 {
    float: right;
    width: 48%;
}

.woocommerce form .form-row {
	display: block;
	margin-bottom: 12px;
}

.woocommerce form .form-row label {
	line-height: 1;
}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
	border-radius: 4px;
	padding: 6px;
	border:  1px solid #ccc;
}






/* || FOOTER */
/* ------------------------------------------------ */

.footer {
	background: #032d77;
	color:#fff;
}

.footer a {
	color: #fff;
}

.footer-buffer {
	position: relative;
	height: 187px;
	background: #dfe405;
	background-image: url('assets/images/footer/leaf-pattern.png');
	padding-bottom: 20px;
}

.webp .footer-buffer {
	background-image: url('assets/images/footer/leaf-pattern.webp');
}

.footer-buffer .container {
	height: 100%;
    position: relative;
    bottom: -20px;
}

.footer-pets {
	position: absolute;
	bottom: 0;
	top: -60px;
	left: 15px;
	right: 15px;
	overflow: hidden;
}

.footer-pets .pet {
	background-image: url('assets/images/footer/pets-footer.png');
	display: inline-block;
	position: absolute;
	bottom: -5px;
	transition: 0.4s;
	transition-timing-function: cubic-bezier(.54,.02,.18,1.21);
}

.webp .footer-pets .pet {
	background-image: url('assets/images/footer/pets-footer.webp');
}



.pet-left {
	background-position: 0 0;
	height: 219px;
	width: 107px;
	left: 0;
	transform: translateY(100%);
}

.pet-right {
	height: 219px;
	width: 177px;
	background-position: -107px 0;
	left: 62px;
	transform: translateY(100%);
}

.footer-pets .pet.show {
	transform: translateY(0);
}

.footer-buffer::after {
	position: absolute;
	width: 100%;
	height: 20px;
	bottom: 0;
	left: 0;
	right: 0;
	content: "";
	background-image: url('assets/images/footer/zig-zag.png');
	z-index:10;
}

.footer {
	padding-bottom: 80px;
}

/* Footer Sign Up Form */
.footer-signup img {
	width: 259px;
	display: block;
	margin: 0 auto 20px;
	transform: translateX(-20px);
}
.footer-signup h2 { font-size: 36px; margin-bottom: 15px; }
.footer-signup p { color: #dfe21a; font-size: 24px; margin-bottom: 25px; }
.footer-signup .hbspt-form { width: 100%; max-width: 500px; }
.footer-signup .hbspt-form form { display: flex; position: relative; height: 52px}
.footer-signup label { display: none; }
.footer-signup .hs_email { flex: 1; }
.footer-signup input[type="email"] {
	width: 100%;
	padding: 8px 20px;
	border-radius: 25px;
	border: 0;
	background: #fff;
	box-shadow: 0;
	outline: 0;
	position: absolute;
	color: #000;
}
.footer-signup input[type="email"]::placeholder {color:rgba(0,0,0,0.5)!important;}
.footer-signup .actions { height: 100%; }
.footer-signup .hs_submit { width: 33%; }
.footer-signup input[type="submit"] {
	height: 40px;
	position: relative;
	left: 3px;
	width: 100%;
	border-radius: 25px;
	color: #fff;
	background: #ee6b58;
	text-transform: uppercase;
	font-weight:  bold;
	border: 0;
	outline: 0;
	transition: 0.2s;
}

.footer-signup input[type="submit"]:hover {
	background: #ea442b;
}

.footer-signup .submitted-message { text-align: center; }

.footer-main hr {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	border-top: 2px solid #fff;
}

/* Footer Main Content */

.footer-main {
	overflow:hidden;
}

.footer-main .footer-top {
	padding: 10px 0 30px;
}

.footer-bottom {
	text-align: center;
	font-size:14px;
	padding-top: 50px;
}

.footer-bottom a {
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.footer-bottom ul li:last-child {
	margin-top: 12px;
	text-transform: uppercase
}

.footer-divider {
	width: 100%;
	position: relative;
}

.footer-divider::before {
	content: "";
	width:100vw;
	position: absolute;
	right: 0;
	border-bottom: 2px solid #fff;
}

.footer-couch {
	position: absolute;
    right: -56px;
    bottom: -93px;
}

.footer ul.social li {
	margin-bottom: 10px;
}

.landing-page-footer {
	background: #042759;
}

.landing-page-footer p.h2 {
	font-family: 'proxima-nova', sans-serif;
	font-size: 32px;
	font-weight: 900;
	position: relative;
	z-index: 10;
}

.footer-treats {
	position: relative;
	left: -120px;
}

p.reminder {
	font-size: 20px;
	font-style: italic;
}

p.reminder span {
	color: #f7dd6d;
	text-transform: uppercase;
}



/* || FOOTER NAV */
/* ------------------------------------------------ */

.op-footer-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.op-footer-menu li {
	margin: 7px 0;
}

.op-footer-menu a {
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	font-weight:700;
}







/* || Animations */
/* ------------------------------------------------ */

.product-hide-left {
	opacity: 0;
	transform: translateX(-100px) rotate(-5deg);
}

.reveal-left {
	-webkit-animation:revealLeft ease-out 1;
	-moz-animation:revealLeft ease-out 1;
	animation:revealLeft ease-out 1;

	-webkit-animation-duration:0.6s;
	-moz-animation-duration:0.6s;
	animation-duration:0.6s;
}

.reveal-right {
	-webkit-animation:revealRight ease-out 1;
	-moz-animation:revealRight ease-out 1;
	animation:revealRight ease-out 1;

	-webkit-animation-duration:0.6s;
	-moz-animation-duration:0.6s;
	animation-duration:0.6s;
}

.fill-forward {
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

.product-hide-right {
	opacity: 0;
	transform: translateX(100px) rotate(5deg);
}

.anim-hide {
	opacity: 0!important;
}

.anim-hide-right {
	opacity: 0;
	transform: translateX(20px);
}

.anim-hide-left {
	opacity: 0;
	transform: translateX(-20px);
}

.anim-hide-down {
	opacity: 0;
	transform: translateY(20px);
}

.anim-hide-up {
	opacity: 0;
	transform: translateY(-20px);
}

.fade-in {
  opacity:0;
  -webkit-animation:fadeIn ease-out 1;
  -moz-animation:fadeIn ease-out 1;
  animation:fadeIn ease-out 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:0.6s;
  -moz-animation-duration:0.6s;
  animation-duration:0.6s;
}

.fade-in-left {
  opacity:0;
  -webkit-animation:fadeInLeft ease-out 1;
  -moz-animation:fadeInLeft ease-out 1;
  animation:fadeInLeft ease-out 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:0.5s;
  -moz-animation-duration:0.5s;
  animation-duration:0.5s;
}

.fade-in-down {
  opacity:0;
  -webkit-animation:fadeInDown ease-out 1;
  -moz-animation:fadeInDown ease-out 1;
  animation:fadeInDown ease-out 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:0.25s;
  -moz-animation-duration:0.25s;
  animation-duration:0.25s;
}

.fade-in-right {
  opacity:0;
  -webkit-animation:fadeInRight ease-out 1;
  -moz-animation:fadeInRight ease-out 1;
  animation:fadeInRight ease-out 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:0.25s;
  -moz-animation-duration:0.25s;
  animation-duration:0.25s;
}

.fade-in-up {
  opacity:0;
  -webkit-animation:fadeInUp ease-out 1;
  -moz-animation:fadeInUp ease-out 1;
  animation:fadeInUp ease-out 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:0.25s;
  -moz-animation-duration:0.25s;
  animation-duration:0.25s;
}

.fade-in-down.slow,
.fade-in.slow,
.fade-in-right.slow,
.fade-in-up.slow {
  -webkit-animation-duration:0.5s;
  -moz-animation-duration:0.5s;
  animation-duration:0.5s;
}

.pop-in {
	-webkit-animation: popIn ease-out 1;
	-moz-animation: popIn ease-out 1;
	animation: popIn ease-out 1;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:0.25s;
	-moz-animation-duration:0.25s;
	animation-duration:0.25s;
}

.one {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.two {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.three {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.four {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.five {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-webkit-keyframes fadeInLeft { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0px); } }
@-moz-keyframes fadeInLeft { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0px); } }
@keyframes fadeInLeft { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0px); } }

@-webkit-keyframes fadeInRight { from { opacity:0; transform: translateX(-20px); } to { opacity:1; transform: translateX(0px); } }
@-moz-keyframes fadeInRight { from { opacity:0; transform: translateX(-20px); } to { opacity:1; transform: translateX(0px); } }
@keyframes fadeInRight { from { opacity:0; transform: translateX(-20px); } to { opacity:1; transform: translateX(0px); } }

@-webkit-keyframes fadeInDown { from { opacity:0; transform: translateY(-20px); } to { opacity:1; transform: translateY(0px); } }
@-moz-keyframes fadeInDown { from { opacity:0; transform: translateY(-20px); } to { opacity:1; transform: translateY(0px); } }
@keyframes fadeInDown { from { opacity:0; transform: translateY(-20px); } to { opacity:1; transform: translateY(0px); } }

@-webkit-keyframes fadeInUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0px); } }
@-moz-keyframes fadeInUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0px); } }
@keyframes fadeInUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0px); } }

@-webkit-keyframes revealLeft {
	from { opacity:0; transform: translateX(-100px) rotate(-5deg); }
	to { opacity:1; transform: translateX(0) rotate(0);}
}
@-moz-keyframes revealLeft {
	from { opacity:0; transform: translateX(-100px) rotate(-5deg); }
	to { opacity:1; transform: translateX(0) rotate(0);}
}
@keyframes revealLeft {
	from { opacity:0; transform: translateX(-100px) rotate(-5deg); }
	to { opacity:1; transform: translateX(0) rotate(0);}
}

@-webkit-keyframes revealRight {
	from { opacity:0; transform: translateX(100px) rotate(5deg); }
	to { opacity:1; transform: translateX(0) rotate(0);}
}
@-moz-keyframes revealRight {
	from { opacity:0; transform: translateX(100px) rotate(5deg); }
	to { opacity:1; transform: translateX(0) rotate(0);}
}
@keyframes revealRight {
	from { opacity:0; transform: translateX(100px) rotate(5deg); }
	to { opacity:1; transform: translateX(0) rotate(0);}
}

@-webkit-keyframes popIn { 0% { opacity:0; transform: scale(0.25) rotate(-20deg); } 75% { opacity:1; transform: scale(1.2) rotate(0deg); } 100% { opacity:1; transform: scale(1) rotate(0deg); } }
@-moz-keyframes popIn { 0% { opacity:0; transform: scale(0.5) rotate(-20deg); } 75% { opacity:1; transform: scale(1.2) rotate(0deg); } 100% { opacity:1; transform: scale(1) rotate(0deg); } }
@keyframes popIn { 0% { opacity:0; transform: scale(0.5) rotate(-20deg); } 75% { opacity:1; transform: scale(1.2) rotate(0deg); } 100% { opacity:1; transform: scale(1) rotate(0deg); } }






/* || RESPONSIVE */
/* ------------------------------------------------ */

@media (max-width: 1200px) {
	.landing-page-footer p.h2 {
		font-size:28px;
	}

	.product-bag img {
		max-width: 580px;
	}

	h2.mobility-header {
		font-size: 48px;
	}

	.mobility-copy.bigger {
		font-size: 26px;
	}

	.mobility-landing-page .dr-rob-wrapper {
		left:-40px;
	}
}

@media (max-width: 992px) {
	.footer-couch {
		right: -130px;
	}

	.article-wrapper {
		width: 100%;
	}

	.woocommerce div.product form.cart div.quantity {
		float: none;
	}

	.op-landing-page-header {
		padding-bottom: 100px;
	}

	.shift-up {
		margin-top: -40px;
	}

	.landing-page-footer p.h2 {
		font-size:20px;
	}

	.footer-treats {
		left: -80px;
	}

	.light-orange-bg h2 {
		font-size: 30px;
	}

	.light-orange-bg p {
		font-size: 20px;
	}

	.questions-wrapper {
		height: 200px;
	}

	.puppy-bg {
		width: 120%;
		margin-left: -10%;
		padding-top: 500px;
		margin-bottom: -200px;
	}

	.happy-go-puppy-content h2 {
		font-size: 32px;
	}

	h2.mobility-header {
		font-size:36px;
	}

	.mobility-copy.bigger {
		font-size:20px;
	}

	.mobility-copy.big {
		font-size:18px;
	}

	.dr-rob-section {
		padding-top: 20px;
		margin-bottom: 20px;
	}

	.mobility-landing-page .dr-rob-wrapper {
		top: 0;
	}
}


@media (max-width: 767px) {
	.op-topbar {
		padding: 0 12px;
	}

	.topbar-right {
		position: relative;
	}

	.op-btn.mobile-menu-button {
		padding: 8px 10px;
	}

    .admin-bar .op-site-header {
        top: 0;
    }

    .op-content.the-boop,
    .op-content.product-page {
    	margin-top: 100px;
    }

    .the-boop .right-border {
    	border: 0;
    }

    .the-boop-articles {
    	padding-right: 0;
    }

    .op-main-menu, .op-header-button  {
        display: none;
    }
    .mobile-button-wrapper,
    .mobile-menu-wrapper {
        display: block;
    }

    .op-front-page-header {
    	height:auto;
    	padding-bottom: 80px;
    }

    .front-page-header-content-wrapper {
    	align-items: center;
    }

    .pup {
    	width: 150px;
    }

    .pup .op-btn {
    	font-size: 20px;
    }

    .why-okoa-section.op-section {
    	padding-bottom: 0;
    }

    .cat-bg {
    	position: relative;
    	transform: none;
    	top: -40px;
    }

    .cat-bg img {
    	display: block;
    	margin: 40px auto 0;
    }

    .dog-bg {
    	position: relative;
    	transform: none;
    	right: initial;
    	display: flex;
    	justify-content: center;
    }

    .section-about {
    	padding-bottom: 10px;
    }

    .welcome {
    	font-size: 36px;
    	margin-bottom: 20px;
    }

    .welcome br {
    	display:none;
    }

    .front-page-content h2 {
    	font-size: 24px;
    }

    .front-page-content h3 {
    	font-size: 20px;
    }

    .the-boop-title {
    	top: 40px;
    	left: 0;
    	margin: 40px;
    }

    .op-landing-page-header h1 {
    	font-size: 46px;
    }

    .discount-button a img {
    	width: 350px;
    }

    .landing-page-header-bottom {
    	padding-bottom: 0;
    	margin-bottom: -20px;
    }

    .header-bottom-content p.h2 {
    	font-size: 24px;
    }

	.light-orange-bg h2 {
		font-size: 21px;
	}

	.light-orange-bg p {
		font-size: 16px;
	}

    .dr-rob-wrapper {
    	width: 100%;
    	height:auto;
    }

    .dr-rob-wrapper img {
    	position: relative;
    }

    .dr-rob-text {
    	left: 240px;
    	top: 80px;
    }

    .dr-rob-text span.name {
    	font-size:20px;
    }

    .dr-rob-text p {
    	font-size:18px;
    }

	.footer-top .col-sm {
		padding: 10px 0;
	}

	.footer-top .op-link-block img,
	.footer-top .op-link-block {
		margin: 0 auto;
		display: block;
	}

    .footer-top ul {
    	text-align: center;
    }

	.landing-page-footer p.h2 br {
		display: none;
	}

	.footer-treats {
		left: 0
	}

	.mobility-landing-page {
		overflow-x: hidden;
	}

	.questions {
		font-size:24px;
		left: 0;
	}

	.puppy-bg {
		padding-top: 350px;
	}

	.happy-go-puppy-content h2 {
		font-size: 24px;
	}

	.happy-go-puppy-content h2 span {
		font-size:42px;
	}

	.product-bag {
		margin-top: 20px;
	}

	.product-bag img {
		max-width:400px;
	}

	.coupon-happy {
		font-size: 24px;
	}

	.coupon-happy span {
		font-size: 32px;
	}

	.desc-ingredients-wrapper {
		margin-top: 0;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		width: 36%;
		padding: 10px;
		text-align: center;
	}
}

@media (max-width: 666px) {
	.testimonial-wrapper {
		padding:0 30px;
	}
	.testimonial-item {
		margin-top: 60px;
	}

	.testimonial-image {
		left: 50%;
		top: 0;
	}

	.testimonial-content {
		padding: 60px 15px 30px;
	}
}


@media (max-width: 576px) {
	.admin-bar .op-site-header { top: 46px; }

	main { padding-top: 157px; }

	.op-section {
		padding-bottom: 20px;
	}

	.op-front-page-header {
		padding-top: 0;
	    background-size: 100% auto;
    	background-position: center top;
	}

	.furtography-content {
		padding-bottom: 60px;
	}

	.blog-intro {
		text-align: center;
	}

	.boop-logo {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		margin: 0 auto;
	}

	.the-boop-single-article .thumbnail {
		height: 350px;
	}

	.op-landing-page-header {
		padding-bottom: 40px;
	}

	.op-landing-page-header h1 {
		font-size: 32px;
	}

	.landing-page-header-bottom {
		margin-bottom: 0;
		padding-top: 20px;
	}

	.shift-up {
		margin-top: 0;
	}

	.landing-page .pup {
		width: 100%;
	}

	.header-bottom-content p.h2 {
		text-align: center;
		margin-bottom: 20px;
	}

	.discount-button-wrapper {
		margin-top: 0;
	}

	.discount-button {
		left: auto;
		bottom: 0;
	}

	.light-orange-bg h2 {
		font-size: 34px;
		text-align: center;
	}

	.light-orange-bg p {
		font-size: 20px;
		text-align: center;
	}

	.dark-orange-bg {
		overflow: hidden;
	}

	.dr-rob-text {
	    left: 182px;
	    top: 34px;
	    padding-right: 20px;
	}

	.dr-rob-text p {
	    font-size: 16px;
	    margin-left: 0;
	}

	.dr-rob-wrapper,
	.mobility-landing-page .dr-rob-wrapper {
		left: 0;
	}

	.landing-page-footer p.h2 {
		text-align: center!important;
		margin-bottom: 60px;
	}

	h2.mobility-header,
	.mobility-copy {
		text-align: center;
	}

	.mobility-pup {
		display: block;
		margin: 0 auto;
	}

	.bios-header-title {
		bottom: 20px;
	}

	.about-page-header-bg img {
		max-width: none;
		width: 120%;
		margin-left: -10%;
		margin-bottom: 10px;
	}

	.testimonial-caption {
		position: relative;
		background: #032d77;
	}

	.testimonial-modal .modal-close {
		top: 10px;
		right: 10px;
		height: 45px;
		width: 45px;
		line-height: 42px;
	}

	.casey-testimonial p {
		text-align: left;
	}

	.ingredient-content .title {
		min-height:auto;
	}

	.footer-package {
		margin-left: -76px;
	}

	.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
		padding: 0 5px;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		width: 100%;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li,
	.woocommerce div.product .woocommerce-tabs ul.tabs li:not(:first-child) {
		margin: 0 auto;
	}

	.variations-row .label label, .quantity-label label {
		font-size: 22px;
	}

	.woocommerce #reviews #comments ol.commentlist {
		padding: 0;
	}

	.desc-content-wrapper {
		padding: 0;
	}

	/* .woocommerce #content div.product .woocommerce-tabs, .woocommerce div.product .woocommerce-tabs,
	.woocommerce-page #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs {
		margin-left: -40px;
		margin-right: -40px;
	} */

}

@media (max-width: 414px) {
	.questions {
		font-size: 20px;
		left: 15px;
		top: 35px;
	}

	.questions li {
		padding: 5px 0;
	}

	.puppy-bg {
		padding-top: 275px;
	}

	.mobility-landing-page .dr-rob-wrapper {
		max-width:100%;
		margin-bottom:-60px;
	}

	.mobility-landing-page .dr-rob-text {
		top: 43px;
		max-width: 215px;
	}

	.mobility-landing-page .dr-rob-text p {
		font-size:13px;
	}
}

@media (max-width: 375px) {
	.mobility-landing-page .dr-rob-text {
		top:50px;
		max-width:200px;
	}

	.product-bag img {
		max-width: 80%;
	}

	.mobility-landing-page .dr-rob-text span.name {
		display: none;
	}
}