body {

	font-family: sofia-pro, sans-serif;

	width: 100vw;

	max-width: 100vw;

	background-color: #ffffff;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	overflow-x: hidden

}



html {

	width: 100vw;

	max-width: 100vw;

	overflow-x: hidden

}



a,

a:hover,

a:active,

a:focus {

	text-decoration: none;

	outline: none;

	color: #111010;

	cursor: pointer

}



button,

button:hover,

button:active,

button:focus {

	cursor: pointer

}



img {

	width: auto;
	max-width: 100%;
	height: auto;

}



a[href^=tel] {

	color: inherit;

	text-decoration: none

}



h1,

h2,

h3,

h4,

h5,

h6 {

	font-weight: 900;

	line-height: 1.3;

	margin-bottom: 15px;

	letter-spacing: -1px;

	color: #222;

	margin-top: 5px

}



h1 {

	font-size: 2.5rem

}



h2 {

	font-size: 2rem

}



h3 {

	font-size: 1.8rem

}



h4 {

	font-size: 1.4rem

}



h5 {

	font-size: 1.2rem

}



h6 {

	font-size: 1rem

}



p {

	font-weight: 400;

	margin-bottom: 30px;

	line-height: 1.7;

	font-size: 0.9rem

}



@media only screen and (max-width: 1480px) {

	p {

		font-size: 0.85rem;

		line-height: 1.6

	}

}



@media only screen and (max-width: 992px) {

	p {

		font-size: 0.95rem;

		line-height: 1.5

	}

}



@media only screen and (max-width: 820px) {

	p {

		font-size: 0.89rem;

		line-height: 1.5

	}

}



blockquote {

	font-size: 21px;

	opacity: 1;

	font-weight: 700;

	padding-left: 55px;

	line-height: 1.3;

	position: relative

}



@media only screen and (max-width: 992px) {

	blockquote {

		padding-left: 32px

	}

}



blockquote:before {

	content: url(../images/test2.svg);

	display: inline-block;

	position: absolute;

	top: 4px;

	left: 0px;

	width: 30px;

	height: 30px;

	vertical-align: middle

}



@media only screen and (max-width: 992px) {

	blockquote:before {

		top: 4px;

		width: 20px;

		height: 20px

	}

}



.breadcrumb {

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	-ms-flex-wrap: wrap;

	flex-wrap: wrap;

	padding: 10px 0;

	margin-bottom: 5px;

	list-style: none;

	background-color: transparent;

	border-radius: 0

}



@media only screen and (max-width: 1480px) {

	.breadcrumb {

		margin-bottom: 0px

	}

}



.breadcrumb span {

	opacity: 0.3

}



.breadcrumb a,

.breadcrumb span {

	font-size: 13px

}



.breadcrumb .division {

	margin: 0 10px;

	opacity: 1

}



@media only screen and (max-width: 540px) {

	.breadcrumb .division {

		display: inline-block;

		margin-top: 0px

	}

}



.button-with-icon {

	background: none;

	border: none;

	box-shadow: none;

	padding: 20px 35px;

	color: #fff;

	font-size: 12px;

	font-weight: 500;

	display: inline-block;

	width: max-content;

	width: -moz-max-content;

	transition: .3s all ease;

	margin-top: auto

}



@media only screen and (max-width: 1480px) {

	.button-with-icon {

		padding: 15px 25px

	}

}



.button-with-icon svg {

	display: inline-block;

	margin-left: 10px;

	fill: #fff;

	width: 20px;

	height: 20px;

	vertical-align: middle;

	margin-top: -3px;

	transition: .3s all ease

}



.button-with-icon:hover {

	background-color: #222 !important

}



::-webkit-input-placeholder {

	color: #717171

}



::-moz-placeholder {

	color: #717171

}



:-ms-input-placeholder {

	color: #717171

}



:-moz-placeholder {

	color: #717171

}



.divider {

	padding: 80px 0

}



[type=reset],

[type=submit],

button,

html [type=button] {

	-webkit-appearance: none;

	border: none;

	background: none

}



input[type=text] {

	border: 0;

	font-size: 15px;

	background: none;

	line-height: 1.2;

	-webkit-appearance: none;

	outline: none

}



.search-form input {

	width: calc(100% - 50px);

	display: inline-block;

	padding-left: 20px;

	height: 36px;

	margin: 22px 0

}



@media only screen and (max-width: 1200px) {

	.search-form input {

		margin: 10px 0

	}

}



#search-icon {

	fill: #717171;

	width: 22px

}



.search-form button {

	width: 50px;

	height: 90px;

	line-height: 80px;

	display: inline-block;

	float: right

}



@media only screen and (max-width: 1200px) {

	.search-form button {

		height: 70px

	}

}



.search-form input::-webkit-input-placeholder {

	color: #717171;

	font-weight: normal

}



.search-form input:-moz-placeholder {

	color: #717171;

	font-weight: normal

}



.search-formr input:-ms-input-placeholder {

	color: #717171;

	font-weight: normal

}



.visually-hidden {

	display: none

}



.contain {

	max-width: 1480px;

	margin: 0 auto

}



.page-container {

	padding: 40px 5%

}



@media only screen and (max-width: 820px) {

	.page-container {

		padding: 40px 20px

	}

}



.page-container h1 {

	padding-bottom: 15px;

	margin-bottom: 25px;

	border-bottom: 1px solid #eee

}



.popup-overlay {

	position: absolute

}



.full-menu {

	position: fixed;

	width: 420px !important;

	z-index: 99999999;

	top: 0;

	right: -420px;

	height: 100vh;

	transition: 0.6s all cubic-bezier(0.4, 0, 0.2, 1);

	-webkit-transform: translate3d(0, 0, 0);

	-ms-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

	transition-delay: .15s

}



@media only screen and (max-width: 992px) {

	.full-menu {

		width: 280px !important;

		left: -280px;

		right: auto;

		min-height: 100vh;

		height: 100%

	}

}



.full-menu #slide-menu-logo {

	width: 120px;

	position: absolute;

	left: 50%;

	top: 25px;

	display: block;

	transform: translateX(-50%)

}



@media only screen and (max-width: 992px) {

	.full-menu #slide-menu-logo {

		width: 130px;

		left: 15px;

		top: 20px;

		transform: none

	}

}



.full-menu #slide-menu-logo path {

	fill: #fff !important

}



.close-btn {

	position: absolute;

	top: 29px;

	left: 20px;

	font-size: 19px;

	height: 32px;

	width: 32px;

	border-radius: 50%;

	border: 1px solid #222;

	background-color: transparent;

	line-height: 25px;

	color: #fff;

	text-align: center;

	transition: .3s all ease;

	cursor: pointer

}



@media only screen and (max-width: 992px) {

	.close-btn {

		left: auto;

		right: 20px;

		top: 20px

	}

}



.close-btn:hover {

	color: #111;

	background-color: #fff;

	border: 1px solid #fff

}



.desktop-menu {

	display: block

}



@media only screen and (max-width: 992px) {

	.desktop-menu {

		display: none

	}

}



.mobile-nav {

	display: block

}



.full-menu.active {

	-webkit-transform: translate3d(-420px, 0, 0);

	-ms-transform: translate3d(-420px, 0, 0);

	transform: translate3d(-420px, 0, 0);

	transition-delay: 0s

}



@media only screen and (max-width: 992px) {

	.full-menu.active {

		-webkit-transform: translate3d(280px, 0, 0);

		-ms-transform: translate3d(280px, 0, 0);

		transform: translate3d(280px, 0, 0)

	}

}



.full-menu-section {

	width: 100%;

	height: 100vh;

	overflow: hidden;

	padding: 0;

	z-index: 99;

	display: flex;

	/*align-items: center*/

	align-items: flex-start;
}



@media only screen and (max-width: 992px) {

	.full-menu-section {

		align-items: flex-start;

		padding-top: 65px;

		min-height: calc(100vh - 50px);

		height: 100%

	}

}



.full-menu-image img {

	display: none;

	mix-blend-mode: multiply

}



.full-menu {

	background-color: #000000

}



.full-menu-image {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	z-index: -1;

	display: none

}



@media only screen and (max-width: 820px) {

	.full-menu-image {

		display: none

	}

}



.full-menu-items {

	list-style: none;

	padding: 0;

	width: 100%;

	/*padding-top:110px;*/

}

.full-menu-items.mobile-nav{
	margin-top: 0px;
}



.full-menu .full-menu-items li {

	font-weight: 700;

	line-height: 1.2;

	opacity: 0;

	width: 100%;

	/*padding: 0 40px 0 40px;*/

	padding: 0 20px;

	background: transparent;

	transition: .3s all ease;

	transition-delay: 0;

	-webkit-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1)

}



@media only screen and (max-width: 992px) {

	.full-menu .full-menu-items li {

		margin-bottom: 0;

		padding: 0 20px 0 20px;

		transition: 0s all ease;

		opacity: 1

	}

}



/*.full-menu .full-menu-items li a {

	font-size: 26px;

	display: inline-block;

	color: #fff;

	width: calc(100% - 80px);

	padding: 15px 0 15px 0px;

	border-bottom: 1px solid #222;

	transition: .3s all ease;

	transition-delay: 0

}*/


.full-menu .full-menu-items li a {

	font-size: 26px;

	display: block;

	color: #fff;

	padding: 15px 0 15px 0px;

	border-bottom: 1px solid #222;

	transition: .3s all ease;

	transition-delay: 0

}


@media only screen and (max-width: 1480px) {

	.full-menu .full-menu-items li a {

		font-size: 24px

	}

}



@media only screen and (max-width: 992px) {

	.full-menu .full-menu-items li a {

		font-size: 18px;

		padding: 13px 0;

		width: calc(100% - 40px);

		transition: 0s all ease

	}

}



@media only screen and (max-width: 340px) {

	.full-menu .full-menu-items li a {

		font-size: 15px

	}

}



.full-menu .full-menu-items li:hover a {

	color: #fff;

	border-bottom: 1px solid #52b62e

}



.full-menu .full-menu-items li:hover {

	-webkit-transform: scale(1.05);

	-ms-transform: scale(1.05);

	transform: scale(1.05);

	background: #52b62e

}



@media only screen and (max-width: 992px) {

	.full-menu .full-menu-items li:hover {

		-webkit-transform: scale(1);

		-ms-transform: scale(1);

		transform: scale(1)

	}

}



.full-menu.active .full-menu-items li {

	opacity: 1

}



.full-menu .full-menu-items li:last-of-type a {

	border-bottom: 0

}



.full-menu-items.mobile-nav li a:before {

	content: '';

	margin-right: 12px;

	width: 25px;

	height: 25px;

	display: inline-block;

	vertical-align: middle;

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	margin-top: -4px

}



@media only screen and (max-width: 340px) {

	.full-menu-items.mobile-nav li a:before {

		width: 22px;

		height: 22px

	}

}



.full-menu-items.mobile-nav li a[data-title="Shop"]:before {

	background-image: url("../images/shop-menu.svg")

}



.full-menu-items.mobile-nav li a[data-title="Reviews"]:before {

	background-image: url("../images/reviews-menu.svg")

}



.full-menu-items.mobile-nav li a[data-title="Rewards"]:before {

	background-image: url("../images/reward-menu.svg")

}



.full-menu-items.mobile-nav li a[data-title="Educate"]:before {

	background-image: url("../images/educate-menu.svg")

}



.full-menu-items.mobile-nav li a[data-title="Mission"]:before {

	background-image: url("../images/mission-menu.svg")

}



.full-menu-items.mobile-nav li a[data-title="Lab Reports"]:before {

	background-image: url("../images/lab-menu.svg")

}



.full-menu-items.mobile-nav li a[data-title="FAQ"]:before {

	background-image: url("../images/faq-menu.svg")

}



.full-menu-items.mobile-nav li a[data-title="Contact"]:before {

	background-image: url("../images/contact-menu.svg")

}



.full-menu-items.mobile-nav li a[data-title="Log In"]:before {

	background-image: url("https://ocannacbd.com/wp-content/themes/CustomWp/assets/images/login-menu.svg")

}



.navigation-outer {

	position: relative;

	width: 100%;

	z-index: 9999;

	background: #fff

}



@media only screen and (max-width: 992px) {

	.navigation-outer {

		background: transparent

	}

}



.navbar-hidden {

	position: fixed;

	background: #f7f7f7;

	top: -150px;

	-webkit-transform: translate3d(0, 0, 0);

	-ms-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

	transition: 0.5s transform cubic-bezier(0.4, 0, 0.2, 1)

}



.navbar-hidden.show {

	-webkit-transform: translate3d(0, 150px, 0);

	-ms-transform: translate3d(0, 150px, 0);

	transform: translate3d(0, 150px, 0)

}



.navigation {

	background-color: transparent;

	transition: .3s all ease;

	height: 90px;

	display: grid;

	grid-template-columns: 5fr 2fr 5fr

}



@media only screen and (max-width: 1480px) {

	.navigation {

		height: 80px

	}

}



.navbar-hidden .navigation {

	border-bottom: 0

}



@media only screen and (max-width: 992px) {

	.navigation .main-logo-outer {

		padding: 0

	}

}



.navigation #main-logo {

	width: 120px;

	fill: #111010;

	transition: .3s fill ease .7s, .4s width ease 0.1s

}



@media only screen and (max-width: 992px) {

	.navigation #main-logo {

		width: 120px;

		fill: #fff

	}

}



@media only screen and (max-width: 1480px) {

	.navigation #main-logo {

		width: 115px

	}

}



#main-logo.white-logo {

	fill: #fff;

	transition: .15s fill ease 0s, .3s width ease 0s

}



.navigation.scrolled #main-logo.white-logo {

	fill: #fff;

	transition: .3s fill ease 0s, .4s width ease 0s

}



.nav-container {

	position: relative;

	padding: 0 5%

}



@media only screen and (max-width: 1200px) {

	.nav-container {

		padding: 0 20px

	}

}



.main-nav {

	display: inline-block;

	list-style: none;

	padding: 0;

	float: right

}



.main-nav li {

	display: inline-block;

	padding: 0 40px;

	font-size: 15px

}



.main-nav-outer {

	width: calc(100% - 500px);

	max-width: calc(100% - 500px)

}



.main-nav {

	padding-right: 20px;

	display: none

}



.cart-icon-outer,

.search,

.full-menu-btn {

	height: 45px;

	display: inline-block

}



