/*Root*/

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');


/*----- 1. Reset.css -----*/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}


/* --- Common Styles ---*/

h1, h2, h3, h4, h5, h6 {
	font-family: 'Nunito' !important;
}

p, del {
	font-family: 'Open Sans' !important;
}

/*----- Helper Classes -----*/

html * {
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

strong, b {
	font-weight: bold;
}


/*Root*/


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.media-content.banner {
	margin-top: 100px;
}


.select2-container--default .select2-selection--single:active, .select2-container--default .select2-selection--single:hover, .select2-container--default .select2-selection--single:visited, .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus-within {
	outline: 0;
	border: none;
}

/*Footer*/
.cid-qzsTCnMCy7 a {
	margin-bottom: 3px;
	display: inline-block;
}

/*Footer*/

.brand-footer {
	position: absolute;
	top: 40px;
	right: 0;
}

.brand-footer-2 {
	position: absolute;
	bottom: 0;
}

.brand-footer-2 a {
	font-size: 16px;
}

.brand-footer a{
	font-size: 13px;
}

.select2 {
	text-align: center;
	-webkit-appearance: none;
	background: #FFF;
	height: calc(2.25rem + 2px);
	border: 1px solid #e8e8e8;
	box-shadow: none;
	color: #565656;
	font-family: 'Rubik', sans-serif;
	font-size: 1rem;
	line-height: 1.43;
	min-height: 3.5em;
	padding: 1.07em .5em;
	display: block;
	width: 100%;
	border-radius: .25rem;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.select2-container--default .select2-selection--single {
	background-color: #fff;
	border: none;
	margin-top: -4px;
	background: #FFF url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;

}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none;
}

button.owl-dot:active, button.owl-dot:focus, button.owl-dot:focus-within, button.owl-dot:hover, button.owl-dot:visited {
	outline: 0;
	border: none;
}

.sweet-alert p {
	display: block !important;
}

.product_image_gallery {
	cursor: pointer;
}

.cid-qzsEQa9h36 h1 {
	font-family: 'Rubik', sans-serif;
	font-size: 3rem;
	font-style: normal;
	line-height: 1.2;
	font-weight: 300;
}

.cid-qzsEQa9h36 h2, h3, h4, h5, h6 {
	font-family: 'Rubik', sans-serif;
	font-style: normal;
	line-height: 1.2;
	font-weight: 300;
}

.cid-qzsEQa9h36 p {
	font-weight: 300;
}

.banner_pname {
	letter-spacing: 10px;
	display: block;
	margin-top: -14px;
	margin-bottom: -2px;
	font-size: 3rem;
}

.buy_button {
	padding: 16px 48px;
}

#send_payment {
	cursor: pointer;
}

.fancybox-can-zoomIn .fancybox-content {
	background: #ffffff !important;
}

#payment_result input {
	text-align: center;
}

.navbar-toggler {
	display: none !important;
}

.hamburger {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	z-index: 9999999999; /* Sit on top */
	display: none;
}

.hamburger.in-menu {
	top: 20px;
	right: 23px;
}

.overlay, .mobile-nav {
	display: none;
}

.btn-amount {
	margin: 0 !important;
	height: 58.22px;
	background: #ffffff !important;
}

.btn-amount:hover, .btn-amount:active, .btn-amount:focus, .btn-amount:focus-within, .btn-amount:visited {
	outline: 0;
	box-shadow: none;

}