@media only screen and (max-width: 1200px) {

	.cart-icon-outer,

	.search,

	.full-menu-btn {

		height: 71.2px

	}

}



.main-logo-outer {

	justify-content: center;

	align-items: center;

	display: flex

}



.right-menu {

	justify-content: flex-end;

	align-items: center;

	display: flex;

	padding-right: 0

}



.right-menu .left-list-menu .menu-item {

	margin-right: 50px;

	font-size: 13px;

	font-weight: 500;

	color: #9e9e9e

}



@media only screen and (max-width: 1480px) {

	.right-menu .left-list-menu .menu-item {

		margin-right: 40px;

		font-size: 12px

	}

}



@media only screen and (max-width: 992px) {

	.right-menu .left-list-menu .menu-item {

		display: none

	}

}



.left-menu {

	align-items: center;

	display: flex;

	justify-content: center;

}



.left-menu li{

	list-style-type: none;

	margin-top: 15px;

}



@media only screen and (max-width: 992px) {

	.left-menu {

		display: none

	}

}


#mobile_nav_col{
	width: 100%;
}


.left-menu li a {

	margin-right: 50px;

	font-size: 13px;

	font-weight: 500;

	/*color: #9e9e9e;*/
	color: #313131;

	transition: .3s all ease

}



@media only screen and (max-width: 1480px) {

	.left-menu li a {

		margin-right: 40px;

		font-size: 12px

	}

}



.left-menu li a.current {

	color: #00d136;

	font-weight: 700

}



.left-menu li a.current.citrus {

	color: #f9b236

}



.left-menu li a.current.mint {

	color: #26badf

}



.left-menu li a.current.natural {

	color: #54e785

}



.left-menu li a.current.latte {

	color: #dfc9a3

}



.left-menu li a.current.berry {

	color: #a73030

}



.left-menu li a.current.fruit {

	color: #a76cdf

}



.left-menu li a.current.fresh {

	color: #50e3ce

}



.left-button-menu {

	align-items: center

}



@media only screen and (max-width: 992px) {

	.left-button-menu {

		display: none

	}

}



.left-button-menu a {

	padding: 10px 20px;

	background: #52b62e;

	color: #fff;

	margin-right: 25px;

	font-size: 13px;

	font-weight: 500;

	transition: .3s all ease

}



@media only screen and (max-width: 1480px) {

	.left-button-menu a {

		font-size: 12px;

		padding: 8px 18px

	}

}



.left-button-menu .button-with-icon {

	padding: 10px 20px;

	margin-right: 40px

}



.left-button-menu.citrus a {

	background-color: #f9b236 !important

}



.left-button-menu.mint a {

	background-color: #26badf !important

}



.left-button-menu.natural a {

	background-color: #54e785 !important

}



.left-button-menu.latte a {

	background-color: #dfc9a3 !important

}



.left-button-menu.berry a {

	background-color: #a73030 !important

}



.left-button-menu.fruit a {

	background-color: #a76cdf !important

}



.left-button-menu.fresh a {

	background-color: #50e3ce !important

}



.full-menu-btn {

	width: 80px

}



@media only screen and (max-width: 1200px) {

	.full-menu-btn {

		width: 70px

	}

}



.cart-icon-outer {

	text-align: center;

	position: relative;

	width: 50px;

	transition: .3s background-color ease, .3s opacity ease 0.85s;

	cursor: pointer

}



@media only screen and (max-width: 992px) {

	.cart-icon-outer {

		border-left: 0

	}

}



.cart-icon-outer #cart-icon {

	width: 33px;

	margin-top: 6px;

	fill: #222;

	transform: scale(1.1);

	transition: .3s all ease

}



@media only screen and (max-width: 1200px) {

	.cart-icon-outer #cart-icon {

		margin-top: 18px

	}

}



.cart-icon-outer:hover #cart-icon {

	fill: #222;

	transform: scale(1.2)

}



.CartCount {

	position: absolute;

	width: 14px;

	height: 14px;

	border-radius: 50%;

	right: 5px;

	top: 0px;

	font-size: 8px;

	background-color: #52b62e;

	color: #fff;

	line-height: 1.7;

	transition: 0.3s all ease

}



@media only screen and (max-width: 1200px) {

	.CartCount {

		right: -5px;

		top: 10px

	}

}



@media only screen and (max-width: 992px) {

	.CartCount {

		width: 16px;

		height: 16px;

		font-size: 9px

	}

}



.CartCount.citrus {

	background-color: #f9b236

}



.CartCount.mint {

	background-color: #26badf

}



.CartCount.natural {

	background-color: #54e785

}



.CartCount.latte {

	background-color: #dfc9a3

}



.CartCount.berry {

	background-color: #a73030

}



.CartCount.fruit {

	background-color: #a76cdf

}



.CartCount.fresh {

	background-color: #50e3ce

}



.wrapper-menu {

	width: 20px;

	height: 20px;

	padding: 15px 30px 20px;

	justify-content: space-between;

	cursor: pointer;

	box-sizing: content-box;

	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)

}



@media only screen and (max-width: 992px) {

	.wrapper-menu {

		padding: 32px 0px 30px;

		width: 24px

	}

}



.line-menu {

	background-color: #222;

	border-radius: 9px;

	width: 100%;

	height: 2px;

	margin-bottom: 3px;

	border-radius: 5px;

	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)

}



@media only screen and (max-width: 992px) {

	.line-menu {

		height: 3px;

		margin-bottom: 4px

	}

}



.full-menu-btn {

	transition: 0.6s all cubic-bezier(0.4, 0, 0.2, 1)

}



.desktop-menu-button {

	display: block

}



@media only screen and (max-width: 992px) {

	.desktop-menu-button {

		display: none

	}

}



.mobile-menu-button {

	display: none

}



@media only screen and (max-width: 992px) {

	.mobile-menu-button {

		display: block

	}

}



.line-menu.half {

	width: 11px;

	margin-bottom: 3px

}



@media only screen and (max-width: 992px) {

	.line-menu.half {

		width: 12px;

		margin-bottom: 4px

	}

}



.line-menu.start {

	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

	transform-origin: right

}



.line-menu.end {

	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

	transform-origin: left;

	float: right

}



#CartDrawer {

	width: 500px;

	position: fixed;

	z-index: 99;

	background: #111010;

	right: 0;

	top: 90px;

	max-height: calc(100vh - 130px);

	display: none;

	overflow-y: auto;

	padding: 25px

}



@media only screen and (max-width: 1480px) {

	#CartDrawer {

		top: 80px;

		max-height: calc(100vh - 120px)

	}

}



@media only screen and (max-width: 820px) {

	#CartDrawer {

		width: calc(100vw - 60px);

		max-height: calc(100% - 190px);

		padding: 25px 20px;

		top: 80px;

		margin: 10px;

		border-radius: 10px;

		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12)

	}

}



.drawer__close {

	width: 20px;

	height: 20px;

	background: #fff

}



#CartDrawer form {

	width: 100%

}



#CartContainer p {

	color: #fff;

	margin-bottom: 10px

}



#CartDrawer,

#CartDrawer:focus,

#CartDrawer:active {

	outline: none !important

}



.product-row {

	margin-bottom: 10px

}



#CartContainer .product-row {

	display: grid;

	grid-template-columns: 1fr 2fr 80px;

	background-color: #fff

}



.drawer__title {

	font-size: 15px;

	font-weight: 700;

	margin-bottom: 25px;

	color: #fff

}



.cart-info {

	padding: 10px 20px

}



.cart-info p {

	margin-bottom: 8px;

	margin-top: 0px;

	opacity: 1

}



.cart-info p a {

	color: #111010;

	width: 100%;

	display: block;

	font-size: 21px;

	font-weight: 700

}



.cart-info p span {

	font-size: 13px;

	margin-bottom: 15px;

	margin-top: 0px;

	display: block;

	color: #b3b2b2

}



.cart-info-inner,

.cart-info-inner .col-12 {

	padding: 0

}



#CartDrawer textarea {

	width: calc(100% - 40px);

	height: 50px;

	background-color: rgba(255, 255, 255, 0.15);

	border: none;

	color: #fff;

	padding: 20px;

	outline: none;

	margin-top: 15px

}



label[for=CartSpecialInstructions] {

	margin-top: 20px;

	font-size: 14px;

	color: #fff;

	margin-bottom: 15px

}



.cart-product-image {

	padding: 0;

	display: flex;

	align-items: center;

	background: #fff

}



.cart-info .ajaxcart__qty-num {

	background: #e4e4e4;

	color: #111010;

	padding: 10px;

	width: 30px;

	text-align: center

}



@media only screen and (max-width: 820px) {

	.cart-info .ajaxcart__qty-num {

		padding: 10px 2px;

		width: 23px

	}

}



.ajaxcart__qty--plus,

.ajaxcart__qty--minus {

	color: #fff

}



.product-price {

	text-align: right;

	padding: 10px 20px;

	font-weight: 700;

	font-size: 14px

}



.product-price span {

	margin-top: 1px;

	display: block;

	font-size: 21px

}



.price-note {

	font-size: 14px;

	font-weight: 200;

	display: block;

	margin-top: 5px

}



.ajaxcart__qty-adjust {

	padding: 10px;

	background: #222 !important

}



.subtotal-row {

	display: grid;

	grid-template-columns: 1fr 1fr

}



.subtotal-title,

.subtotal-price {

	color: #fff;

	opacity: 1

}



.subtotal-title p,

.subtotal-price p {

	opacity: 1;

	font-size: 19px

}



.subtotal-price {

	text-align: right

}



#CartDrawer .btn--full.cart__checkout {

	padding: 17px 30px;

	background: #52b62e;

	font-size: 14px;

	color: #fff;

	display: inline-block

}



#CartDrawer .go-to-cart {

	background: #444 !important;

	padding: 17px;

	color: #fff;

	font-size: 0.9rem;

	margin-right: 10px

}



.mouse {

	position: absolute;

	width: 13px;

	height: 26px;

	bottom: 80px;

	border-radius: 10px;

	left: calc(5% + 20px);

	margin-left: -12px;

	border: 2px solid #222;

	-webkit-animation: intro 1s;

	animation: intro 1s

}



@media only screen and (max-width: 992px) {

	.mouse {

		display: none

	}

}



.scroll {

	display: block;

	width: 3px;

	height: 3px;

	margin: 6px auto;

	border-radius: 4px;

	background: #888;

	-webkit-animation: finger 1s infinite;

	animation: finger 1s infinite

}



@-webkit-keyframes intro {

	0% {

		opacity: 0;

		-webkit-transform: translateY(40px);

		transform: translateY(40px)

	}

	100% {

		opacity: 1;

		-webkit-transform: translateY(0);

		transform: translateY(0)

	}

}



@keyframes intro {

	0% {

		opacity: 0;

		-webkit-transform: translateY(40px);

		transform: translateY(40px)

	}

	100% {

		opacity: 1;

		-webkit-transform: translateY(0);

		transform: translateY(0)

	}

}



@-webkit-keyframes finger {

	0% {

		opacity: 1

	}

	100% {

		opacity: 0;

		-webkit-transform: translateY(20px);

		transform: translateY(20px)

	}

}



@keyframes finger {

	0% {

		opacity: 1

	}

	100% {

		opacity: 0;

		-webkit-transform: translateY(20px);

		transform: translateY(20px)

	}

}



.hero-section {

	position: relative;

	background-size: cover !important;

	background-repeat: no-repeat !important;

	background-position: center bottom !important

}



@media only screen and (max-width: 820px) {

	.hero-section {

		background: none !important

	}

}



.hero-section,

.hero-section .row {

	height: calc(100vh - 90px)

}



@media only screen and (max-width: 1480px) {

	.hero-section,

	.hero-section .row {

		height: calc(100vh + 160px)

	}

}



@media only screen and (max-width: 1025px) and (orientation: portrait) {

	.hero-section,

	.hero-section .row {

		padding-bottom: 40px;

		height: 580px;

		min-height: calc(65vh - 180px)

	}

}



@media only screen and (max-width: 820px) {

	.hero-section,

	.hero-section .row {

		    padding-bottom: 30px;
    height: 550px;
    max-width: 100vw;
    overflow: hidden;
    margin: 0 auto;
    min-height: 550px;

	}

}



.hero-section .row {

	display: grid;

	grid-template-columns: 1fr 1.5fr

}



@media only screen and (max-width: 820px) {

	.hero-section .row {

		display: flex;

		align-items: flex-end

	}

}



.hero-section-inner {

	position: relative;

	padding: 0 5%

}



@media only screen and (max-width: 820px) {

	.hero-section-inner {

		padding: 0 30px

	}

}



.caption {

	display: flex;

	align-items: center

}



@media only screen and (max-width: 992px) {

	.caption {

		margin-bottom: 25px

	}

}



@media only screen and (max-width: 820px) {

	.caption {

		    margin-bottom: 20px;
    text-align: center;
    width: 100%;

	}

	.hero-section-text h1 span{
		padding: 10px;
	}

}



.hero-section-text {

	display: block;

	width: 80%;

	margin-top: -45px

}



@media only screen and (max-width: 1480px) {

	.hero-section-text {

		padding-top: 0px;

		width: 90%

	}

}



.hero-section-text h1 {

	font-size: 3.1rem

}



@media only screen and (max-width: 1480px) {

	.hero-section-text h1 {

		font-size: 2.4rem

	}

}



@media only screen and (max-width: 820px) {

	.hero-section-text h1 {

		font-size: 2.7rem;

		width: 400px

	}

}



@media only screen and (max-width: 540px) {

	.hero-section-text h1 {

		font-size: 1.8rem;

		width: 260px

	}

}



@media only screen and (max-width: 850px) and (orientation: landscape) {

	.hero-section-text h1 {

		font-size: 1.8rem;

		width: 260px

	}

}



.hero-section-text p {

	font-size: 1rem

}



@media only screen and (max-width: 1480px) {

	.hero-section-text p {

		font-size: 0.85rem

	}

}



@media only screen and (max-width: 820px) {

	.hero-section-text p {

		font-size: 0.95rem

	}

}



@media only screen and (max-width: 540px) {

	.hero-section-text p {

		font-size: 0.85rem

	}

}



@media only screen and (max-width: 850px) and (orientation: landscape) {

	.hero-section-text p {

		font-size: 0.85rem

	}

}



.hero-section-text .button-with-icon {

	font-size: 14px;

	padding: 0

}



.hero-section-text h1 {

	margin-top: 0;

	line-height: 0.2;

}



.hero-section-text h1 span {
    color: #000;
    font-size: 1.6rem;
    line-height: 1.4;
    background: rgba(255,255,255,0.7);
    display: inline-block;
    padding: 10px 40px 10px 10px;
}


.hero-section-img {

	padding: 0

}



.hero-section-img img {

	max-width: 100%;

	height: -webkit-fill-available

}



.text-intro {

	padding: 50px 0;

	background-color: #222

}



.text-intro h4 {

	color: #fff;

	text-align: center;

	margin-bottom: 2px;

	font-size: 19px

}



.text-intro h4:nth-of-type(2) {

	font-weight: 100

}



.mobile-hero-img {

	display: none !important

}



@media only screen and (max-width: 820px) {

	.mobile-hero-img {

		width: 600px;

		display: block !important;

		margin-left: 0;

		position: absolute;

		top: -34px;

		z-index: -2

	}

}



@media only screen and (max-width: 540px) {

	.mobile-hero-img {

		width: 454px;

		margin-left: -24px

	}

}



.block-section {

	padding: 100px 5%

}



@media only screen and (max-width: 820px) {

	.block-section {

		max-width: 640px;

		padding: 50px 30px

	}

}



@media only screen and (max-width: 850px) and (orientation: landscape) {

	.block-section {

		max-width: 640px;

		padding: 50px 30px

	}

}



.block-section-row {

	display: grid

}



.block-section-row.two {

	grid-template-columns: 1fr 1fr

}



.block-section-row.three {

	grid-template-columns: 1fr 1fr 1fr

}



.block-section-row.four {

	grid-template-columns: 1fr 1fr 1fr 1fr

}



@media only screen and (max-width: 820px) {

	.block-section-row {

		display: block;

		max-width: 500px;

		margin: 0 auto

	}

}



.block {

	display: block;

	padding: 0 35px

}



@media only screen and (max-width: 992px) {

	.block {

		padding: 0 10px

	}

}



@media only screen and (max-width: 820px) {

	.block {

		padding: 0 0 10px 0;

		text-align: center;

		border-bottom: 1px solid #eee

	}

}



@media only screen and (max-width: 850px) and (orientation: landscape) {

	.block {

		padding: 0 0 10px 0;

		border-bottom: 1px solid #eee

	}

}



@media only screen and (max-width: 820px) {

	.block-section-row .block:last-of-type {

		border-bottom: 0

	}

}



.block .block-inner {

	overflow: hidden;

	box-shadow: none;

	display: flex;

	flex-direction: column;

	height: 100%;

	transition: .4s all ease

}



@media only screen and (max-width: 820px) {

	.block .block-inner .button-with-icon {

		margin: auto auto 0 !important

	}

}



.block .block-inner .image-anchor {

	display: block

}



.block img {

	width: 100%;

	height: auto

}



.block h6 {

	font-size: 11px;

	margin-bottom: 5px;

	letter-spacing: 0.5px;

	font-weight: 900

}



.block-content {

	padding: 15px 0px 35px;

	display: flex;

	flex-direction: column;

	height: 100%

}



.block-content .buttonWrapper {

	margin-top: auto

}



.full-block-outer {

	padding: 0

}



.template-index .full-block-row {

	display: grid;

	grid-template-columns: auto 500px

}



@media only screen and (max-width: 992px) {

	.template-index .full-block-row {

		grid-template-columns: 1fr

	}

}



.template-product .full-block-row {

	display: grid;

	grid-template-columns: 1fr 1fr

}



@media only screen and (max-width: 820px) {

	.template-product .full-block-row {

		grid-template-columns: 1fr

	}

}



.full-block {

	padding: 0;

	align-items: center

}



.full-block-img {

	background-position: top;

	background-size: cover;

	background-repeat: no-repeat

}



@media only screen and (max-width: 992px) {

	.full-block-img {

		height: 300px

	}

}



@media only screen and (max-width: 820px) {

	.full-block-img {

		height: 280px

	}

}



@media only screen and (max-width: 540px) {

	.full-block-img {

		height: 250px

	}

}



.template-product .full-block-img {

	background-position: center

}



@media only screen and (max-width: 820px) {

	.template-product .full-block-img {

		width: 100%;

		height: 65vw

	}

}



.full-block-text {

	background: #1e1e1e

}



@media only screen and (max-width: 820px) {

	.template-product .full-block-text {

		width: 100%

	}

}



.full-block-inner {

	display: block;

	width: 100%;

	text-align: center

}



.full-block-text-right .full-block-inner,

.full-block-text-left .full-block-inner {

	text-align: left

}



.full-block-content {

	padding: 50px 60px

}



@media only screen and (max-width: 820px) {

	.full-block-content {

		padding: 30px !important;

		max-width: 640px;

		margin: 0 auto

	}

}



.full-block-content h2 {

	color: #fff;

	margin-bottom: 30px;

	font-size: 36px

}



@media only screen and (max-width: 1480px) {

	.full-block-content h2 {

		font-size: 32px

	}

}



.full-block-content h2:before {

	content: '';

	position: relative;

	width: 30px;

	height: 2px;

	background: #fff;

	margin: 0 auto 40px;

	display: block

}



@media only screen and (max-width: 820px) {

	.full-block-content h2:before {

		margin: 0 auto 20px

	}

}



.full-block-content p {

	color: #fff

}



@media only screen and (max-width: 820px) {

	.full-block-content p {

		margin-bottom: 10px

	}

}



.full-block-content .button-with-icon {

	background: transparent !important;

	border: 1px solid #fff;

	color: #fff !important

}



.full-block-content .button-with-icon:hover {

	background-color: #fff !important;

	color: #222 !important

}



.block-content h3 {

	font-size: 1.8rem;

	margin-top: 10px

}



@media only screen and (max-width: 820px) {

	.block-content h3 {

		font-size: 2.3rem

	}

}



.full-block-text-right .full-block-content,

.full-block-text-left .full-block-content {

	padding: 80px

}



.full-block-text-right .full-block-content h2:before,

.full-block-text-left .full-block-content h2:before {

	margin: 0 0 40px

}



.full-block-icons {

	display: flex;

	justify-content: center

}



.full-icon {

	display: flex;

	text-align: center;

	margin-bottom: 60px;

	margin-top: 30px;

	flex-direction: column;

	flex: 0 0 23%

}



@media only screen and (max-width: 820px) {

	.full-icon {

		margin-bottom: 40px

	}

}



.full-icon img {

	width: 50px;

	display: block;

	margin: 0 auto;

	margin-bottom: 15px

}



.full-icon span {

	color: #fff;

	font-size: 10px;

	text-transform: uppercase

}



.review-main-head {

	text-align: center;

	padding-top: 30px;

	background: #000;

	color: #fff;

	margin-top: 0;

	padding-bottom: 30px

}



.reviews-slider {

	padding: 50px 0px 100px;

	margin: 0;

	display: flex;

	position: relative;

	width: 100%

}



@media only screen and (max-width: 820px) {

	.reviews-slider {

		padding: 50px 0px 100px;

		width: 100%

	}

}



@media only screen and (max-width: 850px) and (orientation: landscape) {

	.reviews-slider {

		padding: 50px 30px 100px;

		width: calc(100% - 60px)

	}

}



.reviews-slider .swiper-wrapper {

	margin-left: auto;

	margin-right: auto

}



.reviews-slide .star-ratings-sprite {

	margin-top: 20px;

	margin-bottom: 0

}



.reviews-slide {

	padding: 25px;

	overflow: hidden;

	display: flex;

	flex-direction: column;

	height: auto

}



.reviews-slide.swiper-slide {

	width: calc(33.3333% - 50px) !important;

	box-shadow: 0 7px 70px rgba(0, 0, 0, 0), 0 1px 10px rgba(0, 0, 0, 0);

	transform: scale(1);

	border-radius: 10px;

	transition: 0.4s all ease

}



@media only screen and (max-width: 820px) {

	.reviews-slide.swiper-slide {

		width: calc(100% - 90px) !important;

		margin: 0 45px;

		background-color: #fff

	}

}



@media only screen and (max-width: 540px) {

	.reviews-slide.swiper-slide {

		background-color: #fff

	}

}



.reviews-slide.swiper-slide-active {

	transform: scale(1.02);

	box-shadow: 0 7px 70px rgba(0, 0, 0, 0.05), 0 1px 10px rgba(0, 0, 0, 0.03)

}



.reviews-slide blockquote {

	border-bottom: 1px solid #eee;

	padding-bottom: 19px;

	margin: 0

}



.reviews-slide p {

	padding-top: 10px

}



.review-img {

	display: block;

	padding-left: 0;

	padding-right: 25px

}



.review-img img {

	width: 100%;

	height: auto;

	border-radius: 7px;

	display: none

}



.review-author {

	border-top: 1px solid #eee;

	padding: 20px 0 0;

	margin: 0;

	margin-top: auto

}



.review-name {

	padding: 0

}



.review-author-name,

.review-date,

.review-name {

	display: block;

	text-align: right

}



.review-author-name {

	font-weight: 700;

	font-size: 16px

}



.review-date {

	font-size: 12px;

	opacity: 0.3

}



.reviews-slider .swiper-pagination {

	bottom: 40px;

	text-align: right;

	right: 50px;

	left: auto

}



@media only screen and (max-width: 992px) {

	.reviews-slider .swiper-pagination {

		bottom: 0px;

		padding: 30px 0;

		right: 0px;

		text-align: center

	}

}



.reviews-slider .swiper-pagination-bullet {

	width: 8px;

	height: 8px;

	display: inline-block;

	border-radius: 100%;

	background: #52b62e;

	opacity: .1;

	transform: scale(1);

	margin: 0 8px !important;

	transition: .3s all ease

}



.reviews-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {

	opacity: 1;

	background: #05e670;

	transform: scale(1.8)

}



.insta-outer {

	padding: 0

}



.insta-outer .row {

	display: grid;

	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr

}



@media only screen and (max-width: 992px) {

	.insta-outer .row {

		grid-template-columns: 1fr 1fr 1fr;

		grid-row-gap: 0

	}

}



.insta-img {

	padding: 0;

	display: grid

}



@media only screen and (max-width: 992px) {

	.insta-img {

		position: relative;

		overflow: hidden

	}

}



@media only screen and (max-width: 992px) {

	.insta-img img {

		transform: scale(1.04)

	}

}



.template-collection .collection-outer {

	padding-top: 120px

}



.template-collection .template-list-collections {

	display: none

}



.section-header {

	margin-bottom: 30px

}



.section-header,

.section-header__right {

	padding: 0

}



@media only screen and (max-width: 992px) {

	.section-header__title {

		padding: 0

	}

}



.change-view #grid-icon,

.change-view #list-icon {

	width: 30px;

	fill: #111010

}



.change-view--active #grid-icon {

	fill: #c5c5c5

}



.section-header__right .form-horizontal {

	width: calc(100% - 95px);

	display: flex;

	align-items: center;

	justify-content: flex-end;

	padding-right: 25px

}



@media only screen and (max-width: 992px) {

	.section-header__right .form-horizontal {

		justify-content: flex-start

	}

}



.section-header__right .collection-view {

	width: 70px;

	display: flex

}



.template-collection .wrap {

	position: absolute;

	top: 0%;

	left: 0;

	z-index: -1;

	overflow: hidden;

	background: #fff

}



.template-collection .wrap canvas {

	position: relative;

	z-index: -1

}



select {

	-webkit-appearance: none;

	padding: 15px 25px;

	background: none;

	border: 2px solid #111010;

	border-radius: 0;

	color: #111010;

	font-weight: 700

}



label[for=SortBy] {

	color: #111010;

	margin: 0;

	margin-right: 15px;

	font-weight: 700

}



@media only screen and (max-width: 992px) {

	label[for=SortBy] {

		display: none

	}

}



.product-grid {

	margin-bottom: 50px;

	padding: 20px;

	flex-direction: column;

	text-align: center;

	margin: 11px;

	border: 1px solid #eee

}



@media only screen and (max-width: 820px) {

	.product-grid {

		padding: 20px;

		margin: 11px

	}

}



@media only screen and (max-width: 540px) {

	.product-grid {

		padding: 20px;

		margin: 11px 0

	}

}



.product-grid a {

	display: block;

	position: relative

}



.product-grid img {

	background: transparent;

	transform: scale(1.05);

	transition: .3s all ease

}



.product-grid:hover img {

	transform: scale(1.1)

}



.product-grid .spr-badge {

	text-align: left;

	margin-bottom: 10px;

	margin-top: 5px

}



.product-grid .h6 {

	margin-top: 15px;

	margin-bottom: 5px;

	font-weight: 700;

	width: 66.666%;

	display: inline-block;

	text-align: left

}



@media only screen and (max-width: 820px) {

	.product-grid .h6 {

		width: 50%

	}

}



.product-grid .h6 a {

	color: #111010;

	font-weight: 700;

	font-size: 19px

}



.product-grid .shop-info-inner p {

	display: inline-block;

	width: 33.333%;

	text-align: right;

	vertical-align: top;

	margin-top: 14px;

	margin-bottom: 0px;

	font-weight: 700;

	font-size: 16px;

	opacity: 1

}



@media only screen and (max-width: 820px) {

	.product-grid .shop-info-inner p {

		width: 50%

	}

}



.product-grid .shop-info-inner p s {

	color: #222

}



.product-grid .shop-product-description {

	color: #111;

	margin-bottom: 0;

	opacity: 0.4

}



.product-grid.Oil .shop-info-inner p {

	color: #f9b236

}



.product-grid.Topical .shop-info-inner p {

	color: #50e3ce

}



.product-grid.Chews .shop-info-inner p {

	color: #c97bfc

}



.product-grid p:nth-of-type(2) {

	color: #c5c5c5;

	font-weight: 700

}



.newsletter-form h3 {

	color: #111010

}



.collection-container {

	padding: 40px 5% 80px

}



@media only screen and (max-width: 820px) {

	.collection-container {

		padding: 30px 20px 80px

	}

}



.template-product .collection-container {

	padding: 0px 5% 40px

}



@media only screen and (max-width: 820px) {

	.template-product .collection-container {

		padding: 0px 20px 40px

	}

}



.collection-row {

	display: grid;

	grid-template-columns: 1fr 1fr 1fr

}



@media only screen and (max-width: 820px) {

	.collection-row {

		grid-template-columns: 1fr 1fr

	}

}