.btn-amount-left {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.btn-amount-right {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}



.footer-logo-item {
	width: calc(20% - 10px);
	margin-right: 10px;
	float:left;
	text-align: center;
}


.footer-logo-item img {
	max-height: 20px;
}

.payment-logo{
	position:absolute;
	right:-10px;
}

.owl-carousel .owl-item img {
	display: block;
	width: 100% !important;
	height: auto !important;
}


@media ( min-width: 0) and (max-width: 997px) {

	.owl-carousel .owl-item img {
		width: auto !important;
	}


	.brand-footer-2 {
		position: relative;
	}

	.payment-logo{
		position: relative;
		padding-bottom: 40px;
		margin-top:20px;
		margin-left: -20px;
	}

	.brand-footer a {
		font-size: 16px;
	}


	.header3 img {
		height: 257px;
		width: auto;
		margin: auto;
	}

	.hamburger {
		display: block;
	}

	.overlay {
		/* Height & width depends on how you want to reveal the overlay (see JS below) */
		height: 100%;
		width: 100%;
		display: none;
		position: fixed; /* Stay in place */
		z-index: 99999; /* Sit on top */
		left: 0;
		top: 0;
		background-color: rgb(0, 0, 0); /* Black fallback color */
		background-color: rgba(0, 0, 0, 0.7); /* Black w/opacity */
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	}

	/* Position the content inside the overlay */
	.overlay-content {
		position: relative;
		top: 25%; /* 25% from the top */
		width: 100%; /* 100% width */
		text-align: center; /* Centered text/links */
		margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
	}

	/* The navigation links inside the overlay */
	.overlay a {
		padding: 8px;
		text-decoration: none;
		font-size: 36px;
		color: #818181;
		display: block; /* Display block instead of inline */
		transition: 0.3s; /* Transition effects on hover (color) */
	}

	/* When you mouse over the navigation links, change their color */
	.overlay a:hover, .overlay a:focus {
		color: #f1f1f1;
	}

	/* Position the close button (top right corner) */
	.overlay .closebtn {
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}


	.overlay-middle {
		/* Height & width depends on how you want to reveal the overlay (see JS below) */
		height: 100%;
		width: 70%;
		display: none;
		position: fixed; /* Stay in place */
		z-index: 99999; /* Sit on top */
		right: 0;
		top: 0;
		background-color: rgb(255, 255, 255); /* Black fallback color */
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	}

	/* Position the content inside the overlay */
	.overlay-middle-content {
		position: relative;
		top: 25%; /* 25% from the top */
		width: 100%; /* 100% width */
		text-align: center; /* Centered text/links */
		margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
	}

	/* The navigation links inside the overlay */
	.overlay-middle a {
		padding: 8px;
		text-decoration: none;
		font-size: 36px;
		color: #818181;
		display: block; /* Display block instead of inline */
		transition: 0.3s; /* Transition effects on hover (color) */
	}

	/* When you mouse over the navigation links, change their color */
	.overlay-middle a:hover, .overlay-middle a:focus {
		color: #f1f1f1;
	}

	/* Position the close button (top right corner) */
	.overlay-middle .closebtn {
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}

	/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
	@media screen and (max-height: 450px) {
		.overlay a {
			font-size: 20px
		}

		.overlay .closebtn {
			font-size: 40px;
			top: 15px;
			right: 35px;
		}
	}

	.mobile-nav .dropdown-menu a {
		float: left;
	}

	.mobile-nav .dropdown {
		background: #ffffff;
	}

	.mobile-nav {
		padding-left: 30px;
		padding-top: 50px;
		/* Height & width depends on how you want to reveal the overlay (see JS below) */
		height: 100%;
		overflow: hidden;
		width: 70%;
		float: right;
		display: none;
		position: fixed; /* Stay in place */
		z-index: 999999; /* Sit on top */
		right: 0;
		top: 0;
		background-color: rgba(255, 255, 255, 1); /* Black w/opacity */
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: all 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	}

	.mobile-nav a {
		display: inline-block !important;
		margin-bottom: 10px !important;
		font-size: 24px !important;
	}

	/* Position the content inside the overlay */
	.mobile-nav-content {
		position: relative;
		top: 25%; /* 25% from the top */
		width: 100%; /* 100% width */
		text-align: center; /* Centered text/links */
		margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
	}

	/* The navigation links inside the overlay */
	.mobile-nav a {
		padding: 8px;
		text-decoration: none;
		font-size: 24x;
		color: #818181;
		display: block; /* Display block instead of inline */
		transition: 0.3s; /* Transition effects on hover (color) */
	}

	/* When you mouse over the navigation links, change their color */
	.mobile-nav a:hover, .mobile-nav a:focus {
		color: #f1f1f1;
	}

	/* Position the close button (top right corner) */
	.mobile-nav .closebtn {
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}

	/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
	@media screen and (max-height: 450px) {
		.overlay a {
			font-size: 20px
		}

		.overlay .closebtn {
			font-size: 40px;
			top: 15px;
			right: 35px;
		}
	}

	.brand-footer {
		position: relative !important;
		top: unset;
		right: unset;
		bottom: 13px;
	}

	.product_image_gallery img {
		max-height: 300px !important;
		width: auto !important;
		margin: auto;
	}

	#progress-bars3-z img {
		width: 100% !important;
		height: auto !important;
	}

	#page_content img {
		width: 100% !important;
		height: auto !important;
		margin: auto;
	}

	#page_content p {
		font-size: 14px;
	}

	.media-content.banner {
		margin-top: 0;
	}


	.cid-qzrzV4rhXd .navbar {
		height: auto;
	}

}