@media only screen and (max-width: 540px) {

	.collection-row {

		grid-template-columns: 1fr

	}

}



.template-product .collection-row {

	max-width: 840px;

	margin: 0 auto;

	grid-template-columns: 1fr 1fr

}



@media only screen and (max-width: 540px) {

	.template-product .collection-row {

		grid-template-columns: 1fr

	}

}



.sale-button,

.sold-button {

	position: absolute;

	top: -20px;

	right: -20px;

	padding: 11px 20px;

	background: #222;

	color: #fff;

	font-size: 13px;

	text-transform: uppercase;

	font-weight: 700;

	letter-spacing: 1px

}



@media only screen and (max-width: 820px) {

	.sale-button,

	.sold-button {

		top: -20px;

		right: -20px

	}

}



.template-product .sale-button,

.sold-button {

	top: -15px;

	right: -15px

}



.shop-product-description {

	text-align: left;

	margin-top: 10px;

	font-size: .85rem;

	line-height: 1.6

}



.shop-info-inner {

	display: flex;

	padding-bottom: 15px;

	margin-bottom: 20px;

	border-bottom: 1px solid #eee

}



.template-product .shop-info-inner {

	margin-bottom: 0px

}



.shop-info .spr-badge-caption {

	margin-left: 8px;

	opacity: 0.3

}



.product-grid.Oil .spr-icon {

	color: #f9b236 !important

}



.product-grid.Chews .spr-icon {

	color: #c97bfc !important

}



.product-grid.Topical .spr-icon {

	color: #50e3ce !important

}



.product-single {

	padding: 0 5% 0px 120px;

	display: grid;

	grid-template-columns: 1fr 1fr

}



@media only screen and (max-width: 820px) {

	.product-single {

		display: block;

		padding: 0px 20px 30px

	}

}



.product-image-single {

	position: relative;

	display: block;

	padding: 0

}



@media only screen and (max-width: 820px) {

	.product-image-single {

		padding-bottom: 0px

	}

}



.product-image-grab {

	display: none

}



.swiper-product {

	height: 100%

}



@media only screen and (max-width: 820px) {

	.swiper-product {

		height: 70vw;

		margin-bottom: 90px;

		min-height: 70vw

	}

}



.swiper-product .swiper-slide {

	position: relative;

	display: block;

	width: 100% !important;

	overflow: hidden

}



.swiper-product .swiper-slide img {

	position: absolute;

	display: block;

	height: auto;

	width: 100%;

	left: 50%;

	top: 35px;

	transform: translate(-50%, 0%)

}



@media only screen and (max-width: 820px) {

	.swiper-product .swiper-slide img {

		width: 75%;

		top: 0px

	}

}



.swiper-thumbs {

	position: absolute;

	left: -100px;

	top: 50%;

	width: 80px;

	transform: translateY(-50%)

}



@media only screen and (max-width: 820px) {

	.swiper-thumbs {

		left: 50%;

		top: auto;

		width: auto;

		bottom: -75px;

		transform: translateX(-50%)

	}

}



.swiper-thumbs .swiper-wrapper {

	display: block;

	transform: translateX(0) !important

}



@media only screen and (max-width: 820px) {

	.swiper-thumbs .swiper-wrapper {

		display: flex

	}

}



.swiper-thumbs .swiper-slide {

	display: flex;

	margin-bottom: 20px;

	height: 75px;

	width: 75px !important;

	border-radius: 50%;

	align-items: center;

	overflow: hidden;

	border: 1px solid #eee

}



@media only screen and (max-width: 1200px) {

	.swiper-thumbs .swiper-slide {

		height: 70px;

		width: 70px !important;

		margin: 10px 0

	}

}



@media only screen and (max-width: 820px) {

	.swiper-thumbs .swiper-slide {

		height: 60px;

		width: 60px !important;

		margin: 0 10px

	}

}



.swiper-thumbs .swiper-slide img {

	opacity: 0.5;

	transition: 0.3s all ease

}



.swiper-thumbs .swiper-slide.swiper-slide-active img {

	opacity: 1

}



.product-info-single h1 {

	font-size: 38px;

	margin-top: 0px;

	margin-bottom: 5px;

	border-bottom: 2px solid #eee;

	padding-bottom: 20px;

	transition: .3s all ease

}



@media only screen and (max-width: 1480px) {

	.product-info-single h1 {

		font-size: 34px;

		margin-bottom: 0px

	}

}



@media only screen and (max-width: 1200px) {

	.product-info-single h1 {

		font-size: 30px

	}

}



@media only screen and (max-width: 992px) {

	.product-info-single h1 {

		font-size: 28px;

		padding-bottom: 10px

	}

}



@media only screen and (max-width: 820px) {

	.product-info-single h1 {

		font-size: 32px;

		padding-bottom: 10px

	}

}



.product-info-single {

	flex-direction: column;

	padding-top: 30px

}



@media only screen and (max-width: 820px) {

	.product-info-single {

		padding: 15px 0 5px

	}

}



.product-info {

	flex-direction: column;

	margin-left: 40px;

	padding-bottom: 30px

}



@media only screen and (max-width: 1200px) {

	.product-info {

		margin-left: 15px

	}

}



@media only screen and (max-width: 820px) {

	.product-info {

		margin-left: 0px;

		padding-bottom: 0

	}

}



.product-info .spr-badge {

	cursor: pointer

}



.product-info .spr-badge-caption {

	pointer-events: none

}



.template-product .wrap {

	position: absolute;

	top: 0%;

	left: 0;

	z-index: -1;

	overflow: hidden;

	background: #fff

}



.js-qty__num {

	background: none !important;

	color: #111010;

	padding: 20px 13px;

	width: 55px;

	text-align: center;

	margin-bottom: 35px;

	border: none !important;

	box-shadow: inset 0 0 0 4px #f7f7f7;

	vertical-align: top

}



@media only screen and (max-width: 1480px) {

	.js-qty__num {

		padding: 16px 13px;

		width: 50px

	}

}



@media only screen and (max-width: 992px) {

	.js-qty__num {

		padding: 16px 0px;

		width: 50px

	}

}



.js-qty__adjust--minus,

.js-qty__adjust--plus {

	color: #222;

	background: none;

	font-size: 22px

}



.js-qty__adjust {

	padding: 16px 13px;

	background: #f7f7f7 !important;

	margin-bottom: 35px

}



@media only screen and (max-width: 1480px) {

	.js-qty__adjust {

		padding: 12px 13px

	}

}



@media only screen and (max-width: 820px) {

	.js-qty__adjust {

		padding: 12px 13px

	}

}



.product-pricing {

	margin-bottom: 10px

}



#ProductPrice,

#ComparePrice {

	display: inline-block;

	color: #222;

	font-size: 32px;

	padding-top: 15px;

	font-weight: 700;

	margin-bottom: 0;

	line-height: 1.2;

	margin-right: 15px;

	transition: .3s all ease

}



@media only screen and (max-width: 1480px) {

	#ProductPrice,

	#ComparePrice {

		font-size: 28px

	}

}



#ComparePrice {

	font-weight: 200;

	opacity: 0.2;

	color: #444;

	position: relative

}



#ComparePrice:after {

	content: '';

	display: block;

	position: absolute;

	top: calc(50% + 9px);

	left: 0;

	width: 100%;

	height: 2px;

	background: #444

}



.template-product #AddToCart2 {

	padding: 14px 25px 10px;

	border: 2px solid #222;

	background: #222;

	color: #fff;

	font-weight: 700;

	border-radius: 0;

	font-size: 15px;

	transition: .3s all ease;

	vertical-align: top;

	margin-top: 16px;

	margin-left: 5px

}



@media only screen and (max-width: 1480px) {

	.template-product #AddToCart2 {

		margin-top: 15px;

		padding: 10px 20px 8px

	}

}



@media only screen and (max-width: 820px) {

	.template-product #AddToCart2 {

		margin-left: 0px;

		margin-top: 20px;

		font-size: 14px;

		padding: 10px 11px 9px

	}

}



.template-product #AddToCart2.citrus {

	border: 2px solid #f9b236;

	background: #f9b236

}



.template-product #AddToCart2.mint {

	border: 2px solid #26badf;

	background: #26badf

}



.template-product #AddToCart2.natural {

	border: 2px solid #54e785;

	background: #54e785

}



.template-product #AddToCart2.latte {

	border: 2px solid #dfc9a3;

	background: #dfc9a3

}



.template-product #AddToCart2.berry {

	border: 2px solid #a73030;

	background: #a73030

}



.template-product #AddToCart2.fruit {

	border: 2px solid #a76cdf;

	background: #a76cdf

}



.template-product #AddToCart2.fresh {

	border: 2px solid #50e3ce;

	background: #50e3ce

}



.template-product #AddToCart2.disabled {

	margin-left: 0;

	border: 2px solid #F44336;

	background: #F44336

}



.template-product #AddToCart2:hover {

	color: #fff;

	border: 2px solid #222;

	background: #222

}



#addToCart-icon {

	width: 17px;

	display: inline-block;

	height: 30px;

	vertical-align: middle;

	margin-left: 10px;

	fill: #fff;

	margin-top: -3px;

	transition: .3s all ease

}



.template-product #AddToCart2:hover #addToCart-icon {

	fill: #fff

}



.template-product label[for=Quantity] {

	display: none !important;

	font-size: 13px;

	font-weight: 700;

	margin: 25px 0 10px

}



.js-qty {

	display: inline-block;

	margin-right: 18px;

	vertical-align: middle;

	margin-top: 15px

}



@media only screen and (max-width: 1480px) {

	.js-qty {

		margin-top: 15px

	}

}



@media only screen and (max-width: 820px) {

	.js-qty {

		margin-top: 20px;

		margin-right: 9px

	}

}



.template-product .spr-badge {

	margin-top: 15px

}



.product-single__photos {

	display: block;

	text-align: center;

	width: 100%;

	height: 100vh

}



.product-single__photos img {

	height: 70vh;

	width: auto;

	position: absolute;

	display: block;

	left: 50%;

	top: 50%;

	transform: translate(-50%, -50%)

}



.more-products-outer {

	border-top: 1px solid #e2e2e2;

	padding-bottom: 30px;

	padding-left: 30px;

	padding-top: 30px;

	display: block

}



.more-products-outer h4 {

	margin-left: 15px;

	margin-bottom: 25px

}



.more-product {

	display: block;

	text-align: center

}



.template-product .product-grid {

	display: block;

	text-align: center;

	padding: 15px;

	border: 1px solid #eee;

	margin: 0 8px 15px;

	overflow: hidden

}



@media only screen and (max-width: 820px) {

	.template-product .product-grid {

		margin-bottom: 10px

	}

}



.template-product .product-grid .h6 {

	margin-top: 5px;

	margin-bottom: 0px;

	opacity: 1

}



.template-product .product-grid p {

	opacity: 1;

	margin-bottom: 0px;

	margin-top: 5px

}



.description-container {

	padding: 0

}



.product-description {

	padding-top: 15px;

	margin-bottom: 15px

}



@media only screen and (max-width: 1480px) {

	.product-description {

		padding-top: 8px;

		margin-bottom: 8px

	}

}



.product-tabs {

	flex-direction: column;

	width: 100%

}



ul.tabs {

	display: flex;

	margin: 20px 0 20px;

	justify-content: space-between;

	padding: 0

}



ul.tabs li {

	display: flex;

	margin-bottom: 0;

	padding: 0;

	margin-left: -2px;

	flex-grow: 1

}



ul.tabs li a {

	border: 5px solid #fff;

	font-size: 14px;

	line-height: 30px;

	margin: 0;

	padding: 8px 20px;

	text-decoration: none;

	width: 100%;

	text-align: center;

	color: #111010

}



ul.tabs li a.active {

	background: #111010;

	border: 5px solid #111010;

	display: block;

	color: #fff

}



ul.tabs li:first-child a.active {

	margin-left: 0

}



ul.tabs li:first-child {

	margin-left: 0px

}



ul.tabs:before,

ul.tabs:after {

	content: " ";

	display: block;

	height: 0;

	overflow: hidden;

	visibility: hidden;

	width: 0

}



ul.tabs:after {

	clear: both

}



.product-description h1,

.product-description h2,

.product-description h3,

.product-description h4,

.product-description h5,

.product-description h6 {

	margin-bottom: 5px

}



#tab-1,

#tab-2,

#tab-3,

#tab-4,

#tab-5 {

	margin-top: 30px

}



.description-tab {

	align-items: center;

	padding: 30px 5%;

	border-bottom: 1px solid #eee;

	margin: 0 auto;

	display: flex

}



@media only screen and (max-width: 820px) {

	.description-tab {

		display: block;

		padding: 20px

	}

}



@media only screen and (max-width: 992px) {

	.description-row {

		flex-direction: row;

		flex-wrap: wrap

	}

}



@media only screen and (max-width: 992px) {

	.description-row p {

		margin-top: 0

	}

}



.description-tab-heading {

	font-size: 1.8rem

}



@media only screen and (max-width: 1480px) {

	.description-tab-heading {

		font-size: 1.75rem

	}

}



@media only screen and (max-width: 992px) {

	.description-tab-heading {

		text-align: center;

		width: 100%

	}

}



.potency-tab {

	display: grid;

	grid-template-columns: 250px auto

}



@media only screen and (max-width: 992px) {

	.potency-tab {

		grid-template-columns: 1fr

	}

}



@media only screen and (max-width: 992px) {

	.potency-tab .description-tab-heading {

		text-align: left;

		margin-top: 40px;

		margin-bottom: 5px

	}

}



.description-info-tab {

	padding: 0px 10px 20px 0

}



@media only screen and (max-width: 820px) {

	.description-info-tab {

		padding: 0px 5px 8px

	}

}



.potency-tab .text-block {

	padding: 40px 0 10px

}



@media only screen and (max-width: 820px) {

	.potency-tab .text-block {

		padding: 10px 0 10px

	}

}



.key-features {

	background: #fafafa;

	display: grid;

	grid-template-columns: 250px auto

}



@media only screen and (max-width: 992px) {

	.key-features {

		padding-bottom: 50px;

		padding-top: 40px;

		grid-template-columns: 1fr

	}

}



.key-features-row {

	display: grid;

	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr

}



@media only screen and (max-width: 992px) {

	.key-features-row {

		grid-template-columns: 1fr 1fr 1fr

	}

}



.description-info-tab-inner {

	flex-direction: column;

	text-align: center;

	padding: 45px 15px 20px;

	width: 100%;

	position: relative

}



@media only screen and (max-width: 992px) {

	.description-info-tab-inner {

		padding: 20px 0px 8px

	}

}



.description-info-tab-inner img {

	display: block;

	height: 70px;

	width: 70px;

	background-size: 70px;

	margin: 0 auto 15px;

	background-position: center;

	border-radius: 50%;

	border: 1px solid #ddd;

	background-repeat: no-repeat;

	transition: .3s all ease

}



@media only screen and (max-width: 820px) {

	.description-info-tab-inner img {

		height: 65px;

		width: 65px

	}

}



.description-info-tab-inner:hover img {

	border: 1px solid #222

}



.description-info-tab h5 {

	margin-top: 0;

	margin-bottom: 0;

	font-size: 10px;

	font-weight: 200;

	letter-spacing: 2px;

	text-transform: uppercase

}



.description-info-tab p {

	margin-bottom: 0;

	font-size: 14px;

	opacity: 0.5

}



.info-natural:before {

	background-image: url(https://ocannacbd.com/wp-content/themes/CustomWp/assets/css/leafs.png)

}



.info-dose:before {

	background-image: url(../images/dose2.png)

}



.info-gmo:before {

	background-image: url(../images/gmo.png)

}



.info-full:before {

	background-image: url(../images/fulls.png)

}



.info-facts:before {

	background-image: url(../images/fulls.png)

}



.info-ing p {

	margin-top: 15px;

	line-height: 1.3

}



.info-ing:before {

	background-image: url(https://ocannacbd.com/wp-content/themes/CustomWp/assets/images/ingr.png)

}



.swatch {

	margin: 5px 0

}



.swatch {

	margin-bottom: 10px;

	display: inline-block;

	width: 100%

}



@media only screen and (max-width: 1480px) {

	.swatch {

		margin-bottom: 5px

	}

}



.swatch:nth-of-type(2) {

	margin-bottom: 20px

}



.swatch .header {

	margin: 10px 0 8px;

	font-size: 13px;

	font-weight: 700

}



.template-product .selector-wrapper,

.template-product #productSelect {

	display: none !important

}



.swatch input {

	display: none

}



.swatch label {

	float: left;

	font-weight: 700;

	min-width: 40px !important;

	height: 45px !important;

	margin: 0;

	font-size: 14px;

	text-align: center;

	line-height: 44px;

	white-space: nowrap;

	cursor: pointer;

	transition: .3s all ease;

	box-shadow: inset 0 0 0 4px #f7f7f7

}



@media only screen and (max-width: 1480px) {

	.swatch label {

		height: 40px !important;

		font-size: 13px;

		line-height: 40px

	}

}



@media only screen and (max-width: 820px) {

	.swatch label {

		font-size: 12px;

		box-shadow: inset 0 0 0 3px #f7f7f7

	}

}



.swatch-element label {

	padding: 0 17px

}



@media only screen and (max-width: 1480px) {

	.swatch-element label {

		padding: 0 15px

	}

}



@media only screen and (max-width: 820px) {

	.swatch-element label {

		padding: 0 10px

	}

}



.color.swatch-element label {

	padding: 0

}



.swatch input:checked+label {

	color: #fff;

	background-color: #222;

	box-shadow: inset 0 0 0 4px #222

}



.swatch .citrus input:checked+label {

	background-color: #f9b236 !important;

	box-shadow: inset 0 0 0 4px #f9b236

}



.swatch .mint input:checked+label {

	background-color: #26badf;

	box-shadow: inset 0 0 0 4px #26badf

}



.swatch .natural input:checked+label {

	background-color: #54e785;

	box-shadow: inset 0 0 0 4px #54e785

}



.swatch .latte input:checked+label {

	background-color: #dfc9a3;

	box-shadow: inset 0 0 0 4px #dfc9a3

}



.swatch .berry input:checked+label {

	background-color: #a73030;

	box-shadow: inset 0 0 0 4px #a73030

}



.swatch .fruit-flavors input:checked+label {

	background-color: #a76cdf;

	box-shadow: inset 0 0 0 4px #a76cdf

}



.swatch .fresh input:checked+label {

	background-color: #50e3ce;

	box-shadow: inset 0 0 0 4px #50e3ce

}



.swatch-element.color {

	margin: 0 !important;

	margin-right: 26px !important;

	margin-top: 20px !important;

	margin-left: 10px !important

}



.swatch-element.color label[for=swatch-0-white] {

	border: 1px solid #ddd

}



.swatch-element.color label::after {

	content: '';

	position: absolute;

	top: -15px;

	left: -14px;

	width: 40px;

	height: 40px;

	border-radius: 0;

	border: 2px solid rgba(255, 255, 255, 0);

	transition: .3s all ease

}



.swatch-element.color input:checked+label {

	border: 2px solid rgba(238, 238, 238, 0)

}



.swatch-element.color input:checked+label[for=swatch-0-white] {

	border: 1px solid #eee

}



.swatch-element.color input:checked+label::after {

	content: '';

	position: absolute;

	top: -15px;

	left: -14px;

	width: 40px;

	height: 40px;

	border-radius: 0;

	border: 2px solid #c5c5c5

}



.swatch .swatch-element {

	float: left;

	cursor: pointer;

	-webkit-transform: translateZ(0);

	-webkit-font-smoothing: antialiased;

	margin: 0px 10px 10px 0;

	position: relative

}



@media only screen and (max-width: 820px) {

	.swatch .swatch-element {

		margin: 0px 4px 4px 0

	}

}



.crossed-out {

	position: absolute;

	width: 100%;

	height: 100%;

	left: 0;

	top: 0

}



.swatch .swatch-element .crossed-out {

	display: none

}



.swatch .swatch-element.soldout .crossed-out {

	display: block

}



.swatch .swatch-element.soldout label {

	filter: alpha(opacity=60);

	-khtml-opacity: 0.6;

	-moz-opacity: 0.6;

	opacity: 0.6

}



.swatch .tooltip {

	text-align: center;

	background: #c5c5c5;

	color: #fff;

	bottom: 100%;

	padding: 10px;

	display: block;

	position: absolute;

	width: 100px;

	left: -39px;

	margin-bottom: 15px;

	filter: alpha(opacity=0);

	-khtml-opacity: 0;

	-moz-opacity: 0;

	opacity: 0;

	visibility: hidden;

	-webkit-transform: translateY(10px);

	-moz-transform: translateY(10px);

	-ms-transform: translateY(10px);

	-o-transform: translateY(10px);

	transform: translateY(10px);

	-webkit-transition: all .25s ease-out;

	-moz-transition: all .25s ease-out;

	-ms-transition: all .25s ease-out;

	-o-transition: all .25s ease-out;

	transition: all .25s ease-out;

	-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

	-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

	-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

	-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

	z-index: 10000;

	-moz-box-sizing: border-box;

	-webkit-box-sizing: border-box;

	box-sizing: border-box

}



.swatch .tooltip:before {

	bottom: -20px;

	content: " ";

	display: block;

	height: 20px;

	left: 0;

	position: absolute;

	width: 100%

}



.swatch .tooltip:after {

	border-left: solid transparent 10px;

	border-right: solid transparent 10px;

	border-top: solid #c5c5c5 10px;

	bottom: -10px;

	content: " ";

	height: 0;

	left: 50%;

	margin-left: -13px;

	position: absolute;

	width: 0

}



.swatch .swatch-element:hover .tooltip {

	filter: alpha(opacity=100);

	-khtml-opacity: 1;

	-moz-opacity: 1;

	opacity: 1;

	visibility: visible;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	-ms-transform: translateY(0px);

	-o-transform: translateY(0px);

	transform: translateY(0px)

}



.swatch.error {

	background-color: #e8d2d2 !important;

	color: #333 !important;

	padding: 1em;

	border-radius: 5px

}



.swatch.error p {

	margin: 0.7em 0

}



.swatch.error p:first-child {

	margin-top: 0

}



.swatch.error p:last-child {

	margin-bottom: 0

}



.swatch.error code {

	font-family: monospace

}



.footer {

	background-color: #fff;

	padding: 0px;

	z-index: 1

}



.footer .foot-heading {

	text-transform: uppercase;

	letter-spacing: 1.3px;

	font-size: 12px;

	margin-top: 0;

	opacity: 0.5;

	color: #ffffff

}



@media only screen and (max-width: 820px) {

	.footer .foot-heading {

		margin-top: 25px;

		opacity: 0.5;

		margin-bottom: 5px

	}

}



.footer-container {

	padding: 80px 5% 0

}



@media only screen and (max-width: 820px) {

	.footer-container {

		max-width: 640px;

		padding: 80px 30px 0

	}

}



.footer-row {

	display: grid;

	grid-template-columns: 1.6fr 1fr 1fr 1fr

}



@media only screen and (max-width: 820px) {

	.footer-row {

		grid-template-columns: 1fr

	}

}



.footer-nav {

	list-style: none;

	padding: 0;

	margin-top: 20px

}



@media only screen and (max-width: 820px) {

	.footer-nav {

		margin-top: 0px

	}

}



.footer-nav li a {

	color: #ffffff;

	font-size: 15px;

	line-height: 2.1;

	font-weight: 400

}



.footer-nav li a:hover {

	opacity: 0.7;

	transition: .3s all ease

}



.footer-nav-huge li a {

	color: #ffffff;

	font-size: 32px;

	line-height: 1.75;

	font-weight: 700;

	display: inline-block;

	-webkit-text-stroke-width: 1px;

	-webkit-text-stroke-color: #ffffff;

	transform: scale(1);

	transition: .3s all ease

}



.footer-nav-huge li a:hover {

	color: transparent;

	transform: scale(1.1)

}



.footer-textarea {

	margin-top: 20px;

	color: #ffffff;

	opacity: 1

}



@media only screen and (max-width: 992px) {

	.mail-footer {

		padding: 0 0 40px

	}

}



.mail-footer img {

	max-width: 130px;

	margin-bottom: 40px

}



.footer-block {

	display: flex;

	flex-direction: column

}



.footer-div {

	display: block;

	margin-bottom: 26px

}



.footer-icon-info {

	margin-top: 15px

}



.mail-footer span {

	margin-left: 20px;

	margin-top: 15px;

	position: relative;

	font-size: 14px;

	color: #fff;

	opacity: 1

}



.footer-icon-info span {

	color: #fff !important

}



.mail-footer form input[type=email] {

	width: 75%;

	height: 55px;

	background: transparent;

	padding: 20px;

	border: 2px solid #111010;

	outline: none

}



.mail-footer form .input-group input::placeholder,

.mail-footer form .input-group input::-webkit-input-placeholder,

.mail-footer form .input-group input::-moz-placeholder,

.mail-footer form .input-group input::-ms-input-placeholder {

	color: #111010 !important;

	opacity: 1

}



.footer-icon-info span {

	color: #fff !important

}



#mail-icon {

	width: 32px;

	fill: #ffffff;

	margin-top: 0;

	vertical-align: middle

}



.bottom-footer {

	margin-top: 60px;

	padding: 0 5%

}



.bottom-footer-row {

	border-top: 1px solid #333;

	display: grid;

	grid-template-columns: 1fr;/* 110px*/

}



.payment-icon {

	/*justify-content: flex-end;

	display: flex*/
	display: inline-block;
    float: right;

}

.foot-text{
	    clear: both;
    overflow: hidden;
}



.payment-icon svg {

	width: 50px;

	display: inline-block;

	margin-left: 4px;

	height: 100px;

	vertical-align: middle

}



.reserved-footer {

	/*font-size: 14px;

	align-items: center;

	color: #ffffff;

	display: flex*/
	font-size: 14px;
    align-items: center;
    color: #ffffff;
    display: inline-block;
    float: left;
    margin-top: 40px;

}



.newsletter-form {

	margin-top: 80px

}



.newsletter-form .button-main {

	margin: 0;

	margin-top: 20px

}



.newsletter-form .button-main input {

	color: #111010

}



.newsletter-form .button-main:before,

.newsletter-form .button-main:after {

	display: none

}



.blog-container {

	padding: 0 5%

}



@media only screen and (max-width: 992px) {

	.blog-container {

		padding: 0 20px

	}

}



.blog-row {

	display: grid;

	grid-template-columns: 1fr 1fr 1fr 1fr;

	padding: 40px 0 30px

}



@media only screen and (max-width: 992px) {

	.blog-row {

		display: block

	}

}



.blog-row .article {

	padding: 20px;

	background: #fff;

	transition: .1s background-color ease

}



@media only screen and (max-width: 992px) {

	.blog-row .article {

		padding: 0px;

		margin-bottom: 40px;

		padding-bottom: 20px;

		border-bottom: 1px solid #eee

	}

}



.blog-row .article h5 {

	margin-top: 20px;

	line-height: 1.4

}



.blog-row .article h5 a {

	color: #222;

	transition: .1s color ease

}



.blog-row .article p {

	transition: .1s color ease, .1s opacity ease

}



.blog-row .article .posted-by {

	font-size: 11px;

	opacity: 0.3;

	margin-bottom: 10px

}



.blog-row .article:hover {

	background: #111

}



@media only screen and (max-width: 992px) {

	.blog-row .article:hover {

		background: #fff

	}

}



.blog-row .article:hover h5 a {

	color: #fff

}



@media only screen and (max-width: 992px) {

	.blog-row .article:hover h5 a {

		color: #222

	}

}



.blog-row .article:hover p {

	color: #fff;

	opacity: 1

}



@media only screen and (max-width: 992px) {

	.blog-row .article:hover p {

		color: #222;

		opacity: 1

	}

}



@media only screen and (max-width: 992px) {

	.blog-row .article:nth-of-type(1) {

		background-color: #121212

	}

}



@media only screen and (max-width: 820px) {

	.blog-row .article:nth-of-type(1) h5 a,

	.blog-row .article:nth-of-type(1) p {

		color: #fff

	}

}



@media only screen and (max-width: 820px) {

	.blog-row .article:nth-of-type(1) h5,

	.blog-row .article:nth-of-type(1) p {

		padding: 0 20px

	}

}



@media only screen and (max-width: 992px) {

	.blog-row .article:nth-of-type(1) p {

		opacity: 1

	}

}



.blog-row .article:last-of-type {

	border-bottom: 0

}



.blog-row .article__featured-image {

	display: block;

	overflow: hidden;

	position: relative

}



.blog-row .article__featured-image img {

	transform: scale(1.02);

	transition: .5s transform ease

}



.blog-header h1 {

	width: 50%

}



@media only screen and (max-width: 820px) {

	.blog-header h1 {

		width: 100%;

		font-size: 1.8rem

	}

}



.blog-header h4 {

	background: #222;

	color: #fff;

	padding: 10px;

	display: inline-block;

	margin-top: 15px;

	font-size: 18px

}



.article-container {

	padding: 0 0 90px

}



.article-container-inner {

	padding: 30px 5% 0

}



@media only screen and (max-width: 820px) {

	.article-container-inner {

		padding: 15px 20px 0

	}

}



.article-row {

	display: grid;

	grid-template-columns: 1fr 420px

}



@media only screen and (max-width: 820px) {

	.article-row {

		display: block

	}

}



.article-content p {

	font-size: 15px

}



.article-header {

	padding-bottom: 30px;

	padding-top: 10px;

	border-bottom: 1px solid #eee;

	margin-top: 0px;

	font-size: 2.2rem

}



@media only screen and (max-width: 820px) {

	.article-header {

		font-size: 1.8rem

	}

}



.posted-by {

	font-size: 11px;

	text-transform: uppercase;

	letter-spacing: 1px;

	margin-bottom: 40px

}



.article-handle-div {

	border-top: 1px solid #eee;

	margin-top: 15px

}



.article-handle {

	text-transform: uppercase;

	font-weight: 700;

	padding: 7px 10px;

	background: #111;

	color: #fff;

	font-size: 11px;

	letter-spacing: 1px;

	border-top: 1px solid #eee;

	margin-top: 25px;

	display: inline-block;

	font-style: italic

}



.next-prev-button {

	padding-top: 30px;

	margin-top: 50px;

	display: flex;

	justify-content: space-between;

	border-top: 1px solid #eee

}



.next-prev-button .left,

.next-prev-button .right {

	background-color: #222;

	padding: 15px 20px;

	color: #fff;

	display: inline-flex;

	align-items: center

}



.next-prev-button .left a,

.next-prev-button .right a {

	color: #fff;

	font-size: 15px

}



.space-between {

	flex-grow: 10

}



.next-prev-button .left .article-arrow {

	margin-right: 10px

}



.next-prev-button .right .article-arrow {

	margin-left: 10px

}



.sidebar {

	position: relative;

	display: inline-block;

	width: 380px;

	max-width: 380px;

	margin-left: 40px;

	margin-top: 10px

}



@media only screen and (max-width: 820px) {

	.sidebar {

		width: 100%;

		max-width: 100%;

		margin: 60px 0 0

	}

}



.sidebar-inner {

	position: absolute;

	display: block;

	background: #111;

	padding: 25px

}



@media only screen and (max-width: 820px) {

	.sidebar-inner {

		position: relative !important

	}

}



.sidebar-heading {

	font-size: 20px;

	font-weight: 700;

	border-bottom: 1px solid #333;

	padding-bottom: 25px;

	margin-bottom: 10px;

	color: #fff

}



.related-article {

	display: grid;

	grid-template-columns: 1fr 2fr;

	padding: 15px 0;

	grid-column-gap: 15px;

	border-bottom: 1px solid #333

}



.related-article:last-of-type {

	border-bottom: 0;

	padding: 15px 0 10px

}



.related-article-image {

	padding: 0px

}



.related-article-image,

.related-article-info {

	display: block

}



.blog-handle {

	display: block;

	font-size: 10px;

	text-transform: uppercase;

	letter-spacing: 1px;

	margin-bottom: 3px;

	font-weight: 700;

	color: #fff

}



.related-article-info h6 {

	font-size: 16px;

	margin-bottom: 0px

}



.related-article-info h6 a {

	color: #fff

}



.related-article-info time {

	font-size: 12px;

	opacity: 0.4;

	color: #fff

}



.review-tab {

	width: 100%

}



#shopify-product-reviews {

	padding: 0px !important;

	margin: 0px !important;

	width: 100%

}



.spr-container {

	padding: 0 !important;

	border: 0 !important

}



.spr-header {

	padding: 50px 5%;

	display: flex;

	background-color: #222;

	justify-content: space-between;

	align-items: center

}



@media only screen and (max-width: 540px) {

	.spr-header {

		flex-direction: column;

		padding: 35px 30px

	}

}



@media only screen and (max-width: 540px) {

	.spr-header .spr-icon {

		margin: 0 3px !important

	}

}



.spr-header-title {

	font-size: 2rem !important;

	width: 100%;

	color: #fff;

	margin-bottom: 0 !important

}



@media only screen and (max-width: 820px) {

	.spr-header-title {

		font-size: 1.5rem !important

	}

}



@media only screen and (max-width: 540px) {

	.spr-header-title {

		margin-bottom: 15px !important

	}

}



.spr-reviews {

	margin-top: 0 !important

}



.spr-summary-starrating {

	width: 160px

}



@media only screen and (max-width: 820px) {

	.spr-summary-starrating {

		width: 140px

	}

}



@media only screen and (max-width: 540px) {

	.spr-summary-starrating {

		width: 100%

	}

}



.spr-summary-caption {

	width: 200px;

	color: #fff

}



@media only screen and (max-width: 820px) {

	.spr-summary-caption {

		width: 155px

	}

}



.spr-summary-actions-newreview {

	float: right;

	padding: 15px 20px;

	background: #444;

	color: #fff;

	width: 151px;

	font-size: 14px;

	text-align: center;

	transition: .3s all ease

}



@media only screen and (max-width: 540px) {

	.spr-summary-actions-newreview {

		display: block;

		margin-top: 15px;

		padding: 13px 10px 15px

	}

}



.spr-summary-actions-newreview:hover {

	background: #666;

	color: #fff

}



.spr-summary-actions-newreview:active,

.spr-summary-actions-newreview:focus {

	color: #fff

}



.spr-summary {

	*zoom: 1;

	display: flex;

	align-items: center

}



@media only screen and (max-width: 540px) {

	.spr-summary {

		flex-direction: column;

		width: 100%

	}

}



.spr-icon {

	color: #ffc107

}



.spr-badge-caption {

	margin-left: 15px

}



.spr-review-header {

	display: flex;

	align-items: center

}



@media only screen and (max-width: 1200px) {

	.spr-review-header {

		display: block

	}

}



.spr-starratings {

	width: 140px;

	margin-bottom: 0 !important

}



@media only screen and (max-width: 1200px) {

	.spr-starratings {

		width: auto

	}

}



.spr-review-header-title {

	font-size: 1.5rem !important;

	line-height: 1.5 !important;

	width: 350px

}



@media only screen and (max-width: 1480px) {

	.spr-review-header-title {

		width: 320px;

		font-size: 1.25rem !important

	}

}



@media only screen and (max-width: 1200px) {

	.spr-review-header-title {

		width: auto

	}

}



@media only screen and (max-width: 820px) {

	.spr-review-header-title {

		margin-top: 12px !important

	}

}



.spr-review {

	display: flex;

	align-items: center;

	position: relative;

	padding: 50px 0 !important

}



@media only screen and (max-width: 1200px) {

	.spr-review {

		flex-direction: column;

		align-items: normal

	}

}



.spr-review-content-body {

	margin-top: 20px

}



.spr-review-reportreview {

	margin-top: 5px;

	padding: 10px 20px 12px;

	border: 1px solid #222;

	background-color: transparent;

	color: #222;

	transition: 0.3s all ease

}



@media only screen and (max-width: 820px) {

	.spr-review-reportreview {

		padding: 7px 14px

	}

}



.spr-review-reportreview:hover {

	background-color: #222;

	color: #fff

}



.spr-review-content {

	width: calc(100% - 165px);

	padding-right: 30px;

	display: inline-block;

	margin-bottom: 0 !important

}



@media only screen and (max-width: 1200px) {

	.spr-review-content {

		width: calc(100% - 95px);

		margin-top: 10px !important

	}

}



@media only screen and (max-width: 820px) {

	.spr-review-content {

		width: 100%;

		padding: 0;

		margin-top: 10px !important

	}

}



.spr-review-content p {

	margin-bottom: 0;

	opacity: 0.35

}



.spr-review-footer {

	width: 350px;

	display: inline-block;

	vertical-align: top

}



@media only screen and (max-width: 1200px) {

	.spr-review-footer {

		width: 90px;

		position: absolute;

		right: 0;

		top: 50%

	}

}



@media only screen and (max-width: 820px) {

	.spr-review-footer {

		top: 30px;

		margin-top: 10px !important

	}

}



.spr-summary-caption {

	opacity: 0.5;

	margin-top: 10px

}



.spr-review-header-byline {

	display: none !important

}



.spr-form-label+.spr-form-input {

	padding: 15px;

	border: 4px solid #f7f7f7

}



.spr-form-review-body .spr-form-input {

	border: 0

}



.spr-form-label+.spr-form-input {

	padding: 15px;

	border: 4px solid #f7f7f7

}



.spr-form-input.spr-starrating {

	padding: 0px;

	border: 0

}



.spr-form-title {

	display: none

}



.spr-form {

	margin-top: 0px !important

}



.spr-form-label {

	font-size: 14px !important;

	font-weight: 700;

	margin-top: 20px;

	line-height: 30px !Important

}



.spr-review:first-child {

	margin-top: 0px !important

}



.review-container {

	padding: 0;

	width: 100%

}



#reviews .review-container {

	width: 100%

}



.spr-content {

	padding: 0 5%

}



.spr-summary-actions-togglereviews {

	color: #fff;

	transition: .3s all ease

}



.spr-icon {

	color: #f9b236 !important;

	transition: .3s all ease

}



.spr-icon.citrus {

	color: #f9b236 !important

}



.spr-icon.mint {

	color: #26badf !important

}



.spr-icon.natural {

	color: #54e785 !important

}



.spr-icon.latte {

	color: #dfc9a3 !important

}



.spr-icon.berry {

	color: #a73030 !important

}



.spr-icon.fresh {

	color: #50e3ce !important

}



.spr-icon.fruit {

	color: #a76cdf !important

}



.spr-summary-actions-newreview.citrus {

	background: #f9b236 !important

}



.spr-summary-actions-newreview.mint {

	background: #26badf !important

}



.spr-summary-actions-newreview.natural {

	background: #54e785 !important

}



.spr-summary-actions-newreview.latte {

	background: #dfc9a3 !important

}



.spr-summary-actions-newreview.berry {

	background: #a73030 !important

}



.spr-summary-actions-newreview.fruit {

	background: #a76cdf !important

}



.spr-summary-actions-newreview.fresh {

	background: #50e3ce !important

}



.spr-button-primary {

	background: #222;

	margin-bottom: 50px !important;

	padding: 15px 20px;

	border-radius: 0;

	margin-top: 10px;

	color: #fff

}



.spr-pagination {

	margin: 15px 0 30px;

	padding-top: 20px !important

}



.spr-pagination-page a {

	padding: 7px 15px;

	border: 3px solid #eee;

	background: transparent;

	color: #222;

	display: inline-block

}



.spr-pagination-page.is-active {

	padding: 7px 15px;

	border: 3px solid #222;

	background: #222;

	color: #fff

}



.spr-pagination-prev,

.spr-pagination-next {

	display: none !important

}



.review-heading {

	text-align: center;

	padding: 0 20px

}



@media only screen and (max-width: 540px) {

	.review-heading {

		font-size: 1.8rem;

		padding: 0px

	}

}



.review-header {

	padding-bottom: 50px

}



@media only screen and (max-width: 820px) {

	.review-header {

		padding-bottom: 0px

	}

}



.review-header .star-ratings-sprite,

.review-header .star-ratings-sprite-rating {

	height: 41px;

	background-size: 41px;

	width: 200px

}



.review-header .star-ratings-sprite {

	margin: 30px auto 20px

}



.review-text-blocks {

	display: grid;

	grid-template-columns: 1fr 1fr 1fr;

	grid-column-gap: 20px;

	margin-top: 30px

}



@media only screen and (max-width: 820px) {

	.review-text-blocks {

		display: block

	}

}



.review-text-block {

	display: flex;

	font-size: 15px;

	line-height: 1.5

}



@media only screen and (max-width: 820px) {

	.review-text-block {

		margin-top: 20px;

		margin-bottom: 20px

	}

}



.review-text-block img {

	width: 60px;

	height: 60px;

	margin-right: 15px

}



.review-page-container {

	padding: 50px 5% 70px;

	margin: 0 auto

}



@media only screen and (max-width: 540px) {

	.review-page-container {

		padding: 40px 20px 70px

	}

}



.review-page-row {

	flex-direction: column

}



.review-page-title-outer {

	width: 100%;

	position: relative;

	text-align: center

}



.review-page-title-outer:before {

	content: '';

	position: absolute;

	display: block;

	width: 100%;

	height: 2px;

	background: #eee;

	top: calc(50% + 18px);

	left: 0;

	transform: translateY(-50%);

	z-index: -2

}



.review-page-title {

	display: inline-block;

	margin: 0 auto;

	text-align: center;

	font-size: 2rem;

	margin-top: 60px;

	margin-bottom: 30px;

	padding: 15px 20px;

	background: #fff

}



@media only screen and (max-width: 820px) {

	.review-page-title {

		font-size: 1.5rem

	}

}



.star-ratings-sprite {

	background: url("../images/sprite.png") repeat-x;

	font-size: 0;

	height: 21px;

	line-height: 0;

	overflow: hidden;

	text-indent: -999em;

	width: 110px;

	margin: 0px 0 20px;

	background-size: 22px

}



@media only screen and (max-width: 820px) {

	.star-ratings-sprite {

		margin: 0px 0 10px

	}

}



.star-ratings-sprite-rating {

	background: url("../images/sprite.png") repeat-x;

	background-position: 0 100%;

	float: left;

	height: 21px;

	display: block;

	background-size: 22px

}



.reviews-block {

	display: flex;

	align-items: center;

	padding: 30px 0;

	border-bottom: 1px solid #eee

}



@media only screen and (max-width: 540px) {

	.reviews-block {

		align-items: normal

	}

}



.reviews-block img {

	width: 200px;

	height: 200px

}



@media only screen and (max-width: 820px) {

	.reviews-block img {

		width: 60px;

		height: 60px;

		padding: 0;

		margin-bottom: 20px

	}

}



.review-page-row .reviews-block:nth-last-child(1) {

	border-bottom: 0

}



.reviews-block blockquote {

	padding-left: 110px;

	padding-right: 90px;

	font-style: italic;

	font-size: 15px;

	font-weight: 500;

	letter-spacing: -0.5px;

	line-height: 1.4;

	margin: 0

}



@media only screen and (max-width: 820px) {

	.reviews-block blockquote {

		padding: 0 35px 0 60px

	}

}



@media only screen and (max-width: 540px) {

	.reviews-block blockquote {

		padding: 0 0 0 40px;

		font-style: normal;

		font-size: 16px

	}

}



.reviews-block blockquote:before {

	content: url(https://ocannacbd.com/wp-content/themes/CustomWp/assets/images/test.svg);

	opacity: 0.1;

	top: 41px;

	left: 30px;

	width: 45px

}



@media only screen and (max-width: 820px) {

	.reviews-block blockquote:before {

		width: 30px;

		height: 30px;

		left: 10px;

		top: 0px

	}

}



@media only screen and (max-width: 540px) {

	.reviews-block blockquote:before {

		width: 20px;

		height: 20px;

		left: 9px;

		top: 0px

	}

}



.reviews-block blockquote:after {

	content: url(https://ocannacbd.com/wp-content/themes/CustomWp/assets/images/test.svg);

	display: inline-block;

	position: absolute;

	top: 41px;

	right: 7px;

	width: 45px;

	height: 45px;

	vertical-align: middle;

	transform: rotate(180deg);

	opacity: 0.1

}



@media only screen and (max-width: 820px) {

	.reviews-block blockquote:after {

		width: 35px;

		height: 35px;

		right: -15px;

		top: 31px

	}

}



@media only screen and (max-width: 540px) {

	.reviews-block blockquote:after {

		display: none

	}

}



.reviews-block blockquote h5 {

	font-size: 18px;

	margin-bottom: 0px;

	margin-top: 25px;

	font-style: normal

}



.reviews-block blockquote p {

	margin-bottom: 0;

	font-style: normal;

	margin-top: 0px

}



@media only screen and (max-width: 540px) {

	.star-rating-outer {

		background: #fff;

		padding: 0px

	}

}



.total-reviews #shopify-product-reviews {

	display: none

}



.total-reviews .total-reviews-inner {

	font-size: 1.3rem;

	text-align: center;

	width: 100%;

	margin: 10px 0 30px;

	font-weight: 100;

	opacity: 0.3

}



.contact-container {

	padding: 0;

	background: #f9f9f9

}



.contact-page-row {

	display: grid;

	grid-template-columns: 1fr 1fr;

	position: relative

}



@media only screen and (max-width: 992px) {

	.contact-page-row {

		display: flex;

		flex-direction: column-reverse

	}

}



.contact-img {

	position: relative;

	display: block;

	padding: 0;

	background-color: #2d2d2d

}



.contact-info-container {

	background: #fff

}



.contact-form {

	padding: 80px;

	background: #fff

}



@media only screen and (max-width: 1200px) {

	.contact-form {

		padding: 60px 30px

	}

}



@media only screen and (max-width: 820px) {

	.contact-form {

		padding: 40px 20px;

		text-align: center

	}

}



.contact-form-row,

.contact-form {

	flex-wrap: wrap

}



.contact-img-inner {

	align-self: stretch;

	position: relative;

	width: 100%

}



.contact-info {

	display: grid;

	grid-template-columns: 1fr 1fr;

	background: #2d2d2d;

	position: relative;

	padding: 30px 0

}



@media only screen and (max-width: 820px) {

	.contact-info {

		display: block

	}

}



.contact-address {

	align-items: center;

	display: flex;

	padding: 0px 40px;

	flex-direction: column;

	align-items: center;

	text-align: left;

	height: 100%

}



@media only screen and (max-width: 820px) {

	.contact-address {

		padding: 30px 20px;

		text-align: center

	}

}



.contact-address:first-of-type {

	border-right: 1px solid #333

}



@media only screen and (max-width: 820px) {

	.contact-address:first-of-type {

		border-right: 0;

		border-bottom: 1px solid #333

	}

}



.contact-address h3,

.contact-address p {

	color: #fff;

	width: 200px

}



@media only screen and (max-width: 820px) {

	.contact-address h3,

	.contact-address p {

		width: 100%

	}

}



.contact-address p {

	margin-bottom: 0;

	opacity: 1;

	color: #999

}



.contact-address strong {

	color: #fff

}



.contact-input {

	margin-bottom: 15px;

	padding: 0

}



.contact-input,

.contact-input label,

.contact-input input,

.contact-input textarea {

	display: block

}



.contact-input:active,

.contact-input:focus,

.contact-input label:active,

.contact-input label:focus,

.contact-input input:active,

.contact-input input:focus,

.contact-input textarea:active,

.contact-input textarea:focus {

	outline: 0;

	box-shadow: 0;

	border-color: #ccc

}



.contact-input label {

	display: none

}



.name-form {

	display: grid;

	grid-template-columns: 1fr 1fr;

	grid-column-gap: 15px

}



.contact-input input,

.contact-input textarea {

	padding: 12px;

	font-size: 13px;

	border: 4px solid #eee;

	background: transparent;

	transition: .3s all ease;

	width: calc(100% - 32px)

}



.contact-form .btn {

	padding: 10px 25px;

	border-radius: 0;

	background: #222;

	color: #fff

}



.contact-form h2 {

	width: 100%;

	font-size: 2.5rem;

	margin-bottom: 15px

}



.contact-form span {

	width: 100%;

	margin-bottom: 5px;

	text-transform: uppercase;

	letter-spacing: 1px;

	font-size: 13px;

	color: #00e576

}



.contact-form p {

	line-height: 1.5;

	padding: 10px 0

}



@media only screen and (max-width: 820px) {

	.contact-form p {

		text-align: left

	}

}



.contact-address h3 {

	font-size: 21px;

	margin-bottom: 20px

}



@media only screen and (max-width: 820px) {

	.contact-address h3 {

		font-size: 1.8rem

	}

}



.contact-address p {

	font-size: 12px

}



@media only screen and (max-width: 820px) {

	.contact-address p {

		font-size: 1rem

	}

}



.faq-container {

	padding: 50px 5% 70px

}



@media only screen and (max-width: 992px) {

	.faq-container {

		padding: 50px 30px

	}

}



.faq-bar-outer {

	background: #222;

	padding: 0 5%

}



@media only screen and (max-width: 992px) {

	.faq-bar-outer {

		padding: 0 20px

	}

}



.faq-row {

	display: grid;

	grid-template-columns: 1fr 1fr

}



@media only screen and (max-width: 992px) {

	.faq-row {

		grid-template-columns: 1fr 1.5fr

	}

}



.faq-bar-inner h1 {

	color: #fff;

	font-size: 2rem;

	margin-top: 13px

}



.faq-bar-inner p {

	color: #fff;

	margin: 0;

	opacity: 1;

	display: flex;

	justify-content: flex-end;

	align-items: center

}



@media only screen and (max-width: 820px) {

	.faq-bar-inner p {

		font-size: 13px

	}

}



.faq-bar-inner svg {

	width: 15px;

	height: 15px;

	margin-top: -15px;

	margin-left: 5px;

	fill: #54e785

}



.faq-bar-inner svg path {

	fill: #54e785

}



.faq-container h2 {

	padding-bottom: 25px;

	border-bottom: 1px solid #eee;

	margin-bottom: 25px

}



.faq-title {

	display: flex;

	flex-direction: row;

	align-items: center

}



.set {

	position: relative;

	width: 100%;

	height: auto

}



.faq-container .set:nth-of-type(1) {

	margin-top: 80px

}



.set>a {

	position: relative;

	display: block;

	padding: 24px 40px 24px 0;

	text-decoration: none;

	color: #222;

	font-size: 16px;

	font-weight: 600;

	text-transform: uppercase;

	border-top: 2px solid #eee;

	cursor: pointer;

	-webkit-transition: all 0.2s linear;

	-moz-transition: all 0.2s linear;

	transition: all 0.2s linear

}



@media only screen and (max-width: 992px) {

	.set>a {

		font-size: 14px

	}

}



.set>a i {

	float: right;

	margin-top: 2px

}



.faq-container .content {

	display: none;

	background-color: #f7f7f7

}



.faq-container .content p {

	padding: 20px 15px;

	margin: 0;

	color: #333

}



.set .pa:before {

	display: none

}



.set .pa:after {

	content: '+';

	position: absolute;

	right: 0;

	display: block;

	font-size: 20px;

	font-weight: 900;

	width: 25px;

	height: 25px;

	border-radius: 50%;

	background: #222;

	color: #fff;

	text-align: center;

	top: 50%;

	transform: translateY(-50%);

	line-height: 1

}



.set .pa.minus:after {

	content: '-';

	position: absolute;

	right: 0;

	display: block;

	font-size: 20px;

	font-weight: 900;

	width: 25px;

	height: 25px;

	border-radius: 50%;

	background: #222;

	color: #fff;

	text-align: center;

	top: 50%;

	transform: translateY(-50%);

	line-height: 1

}



.subscribe_outer {

	background: #222;

	padding: 70px 5%

}



@media only screen and (max-width: 820px) {

	.subscribe_outer {

		padding: 30px

	}

}



.subscribe_wrapper {

	display: grid;

	grid-template-columns: 1fr 1fr

}



@media only screen and (max-width: 992px) {

	.subscribe_wrapper {

		display: block;

		max-width: 540px

	}

}



.subscribe_wrapper h3,

.subscribe_wrapper p {

	color: #fff

}



.subscribe_wrapper h3 {

	margin-top: 0;

	font-size: 1.6rem

}



@media only screen and (max-width: 992px) {

	.subscribe_wrapper h3 {

		font-size: 24px

	}

}



@media only screen and (max-width: 992px) {

	.subscribe_wrapper p {

		font-size: 0.85rem

	}

}



.subscribe_wrapper .subscription {

	padding-right: 70px;

	border-right: 1px solid #333

}



@media only screen and (max-width: 992px) {

	.subscribe_wrapper .subscription {

		padding: 10px 0 35px;

		border-right: 0;

		border-bottom: 1px solid #333

	}

}



.subscribe_wrapper .sharing {

	padding-left: 70px

}



@media only screen and (max-width: 992px) {

	.subscribe_wrapper .sharing {

		padding: 35px 0 10px

	}

}



.MKButton {

	padding: 16px 20px;

	color: #fff;

	font-size: 12px;

	text-transform: uppercase;

	font-weight: 700;

	letter-spacing: 0.4px

}



@media only screen and (max-width: 992px) {

	.MKButton {

		width: 100%

	}

}



.subscribe_form {

	padding: 14px;

	font-size: 12px;

	width: 160px;

	background: transparent;

	box-shadow: none;

	outline: 0;

	border: 2px solid #5d5d5d;

	color: #fff;

	margin-right: 15px;

	transition: .3s all ease

}



@media only screen and (max-width: 1200px) {

	.subscribe_form {

		width: 160px

	}

}



@media only screen and (max-width: 992px) {

	.subscribe_form {

		margin-right: 0px;

		margin-bottom: 15px;

		width: calc(100% - 30px)

	}

}



.subscribe_form:active,

.subscribe_form:focus {

	border: 2px solid #fff

}



.text-section {

	padding: 35px 5%;

	text-align: center;

	background: #222

}



.text-section h4 {

	color: #fff;

	text-transform: uppercase;

	font-size: 17px;

	letter-spacing: 0.5px;

	margin-top: 7px;

	margin-bottom: 7px;

	font-weight: 900

}



.text-section .text-line-2 {

	font-weight: 100;

	font-size: 15px;

	color: #797979

}



.mission-brief {

	display: flex;

	position: relative;

	align-items: center

}



@media only screen and (max-width: 820px) {

	.mission-brief {

		display: block

	}

}



.mission-header-image img {

	display: block

}



.mission-container {

	display: flex;

	max-width: calc(50% - 160px);

	flex-direction: column;

	align-items: center;

	height: 100%;

	margin: 100px 80px;

	flex: 1

}



@media only screen and (max-width: 820px) {

	.mission-container {

		flex-direction: column;

		max-width: 100%;

		margin: 0;

		padding: 50px 20px

	}

}



.mission-image {

	position: absolute;

	height: 100%;

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	width: 50%;

	right: 0

}



@media only screen and (max-width: 820px) {

	.mission-image {

		width: 100%;

		position: relative;

		height: 100vw

	}

}



.mission-bar {

	padding: 0 80px

}



@media only screen and (max-width: 820px) {

	.mission-bar {

		padding: 0 20px

	}

}



.mission-container p {

	width: 100%;

	margin-bottom: 5px

}



.lab-row {

	padding: 30px 5%

}



@media only screen and (max-width: 820px) {

	.lab-row {

		padding: 30px 20px

	}

}



.lab-info-list {

	display: grid;

	grid-template-columns: 1fr 1fr;

	grid-column-gap: 20px;

	padding: 40px 0 80px

}



@media only screen and (max-width: 820px) {

	.lab-info-list {

		display: flex;

		flex-direction: column;

		padding: 30px 0px 50px

	}

}



.lab-info-list p {

	opacity: 1;

	margin-bottom: 10px;

	margin-top: 10px;

	font-size: 0.95rem

}



.lab-info-image {

	display: flex;

	align-items: center;

	padding: 0px 120px

}



@media only screen and (max-width: 820px) {

	.lab-info-image {

		margin-bottom: 20px;

		padding: 10px

	}

}



.lab-info-text ul {

	padding-top: 10px

}



.lab-info-text ul li {

	position: relative;

	list-style: none;

	padding: 1px 0

}



.lab-info-text ul li:before {

	content: '';

	display: block;

	position: absolute;

	width: 20px;

	height: 20px;

	left: -40px;

	top: 50%;

	transform: translateY(-50%);

	background-image: url("https://ocannacbd.com/wp-content/themes/CustomWp/assets/images/tick.svg");

	background-size: cover;

	background-position: center

}



.lab-info-text ul li p {

	font-size: 1.05rem

}



.lab-info-text button {

	margin-top: 20px

}



.lab-certi-image {

	display: grid;

	grid-template-columns: 1fr 1fr 1fr;

	grid-column-gap: 20px

}



@media only screen and (max-width: 820px) {

	.lab-certi-image {

		grid-column-gap: 10px

	}

}



.lab-certi-section {

	padding-bottom: 40px

}



.lab-certi-section .review-page-title {

	margin-top: 20px

}



.lab-certi-section .review-page-title-outer:before {

	top: calc(50% + 0px)

}



.lab-certi-image a {

	display: block;

	height: 18vw;

	overflow: hidden

}



.lab-info-para {

	display: flex;

	padding: 0 40px;

	flex-direction: column;

	justify-content: center

}



@media only screen and (max-width: 820px) {

	.lab-info-para {

		padding: 0 0px

	}

}



.lab-full-image {

	padding: 0 20px

}



.lab-info-product {

	border-top: 2px solid #eee;

	padding: 40px 0

}



@media only screen and (max-width: 820px) {

	.lab-info-product {

		flex-direction: column-reverse;

		text-align: center

	}

}



.lab-info-product h2 {

	margin-bottom: 10px

}



@media only screen and (max-width: 820px) {

	.lab-info-product h2 {

		font-size: 1.5rem

	}

}



@media only screen and (max-width: 820px) {

	.lab-info-product .button-with-icon {

		margin: 15px auto 0

	}

}



.lab-container .faq-row {

	grid-template-columns: 1fr

}



.lab-info-product p {

	opacity: 0.4

}



.cart-container {

	padding: 0 5% 60px

}



@media only screen and (max-width: 820px) {

	.cart-container {

		padding: 0 20px 60px

	}

}



.cart-page-outer {

	display: grid;

	grid-template-columns: 7fr 3fr;

	grid-column-gap: 30px

}



@media only screen and (max-width: 992px) {

	.cart-page-outer {

		grid-template-columns: 1fr;

		grid-column-gap: 0px

	}

}



.cart-table,

.cart-table thead,

.cart-table tbody {

	display: block

}



.cart-table thead tr {

	display: grid;

	grid-template-columns: 2fr 1fr 1.5fr .5fr

}



@media only screen and (max-width: 820px) {

	.cart-table thead tr {

		grid-template-columns: 2fr 98px 50px

	}

}



.cart-table tbody tr {

	display: grid;

	grid-template-columns: 1fr 1fr 1fr 1.5fr .5fr;

	grid-column-gap: 5px;

	align-items: center;

	padding: 10px;

	margin-bottom: 10px;

	border-bottom: 1px solid #eee

}



@media only screen and (max-width: 820px) {

	.cart-table tbody tr {

		grid-template-columns: .5fr 1fr 98px 50px;

		padding: 5px

	}

}



.product-total {

	text-align: right;

	font-weight: 700

}



.product-name {

	text-align: left

}



.cart-product-row {

	padding: 20px 0

}



@media only screen and (max-width: 820px) {

	.cart-container h1 {

		font-size: 1.6rem;

		text-align: center

	}

}



.cart-product-row .price {

	text-align: center

}



.cart__image {

	width: 120px;

	display: block

}



@media only screen and (max-width: 820px) {

	.cart__image {

		width: 50px

	}

}



@media only screen and (max-width: 340px) {

	.cart__image {

		width: 35px

	}

}



@media only screen and (max-width: 820px) {

	.price-mob {

		display: none

	}

}



.cart-product-row .js-qty {

	margin-right: 0

}



.cart-product-row .js-qty .js-qty__adjust,

.cart-product-row .js-qty .js-qty__num {

	margin-bottom: 15px

}



@media only screen and (max-width: 1480px) {

	.cart-product-row .js-qty .js-qty__adjust,

	.cart-product-row .js-qty .js-qty__num {

		padding: 20px 13px

	}

}



.cart-product-row .js-qty__num {

	width: 15px !Important;

	padding: 15px 13px !important

}



@media only screen and (max-width: 992px) {

	.cart-product-row .js-qty__num {

		width: 25px

	}

}



@media only screen and (max-width: 540px) {

	.cart-product-row .js-qty__num {

		width: 10px;

		height: 7px

	}

}



.cart-product-row .js-qty__adjust {

	padding: 11px 10px !important;

	color: #fff;

	background: #222 !important

}



@media only screen and (max-width: 1200px) {

	.cart-product-row .js-qty__adjust {

		padding: 11px 10px

	}

}



@media only screen and (max-width: 540px) {

	.cart-product-row .js-qty__adjust {

		padding: 11px 7px !important;

		font-size: 13px

	}

}



.cart-quantity {

	text-align: center

}



.cart__header-labels {

	background: #222;

	padding: 20px;

	color: #fff;

	margin-top: 20px;

	margin-bottom: 15px

}



.cart-container textarea {

	background: rgba(255, 255, 255, 0.1);

	color: #fff;

	width: 100%;

	border: 0;

	margin-top: 15px;

	height: 90px

}



.cart-details {

	background: #222;

	padding: 20px;

	margin-top: 20px;

	display: inline-table

}



@media only screen and (max-width: 540px) {

	.cart-details {

		display: block;

		width: calc(100% - 40px)

	}

}



.cart-subtotal .cart-subtotal-inner {

	color: #fff;

	display: grid;

	grid-template-columns: 1fr 1fr

}



.cart-subtotal .cart__subtotal {

	text-align: right;

	color: #fff;

	opacity: 1

}



.cart-subtotal .cart__subtotal p {

	opacity: 1

}



.cart-subtotal p {

	opacity: 1;

	color: #fff

}



.button-with-icon.green {

	background-color: #05e670

}



.button-with-icon.green:hover {

	background-color: #fff !Important;

	color: #222

}



.button-with-icon.black {

	background-color: #444

}



.button-with-icon.black:hover {

	background-color: #fff !Important;

	color: #222

}



.cart-continue-shopping {

	background-color: #05e670

}



.cart-continue-shopping:hover {

	color: #fff

}



@media only screen and (max-width: 992px) {

	.cart-details {

		max-width: 400px;

		margin-left: auto;

		margin-top: 20px

	}

}



@media only screen and (max-width: 540px) {

	.cart-details {

		max-width: 100%;

		margin-left: auto;

		margin-top: 20px

	}

}



.cart-empty-container {

	text-align: center

}



.cart-emplty-container a {

	color: #05e670

}



.cart-container .cart__remove {

	color: #bf1616;

	display: block

}



.login-container {

	padding: 0 5%;

	text-align: center

}



.login-container .form-vertical {

	text-align: center

}



.login-container h1 {

	margin-top: 30px;

	margin-bottom: 30px

}



.login-container label {

	display: none

}



.login-container .form-field input {

	padding: 10px 15px;

	height: 25px;

	background: transparent;

	border: 5px solid #f7f7f7;

	margin-bottom: 15px;

	min-width: 350px

}



@media only screen and (max-width: 820px) {

	.login-container .form-field input {

		min-width: auto;

		width: calc(100% - 40px)

	}

}



.login-container .button-with-icon {

	background: #52b62e;

	cursor: pointer

}



.login-container .button-with-icon input {

	color: #fff;

	font-size: 1rem;

	cursor: pointer

}



.login-container .button-with-icon.login-button {

	padding: 15px 25px

}



.login-container .button-with-icon.signup-button {

	background: #222;

	font-size: 1rem;

	padding: 0;

	margin-left: 10px

}



.login-container .button-with-icon.signup-button a {

	color: #fff;

	padding: 16px 25px 17px;

	display: block

}



#HideRecoverPasswordLink,

.return-to-store {

	display: block;

	margin: 20px auto 40px

}



#RecoverPasswordForm h2 {

	margin-top: 30px;

	margin-bottom: 30px

}



.account-container {

	padding: 30px 5%;

	position: relative

}



.account-container h1 {

	border-bottom: 4px solid #222;

	padding-bottom: 26px;

	margin-bottom: 20px;

	font-size: 2rem

}



.account-row {

	display: grid;

	grid-template-columns: 2.5fr 1fr;

	grid-column-gap: 20px;

	margin-top: 20px

}



@media only screen and (max-width: 992px) {

	.account-row {

		display: block

	}

}



.account-details {

	background: #222;

	padding: 20px

}



.account-details h3 {

	color: #fff;

	border-bottom: 1px solid #333;

	padding-bottom: 14px;

	margin-bottom: 10px

}



.account-details h4,

.account-details p a,

.account-details p {

	color: #fff

}



.account-details p {

	margin-bottom: 5px

}



#swell-reward-fab {

	border-top: 1px solid #eee

}



.customer-return a {

	background: #222;

	color: #fff

}



.half-grid {

	display: grid;

	grid-template-columns: 1fr 1fr;

	grid-column-gap: 20px

}



@media only screen and (max-width: 820px) {

	.half-grid {

		display: block

	}

}



.account-container .form-field input,

.account-container .form-field select {

	padding: 10px 15px;

	height: 25px;

	background: transparent;

	border: 5px solid #f7f7f7;

	margin-bottom: 15px;

	min-width: 350px;

	width: calc(100% - 40px)

}



@media only screen and (max-width: 820px) {

	.account-container .form-field input,

	.account-container .form-field select {

		min-width: auto;

		width: calc(100% - 40px)

	}

}



.account-container .form-field select {

	width: 100%;

	height: 60px

}



.account-container .form-vertical {

	max-width: 1000px

}



.account-container .form-vertical label {

	display: block;

	margin-bottom: 10px;

	font-size: 12px;

	text-transform: uppercase;

	letter-spacing: 1px

}



.account-container .form-vertical h2 {

	margin-top: 20px;

	margin-bottom: 30px

}



.account-container .form-vertical .checkbox {

	display: grid;

	grid-template-columns: 20px 1fr

}



.account-container .form-vertical .button-with-icon,

.account-container .form-vertical .button-with-icon a {

	background: #222;

	color: #fff;

	font-size: 13px

}



.account-container .form-vertical .button-with-icon input {

	color: #fff

}



.form-vertical .button-with-icon.green {

	padding: 18px 25px;

	background: #52b62e;

	margin-right: 10px

}



.form-vertical .button-with-icon.green:hover {

	background: #222 !important

}



.account-container .form-vertical .button-with-icon {

	margin-top: 20px;

	margin-bottom: 20px

}



.address-grid {

	padding: 20px 0;

	border-top: 5px solid #f7f7f7

}



.address-block-grid {

	display: grid;

	grid-template-columns: 1fr 1fr 1fr;

	grid-column-gap: 20px

}



@media only screen and (max-width: 992px) {

	.address-block-grid {

		grid-template-columns: 1fr 1fr

	}

}



@media only screen and (max-width: 820px) {

	.address-block-grid {

		display: block

	}

}



.address-block {

	margin-top: 20px;

	border: 1px solid #eee;

	padding: 20px 35px 10px

}



.order-table {

	width: 100%;

	display: block

}



.order-table thead {

	padding: 20px;

	background: #222;

	color: #fff;

	width: calc(100% - 40px);

	display: block

}



.order-table thead tr {

	display: grid;

	grid-template-columns: 1fr 1fr 1fr 1fr 1fr

}



@media only screen and (max-width: 992px) {

	.order-table thead tr {

		font-size: 13px

	}

}



.order-table tbody {

	display: block

}



.order-table tbody tr {

	display: grid;

	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

	width: calc(100% - 40px);

	padding: 20px;

	background: #f7f7f7

}



@media only screen and (max-width: 992px) {

	.order-table tbody tr {

		font-size: 13px

	}

}



.order-table tbody tr td {

	text-align: center

}



.order-table tfoot {

	max-width: 500px;

	padding: 20px;

	display: block;

	background: #222;

	margin-top: 20px

}



.order-table tfoot tr {

	display: grid;

	grid-template-columns: 1fr 100px;

	padding: 10px 10px;

	font-size: 15px

}



.order-table tfoot tr td {

	color: #fff

}



.order-table tfoot tr td.text-right {

	text-align: right

}



.order-table tfoot tr:last-of-type {

	border-top: 1px solid #fff;

	margin-top: 15px;

	padding-top: 23px;

	font-size: 20px

}



.order-address {

	padding: 20px;

	border: 1px solid #eee

}



.notice-container {

	background: #222;

	display: flex;

	justify-content: center;

	align-items: center

}



.notice-container svg {

	width: 27px;

	fill: #fff;

	margin-right: 10px;

	padding-top: 4px

}



.notice-text {

	line-height: 1;

	color: #fff;

	font-size: 11px

}



@media only screen and (max-width: 540px) {

	.notice-text {

		font-size: 11px

	}

}



.social-media-icons a {

	display: inline-block;

	width: 35px;

	height: 35px;

	border-radius: 50%;

	border: 1px solid #333;

	color: #fff;

	font-size: 13px;

	line-height: 35px;

	text-align: center;

	margin-right: 5px;

	background: transparent;

	transition: .3s all ease

}



.social-media-icons a:hover {

	background: #52b62e;

	border: 1px solid #52b62e

}



.fab {

	font-family: sofia-pro, sans-serif !important

}



.social-media-icons .fab {

	font-family: "Font Awesome 5 Brands" !important

}



.success_message {

	color: #fff;

	opacity: 0.5;

	margin-top: 20px;

	font-size: 13px;

	line-height: 1.6

}

@media screen and (min-width: 993px) and (max-width: 1200px){
	.wrapper-menu{
		padding: 27px 30px 20px;
	}
}

@media screen and (max-width: 1220px){
	.text-section{
		padding: 25px 2%;
	}
	.text-section .text-line-2{
		font-size: 26px !important;
	}
}

@media screen and (max-width: 1024px){
	.text-section{
		padding: 25px 2%;
	}
	.text-section .text-line-2{
		font-size: 23px !important;
	}
}

@media screen and (max-width: 991px){
	.text-section{
		padding: 25px 2%;
	}
	.text-section .text-line-2{
		font-size: 19px !important;
	}
}

@media screen and (max-width: 767px){
	.text-section{
		padding: 25px 2%;
	}
	.text-section .text-line-2{
		font-size: 16px !important;
	}
}

@media screen and (max-width: 640px){
	.text-section{
		padding: 25px 2%;
	}
	.text-section .text-line-2{
		font-size: 14px !important;
	}
}

@media screen and (max-width: 558px){
	.text-section{
		padding: 25px 1%;
	}
	.text-section .text-line-2{
		font-size: 13px !important;
	}
	.text-section h4{
		font-size: 30px !important;
	}
}

@media screen and (max-width: 503px){
	.text-section{
		padding: 25px 1%;
	}
	.text-section .text-line-2{
		font-size: 9px !important;
	}
	.text-section h4{
		font-size: 24px !important;
	}
}