/* 
Order -> base -> typography -> general layout -> grid -> page layout -> components

Responsive Breakpoints
0 - 600px: Phone screens
600px - 900px: tablet portrait
900px - 1200px: tablet landscape
[1200px - 1800px] normal code written
1800px ++: big desktop
*/
/* 
breakpoint choices
--phone
--tab-port
--tab-land
--big-screen
 */
 @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
:root {
	--color-main: #007db8;
	--color-secondary: #e42022;
	--color-tertairy: #161614;
	--search-butt-hov: #007eb8bd;
	--color-light-1: #fff;
	--color-light-2: #f1f1f1;
	--color-light-3: #eeeeee;
	--color-light-4: #dad6d6a1;
	--color-dark-1: #000;
	--color-dark-2: rgb(150, 148, 148);
	--color-dark-3: #2d3436;
	--color-danger: #f32013;
	--color-success: #8de02c;
	--color-pending: #f3ca3f;
	--color-active: #1795ce;
	--color-approved: #ee82ee;
	--gradient-color: linear-gradient(
		to right bottom,
		var(--color-secondary),
		var(--color-main)
	);
	--gradient-color-reverse: linear-gradient(
		to right bottom,
		var(--color-main),
		var(--color-secondary)
	);
	/* ************************************************************************************* */
	/* Headings */
	--heading-font-size: 4.5rem;
	--heading-font-size-ms-ml: 3rem;
	--heading-font-weigth: 700;
	--heading-font-family: Georgia, sans-serif, serif;
	--heading-font-transform: uppercase;
	--heading-font-spacing: 0.2rem;
	/* Subheadings */
	--subheading-font-size: 3.5rem;
	--subheading-font-size-ms-ml: 1.8rem;
	--subheading-font-weigth: 600;
	--subheading-font-family: Verdana, "Times New Roman", Times;
	--subheading-font-transform: capitalize;
	--subheading-font-spacing: 0.1rem;
	/* Body */
	--body-font-size: 1.9rem;
	--body-font-weigth: 500;
	--body-font-family: Tahoma, Arial, Helvetica;
	--body-font-transform: none;
	--body-font-spacing: 0rem;
	--body-font-color: var(--color-tertairy);

	/* Small */
	--small-font-size: 1.6rem;
	--small-font-weigth: 400;
	/* ************************************************************************************* */
	/* Buttomn Colors */
	--button-text-color-light: var(--color-light-1);
	--button-text-color-dark: var(--color-tertairy);
	--button-background-heading: var(--color-tertairy);
	--button-background-secondary: var(--color-secondary);
	--button-background-white: var(--color-light-2);
	--button-text-shadow-light: 0 0 3rem var(--color-dark-2);
	--button-text-shadow-dark: 2px 2px 0 var(--color-light-1);
	/* Box shadow */
	--boxsh: 0 2rem 6rem rgba(var(--color-dark-2-1), 0.3);
	--box-shadow: 0 0.7rem 2.5rem rgba($color: #000, $alpha: 0.08);
	--border: 1px solid var(--border-color: );
	--form-text-color: #555353;
	/* Text shadows */
	--heading-shadow: -2.5px 2.5px #fff;
	--subheading-shadow: -2.5px 2.5px var(--color-secondary);
}
/*  Animations */
/* ***************************************************************************************************************** */
/* Header Modal Animations */
@keyframes modalopen {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes pulsate {
	0% {
		transform: scale(1);
		box-shadow: none;
	}
	50% {
		transform: scale(1.05);
		box-shadow: var(--boxsh);
	}
	100% {
		transform: scale(1);
		box-shadow: none;
	}
}
/* ***************************************************************************************************************** */
/* Resets */
*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
	-webkit-box-sizing: border-box !important;
	   -moz-box-sizing: border-box !important;
	        box-sizing: border-box !important;

}
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	font-family: var(--body-font-family);
	/* Track */
	/* Handle */
}
head {
	cursor: default;
}
body {
	box-sizing: border-box;
	line-height: 1.6;
	color: var(--text-color-dark);
	cursor: default;
}
a:focus,
a:active,
button:active,
button:focus {
	outline: none;
	text-decoration: none;
}
::selection {
	background-color: var(--color-main);
	color: var(--color-light-1);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
}
[data-title]:hover:after {
	opacity: 1;
	transition: all 0.1s ease 0.5s;
	visibility: visible;
}
[data-title]:after {
	content: attr(data-title);
	position: absolute;
	bottom: -1em;
	font-size: var(--small-font-size);
	left: 70%;
	border-style: dashed double none;
	padding: 4px 4px 4px 8px;
	color: var(--color-light-1);
	white-space: nowrap;
	border-radius: 8px;
	box-shadow: 0px 0px 4px #666;
	background-color: var(--color-main);
	opacity: 0;
	z-index: 99999;
	visibility: hidden;
}
[data-title] {
	position: relative;
}
/* ***************************************************************************************************************** */
/* Custom Scroll Bar */
html:hover {
	cursor: pointer;
}
html::before,
html::after {
	cursor: default;
}
html:active {
	cursor: grabbing;
}
html::-webkit-scrollbar {
	width: 1rem;
}
html::-webkit-scrollbar-track {
	box-shadow: inset 1px 1px 10px var(--color-main);
	border-radius: 1rem;
}
html::-webkit-scrollbar-track:hover {
	box-shadow: inset 1px 1px 10px var(--color-secondary);
}
html::-webkit-scrollbar-thumb {
	background-image: var(--gradient-color);
	border-radius: 1rem;
}
html::-webkit-scrollbar-thumb:hover {
	background-image: var(--gradient-color-reverse);
}
/* ***************************************************************************************************************** */
/* Texts */
.heading-text {
	text-transform: var(--heading-font-transform);
	font-size: var(--heading-font-size);
	font-weight: var(--heading-font-weigth);
	font-family: var(--heading-font-family);
	letter-spacing: var(--heading-font-spacing);
	margin: 1rem;
	text-shadow: var(--heading-shadow);
	transition: all 0.2s;
	background-image: var(--gradient-color);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: 0.2rem;
}
.heading-text--center-auto {
	text-align: center;
	margin: auto;
}
.heading-text--center-auto:hover {
	transform: skewY(2deg) skewX(15deg) scale(1.1);
	text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2);
}
.subheading-text {
	text-transform: var(--subheading-font-transform);
	font-size: var(--subheading-font-size);
	font-weight: var(--subheading-font-weigth);
	font-family: var(--subheading-font-family);
	color: var(--subheading-font-color);
	letter-spacing: var(--subheading-font-spacing);
}
.body-text {
	text-transform: var(--body-font-transform);
	font-size: var(--body-font-size);
	font-weight: var(--body-font-weigth);
	font-family: var(--body-font-family);
	color: var(--body-font-color);
	letter-spacing: var(--body-font-spacing);
}
.small-text {
	text-transform: var(--body-font-transform);
	font-size: var(--small-font-size);
	font-weight: var(--small-font-weigth);
	font-family: var(--body-font-family);
	color: var(--body-font-color);
	letter-spacing: var(--body-letter-spacing);
}
.u-margin-bottom-med {
	margin-bottom: 5rem !important;
}
.float-right {
	float: right;
}
/* Modal Buttons */
.cta__btn-max {
	position: relative;
	background-color: var(--color-light-1);
	text-shadow: var(--button-text-shadow-light);
	border: 0;
	margin: 0.2rem;
	width: 90%;
	height: 5rem;
}
.cta__btn-max:before,
.cta__btn-max:after {
	content: "";
	position: absolute;
	inset: 0;
	transition: 0.5s;
	background: var(--color-main);
}
.cta__btn-max:nth-child(1):before,
.cta__btn-max:nth-child(1):after {
	background: linear-gradient(
		45deg,
		var(--color-main),
		var(--color-tertairy),
		var(--color-tertairy),
		var(--color-secondary)
	);
}
.cta__btn-max:hover:before {
	inset: -3px;
}
.cta__btn-max:hover:after {
	inset: -3px;
	filter: blur(1.6rem);
}
.cta__btn-max--text {
	cursor: pointer;
	position: absolute;
	color: var(--color-light-1);
	width: 100%;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--color-tertairy);
	z-index: 10;
	display: flex;
	justify-content: space-around;
	align-content: center;
	align-items: center;
	font-size: 1.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	border: 1px solid var(--color-dark-2);
	overflow: hidden;
}
.cta__btn-max--text::before {
	content: "";
	position: absolute;
	top: 0;
	left: -50%;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.2);
	transform: skew(25deg);
}
.cta__btn {
	position: relative;
	background-color: var(--color-light-1);
	text-shadow: var(--button-text-shadow-light);
	border: 0;
	margin: 0.2rem;
	width: 14rem;
	height: 4rem;
}
.cta__btn:before,
.cta__btn:after {
	content: "";
	position: absolute;
	inset: 0;
	transition: 0.5s;
	background: var(--color-main);
}
.cta__btn:nth-child(1):before,
.cta__btn:nth-child(1):after {
	background: linear-gradient(
		45deg,
		var(--color-main),
		var(--color-main),
		var(--color-main),
		var(--color-secondary)
	);
}
.cta__btn:hover:before {
	inset: -3px;
}
.cta__btn:hover:after {
	inset: -3px;
	filter: blur(1.6rem);
}
.cta__btn--text {
	cursor: pointer;
	position: absolute;
	color: var(--color-light-1);
	width: 100%;
	top: 0;
	left: 0;
	display: inline-block;
	height: 100%;
	background: var(--color-tertairy);
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	border: 1px solid var(--color-dark-2);
	overflow: hidden;
}
.cta__btn--text::before {
	content: "";
	position: absolute;
	top: 0;
	left: -50%;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.4);
	transform: skew(25deg);
}
.close-btn {
	background: transparent;
	font-size: 2.5rem;
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	border-radius: 0.5rem;
	color: var(--color-light-1);
	cursor: pointer;
	padding: 0.8rem 1.2rem;
}
button:focus {
	outline: none;
}
/* ******************************************************************************************************* */
/* Cards buttons */
.bttn,
.bttn:link,
.bttn:visited {
	text-transform: uppercase;
	text-decoration: none;
	padding: 1.2rem 1.5rem;
	display: inline-block;
	border-radius: 10rem;
	transition: all 0.2s;
	position: relative;
	font-size: var(--small-font-size);
	min-width: 12rem;
	min-height: 4rem;
	font-weight: var(--subheading-font-weigth);
	text-align: center;
	border: none;
	cursor: pointer;
}
.bttn__min {
	padding: 1rem 3rem !important;
	display: inline !important;
}
.bttn:hover {
	transform: translateY(-0.3rem);
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
.bttn:hover::after {
	transform: scaleX(1.4) scaleY(1.6);
	opacity: 0;
}
.bttn:active,
.bttn:focus {
	outline: none;
	transform: translateY(-0.1rem);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.bttn--white {
	color: var(--color-main);
	background-color: var(--color-light-1);
}
.bttn--white::after {
	background-color: var(--color-light-1);
}
.bttn--green {
	color: var(--color-light-1);
	background-color: var(--color-success);
}
.bttn--green::after {
	background-color: var(--color-success);
}
.bttn--blue {
	color: var(--color-light-1);
	background-color: var(--color-active);
}
.bttn--blue::after {
	background-color: var(--color-active);
}
.bttn--gradiant {
	color: var(--color-light-1);
	background-image: var(--gradient-color);
}
.bttn--gradiant::after {
	background-image: var(--gradient-color-reverse);
}
.bttn--red {
	color: var(--color-light-1);
	background-color: var(--color-danger);
}
.bttn--red::after {
	background-color: var(--color-danger);
}
.bttn::after {
	content: "";
	height: 100%;
	width: 90%;
	display: inline-block;
	border-radius: 10rem;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transition: all 0.4s;
}
.cta {
	text-align: center;
}
.cta__book-now {
	font-size: 2rem;
	font-weight: 300;
	text-transform: uppercase;
	margin-bottom: 2.5rem;
}
.alert-container {
	display: flex;
	justify-content: center;
	align-content: center;
	margin-bottom: 10px;
	margin-top: 5px;
  }
  
  .alert {
	transition: 0.5s ease-in-out;
	padding: 1.5rem;
	font-size: 1.8rem;
	font-weight: 600;
	text-shadow: 2px 2px 4px var(--color-dark-1);
	width: 80%;
	background-color: var(--color-danger);
	color: var(--color-light-1);
  }
  
  .alert-two {
	transition: 0.5s ease-in-out;
	font-size: 1.8rem;
	font-weight: 600;
	padding: 1.5rem;
	text-shadow: 2px 2px 4px var(--color-dark-1);
	width: 80%;
	background-color: var(--color-success);
	color: var(--color-light-1);
  }
  
  .closebtn {
	margin-left: 15px;
	color: white;
	font-weight: bold;
	float: right;
	font-size: 22px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
  }
  
  .closebtn:hover {
	color: var(--color-danger);
  }
.col-1-of-3 {
	padding: 2rem;
}
.card {
	-moz-perspective: 150rem;
	perspective: 150rem;
	position: relative;
	height: 53rem;
}
.card__icon {
	height: 1.4rem;
	width: 1.4rem;
	fill: var(--color-secondary);
	margin-right: 0.5rem;
}
.card__list {
	font-size: var(--body-text);
}
.card__side {
	height: 53rem;
	transition: all 0.8s ease;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	width: 100%;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.15);
}
.card__side--front {
	background-color: var(--color-light-1);
}
.card__side--back {
	transform: rotateY(180deg);
}
.card__side--back--1 {
	background-image: var(--gradient-color);
}
.card:hover .card__side--front {
	transform: rotateY(-180deg);
}
.card:hover .card__side--back {
	transform: rotateY(0);
}
.card__picture {
	background-size: cover;
	height: 22rem;
	padding: 1rem;
	background-blend-mode: color;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border: 3px solid var(--color-main);
}
.card__picture img {
	width: 100%;
	height: 100%;
}
.card__details {
	padding: 1.5rem;
}
.card__details ul {
	list-style: none;
	width: 80%;
	margin: 0 auto;
}
.card__details ul li {
	text-align: center;
	font-size: 1.4rem;
	padding: 0.5rem;
}
.card__details ul li:first-child {
	font-size: 1.5rem;
	font-weight: 600;
	min-height: 5rem;
	text-transform: capitalize;
}
.card__details ul li:not(:last-child) {
	border-bottom: 1px solid var(--border-color);
}
.card__hover-indication {
	background-size: cover;
	background-repeat: no-repeat;
	float: right;
	height: 8.5rem;
	width: 8.5rem;
	position: relative;
	backface-visibility: hidden;
	background-image: url(../../img/svg/star1.svg);
	background-size: cover;
	filter: invert(30%);
}
@supports (-webkit-mask-image: url()) or (mask-image: url()) {
	.card__hover-indication {
		-webkit-mask-image: url(../../img/svg/star1.svg);
		mask-image: url(../../img/svg/star1.svg);
		-webkit-mask-size: cover;
		mask-size: cover;
		background-image: var(--gradient-color);
		filter: none;
	}
}
.card__hover-indication::after::after {
	content: "";
	clear: both;
	display: table;
}
.card__hover-indication p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	text-shadow: 0 5px 1rem rgba(0, 0, 0, 0.15);
	color: var(--color-main);
}
@supports (-webkit-mask-image: url()) or (mask-image: url()) {
	.card__hover-indication p {
		color: var(--color-light-1);
	}
}
.card__cta {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	text-align: center;
}

.advert {
  height: 100px;
  width:100%;
  display: flex;
  align-items: center;
  background-image: var(--gradient-color-3);
  justify-content: center;
  border-top-left-radius: 3.7rem;
  border-bottom-right-radius: 3.7rem;
}

@media only screen and (max-width: 56.25em) {
  .advert {
  height: 100px;
  width:100%;
  display: flex;
  align-items: center;
 
}
}

.card__use-case {
	text-align: center;
	color: var(--color-light-1);
	margin-bottom: 8rem;
}
.card__use-case-heading {
	font-size: 1.4rem;
	text-transform: uppercase;
}
.card__use-case-text {
	font-size: 4rem;
	font-weight: 100;
	text-transform: uppercase;
}
.dropdown {
	position: relative;
	margin: 0 1rem;
}
.dropdown__icon {
	height: 2rem;
	width: 2rem;
}
.dropbtn {
	font-weight: 600;
	top: -2.1rem;
	left: -8.4rem;
	transition: all 0.5s ease;
}
.dropbtn__user-img {
	margin-right: 1rem;
	width: 3.5rem;
	border-radius: 50%;
}
.dropbtn:hover {
	color: var(--color-main);
	text-shadow: 0px 0px 4px var(--color-light-1);
}
.dropbtn__user-img {
	cursor: default;
}
.dropdown-content {
	display: none;
	position: absolute;
	right: -4.4rem;
	top: 92%;
	background-color: var(--color-light-1);
	color: #1e1e1e;
	min-width: 26rem;
	overflow: visible;
	box-shadow: 0px 8px 16px 0px #1e1e1e;
	z-index: 101;
	border-radius: 8px;
}
.dropdown-content::selection {
	background-color: var(--color-main);
	color: var(--color-light-1);
}
.dropdown-content a {
	color: var(--top-button);
	padding: 0.5rem 0.5rem;
	text-decoration: none;
	display: block;
}
.dropdown a:hover {
	background-color: #f3f3f3;
	border-radius: 8px;
	color: #333;
}
.show {
	display: block;
	max-height: 32rem;
	overflow-y: auto;
	overflow-x: auto;
	cursor: grab;
	/* Track */
	/* Handle */
}
.show:active {
	cursor: grabbing;
}
.show::-webkit-scrollbar {
	width: 1rem;
}
.show::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px var(--color-main);
	border-radius: 1rem;
}
.show::-webkit-scrollbar-thumb {
	background: var(--color-secondary);
	background-image: linear-gradient(
		to left bottom,
		var(--color-main),
		var(--color-secondary)
	);
	border-radius: 1rem;
}
.show::-webkit-scrollbar-thumb:hover {
	background: var(--color-secondary);
	background-image: linear-gradient(
		to left bottom,
		var(--color-secondary),
		var(--color-main)
	);
}
.show a {
	display: flex;
	flex-direction: column;
	text-align: center;
}
.comment-info {
	display: flex;
	justify-content: stretch;
	align-content: center;
}
.author-img {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	margin-right: 1rem;
}
.composition {
	position: relative;
}
.composition__photo {
	width: 70%;
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
	border-radius: 2px;
	position: absolute;
	z-index: 6;
	background-color: var(--color-light-1);
	transition: all 0.2s;
	outline-offset: 0.5rem;
}
.composition__photo--p1 {
	top: 50%;
	left: 50%;
	transform: translate(0%, 50%);
	z-index: 9;
	/* height: 5rem;
            width: 5rem; */
	transition-timing-function: ease-in-out;
	transition: all 0.5s;
}
.composition__photo--p2 {
	right: 26%;
	top: 0.5rem;
	z-index: 8;
	transition-timing-function: ease-in-out;
	transition: all 0.5s;
}
.composition__photo--p3 {
	right: 20%;
	top: 15rem;
	z-index: 7;
	transition-timing-function: ease-in-out;
	transition: all 0.5s;
}
.composition__photo:hover {
	box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.4);
	z-index: 20;
}
.composition__photo--p1:hover {
	    outline: 0.5rem solid var(--color-secondary);
	}
	.composition__photo--p2:hover {
	    outline: 0.5rem solid var(--color-main);
	}
	.composition__photo--p3:hover {
	    outline: 0.5rem solid var(--color-main);
	}
.user-info {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 1rem;
}
input[type="checkbox"] {
	cursor: pointer !important;
	position: relative;
	width: 8.5rem;
	height: 4.5rem;
	-webkit-appearance: none;
	background: #c6c6c6;
	outline: none;
	border-radius: 55rem;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	transition: 0.5s;
}
input:checked[type="checkbox"] {
	background: var(--color-main);
}
input[type="checkbox"]:before {
	content: "";
	position: absolute;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 2.3rem;
	top: 0;
	left: 0;
	background-size: cover;
	background-image: linear-gradient(
			to right bottom,
			var(--color-main),
			var(--color-main)
		),
		url(../../img/svg/spinner6.svg);
	transform: scale(1.1);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	transition: 0.5s;
}
input:checked[type="checkbox"]:before {
	left: 4.5rem;
}
.form__group:not(:last-child) {
	margin-bottom: 1rem;
}
.form__input {
	padding: 1rem 2rem;
	font-family: inherit;
	color: inherit;
	border-radius: 2px;
	background-color: rgba(0, 0, 0, 0.2);
	border: none;
	border-bottom: 3px solid transparent;
	width: 40%;
	display: block;
	transition: all 0.3s;
}

.form__input:focus {
	outline: none;
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
	border-bottom: 3px solid var(--color-main);
}
.form__input:focus:valid {
	border-bottom: 3px solid var(--color-success);
}
.form__input::-webkit-input-placeholder {
	color: #555353;
}
.form__textarea {
	height: 20rem;
}
.form__label {
	font-size: 1.2rem;
	margin-left: 2rem;
	font-weight: 700;
	color: var(--subheading-font-color);
	margin-top: 0.7rem;
	display: block;
	transition: all 0.5s;
}
.form__input:placeholder-shown + .form__label {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4rem);
}
.form__radio-group {
	width: 49%;
	display: inline-block;
}
.form__radio-input {
	display: none;
}
.form__radio-label {
	cursor: pointer;
	position: relative;
	padding-left: 5rem;
}
.form__radio-button {
	height: 3rem;
	width: 3rem;
	border: 5px solid var(--color-secondary);
	border-radius: 50%;
	display: inline-block;
	position: absolute;
	top: -0.6rem;
	left: 0;
}
.form__radio-button::after {
	content: "";
	display: block;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--color-secondary);
	opacity: 0;
	transition: opacity 0.2s;
}
.form__radio-input:checked ~ .form__radio-label .form__radio-button:after {
	opacity: 1;
}
input[type="submit"] {
	background-color: var(--color-light-1);
	border: 0;
	border-radius: 5px;
	box-shadow: 0px 0px 5px var(--color-dark-1);
	color: var(--color-dark-1);
	font-weight: bolder;
	cursor: pointer;
	padding: 0.8rem 1.2rem;
}
input[type="submit"]:hover {
	text-shadow: 0 0 4px var(--color-dark-1);
	transition: 0.5s ease-in-out;
}
input[type="button"] {
	background-color: var(--color-light-1);
	border: 0;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #d85757;
	color: #d85757;
	font-weight: bolder;
	cursor: pointer;
	padding: 0.8rem 1.2rem;
}
input[type="button"]:hover {
	text-shadow: 0 0 4px #d85757;
	transition: 0.5s ease-in-out;
}
.modal-container {
	background-color: rgba(0, 0, 0, 0.6);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	text-align: initial;
}
.modal-container.show-modal {
	display: block;
}
.modal {
	background-color: var(--color-light-1);
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	width: 40rem;
	animation-name: modalopen;
	animation-duration: 1s;
}
.modal__header {
	background-image: var(--gradient-color);
	color: var(--color-light-1);
	padding: 15px;
}
.modal__header h3 {
	font-size: 1.7rem;
	margin: 0;
}
.modal__content {
	padding: 1rem 1rem;
}
.modal__content--invite {
	font-size: 1.5rem;
	margin-top: 1rem;
	color: #333;
	text-align: center;
}
.modal__content--legal-remember {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	color: #333;
	font-size: 1.5rem;
}
.modal__form div {
	margin: 0.8rem 0;
}
.modal__form label {
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
}
.modal__form .remember {
	cursor: pointer;
	font-size: 2rem;
	margin-left: 1rem;
	font-weight: 900;
}
.modal__form .form-input {
	border: none;
	box-shadow: 0 0 3px #333;
	padding: 0.8rem;
	width: 100%;
}
.modal__form .form-input:focus {
	border: none;
	box-shadow: 0 0 10px #333;
}
form > span {
	color: var(--color-danger);
	font-size: 1.2rem;
	display: block;
	text-align: center;
}
.modalX:before {
	content: "x";
	font-weight: bolder;
	text-decoration: none;
}
#username {
	padding-left: 4rem;
	border: 1px solid #2196f3;
	outline: none !important;
}
#uname {
	padding-left: 4rem;
	border: 1px solid #2196f3;
	outline: none !important;
}
#password {
	padding-left: 4rem;
	border: 1px solid #2196f3;
	outline: none !important;
}
#pass {
	padding-left: 4rem;
	border: 1px solid #2196f3;
	outline: none !important;
}
#password2 {
	padding-left: 4rem;
	border: 1px solid #2196f3;
	outline: none !important;
}
#email {
	padding-left: 4rem;
	border: 1px solid #2196f3;
	outline: none !important;
}
.username-input {
	position: relative;
}
.username-input.success input {
	box-shadow: 0 0 0.6rem var(--color-success) !important;
}
.username-input.error > input {
	box-shadow: 0 0 0.6rem var(--color-danger);
}
.username-input small {
	visibility: hidden;
	display: block;
	font-size: 1.2rem;
}
.username-input.error small {
	visibility: visible;
	color: var(--color-danger);
}
.username-input.success small {
	visibility: visible;
	color: var(--color-success);
}
.username-input__user {
	position: absolute;
	left: 0;
	top: 0px;
	height: 3.3rem;
	width: 3.5rem;
	fill: var(--color-main);
	padding: 0.9rem 0.8rem;
	background-color: var(--color-light-4);
}
.username-input svg.icon-eye {
	position: absolute;
	left: 89%;
	fill: var(--color-main);
	top: 0px !important;
	width: 3.3rem;
	height: 3.29999999999rem;
	padding: 0.2rem;
	cursor: pointer;
	transition: all 0.5s ease;
}
.username-input svg.icon-eye:hover {
	fill: var(--color-main);
}
.username-input svg.icon-eye-slash {
	position: absolute;
	left: 89%;
	fill: var(--color-main);
	top: 0px !important;
	width: 3.3rem;
	height: 3.3rem;
	padding: 0.3rem;
	cursor: pointer;
}
.username-input svg.icon-eye-slash:hover {
	fill: var(--color-secondary);
}
.username-input > input:focus + .username-input__user {
	background-color: var(--color-main);
	fill: var(--color-light-4);
}
.popup {
	height: 100vh;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	background-color: rgba(0, 0, 0, 0.7);
	/*  @supports(-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)){
        -webkit-backdrop-filter: blur(20px);
        -moz-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        background-color:none ;
    }
 */
}
.popup:target {
	opacity: 1;
	visibility: visible;
}
.popup__content {
	max-width: 75%;
	width: 75%;
	background-color: var(--color-light-1);
	box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	display: table;
	height: 50rem;
	opacity: 0;
	transition: all 0.5s 0.2s;
	transform: translate(-50%, -50%) scale(0);
}
.popup__left {
	padding: 1rem;
	width: 85%;
}
.popup__right {
	width: 66.666666666666%;
	display: table-cell;
	padding: 3rem 2rem;
}
.popup__img {
	display: block;
	width: 100%;
}
.popup__text {
	font-size: 1.5rem;
	margin-bottom: 5rem;
	-moz-column-count: 2;
	-moz-column-gap: 4rem;
	-moz-column-rule: 1px solid var(--color-light-2);
	column-count: 2;
	column-gap: 4rem;
	column-rule: 1px solid var(--color-light-2);
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
.popup:target .popup__content {
	opacity: 1;
	padding: 4rem 3rem;
	transform: translate(-50%, -50%) scale(1);
}
.popup__close:link,
.popup__close:visited {
	color: var(--color-light-2);
	text-align: center;
	padding: 0.5rem 0.75rem;
	border-radius: 45%;
	text-decoration: none;
	position: absolute;
	top: 2.5rem;
	right: 2.5rem;
	z-index: 22;
	font-size: 3rem;
	display: inline-block;
	transition: all 0.2s;
	line-height: 1;
	background-color: rgba(22, 22, 20, 0.5);
	transition: all 0.5s;
}
.popup__close:hover {
	color: var(--color-danger);
	background-color: var(--color-light-2);
}
/* Ajax Search Results  */
#search-layer {
	position: fixed;
	transition: all 0.3s;
	z-index: 34;
	left: 0px;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.9);
}
@supports (-webkit-backdrop-filter: blur()) or (backdrop-filter: blur()) {
	#search-layer {
		-webkit-backdrop-filter: blur(1rem);
		-moz-backdrop-filter: blur(1rem);
		backdrop-filter: blur(1rem);
	}
}
/***********************************/
#livesearch {
	position: absolute;
	background: #595a5a;
	max-height: 20rem;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 35;
	width: 88.5%;
	left: 4.5%;
	box-shadow: 0px 2px 4px #444;
	margin-left: 1.2%;
	border-radius: 8px;
	cursor: grab;
	/* Track */
}
#livesearch:active {
	cursor: grabbing;
}
#livesearch::-webkit-scrollbar {
	width: 1.5rem;
}
#livesearch::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px var(--color-secondary);
	border-radius: 1rem;
}
#livesearch::-webkit-scrollbar-thumb {
	background: var(--color-main);
	border-radius: 1rem;
}
#livesearch::-webkit-scrollbar-thumb:hover {
	background: var(--color-main);
}
/***********************************/
.live-outer {
	width: 100%;
	height: 8rem;
	display: flex;
	justify-content: center;
	z-index: 3;
	border-bottom: 1px solid #ccc;
	background: var(--color-light-1);
}
.live-outer:hover {
	background: #f3f3f3;
}
/***********************************/
.live-im {
	float: left;
	width: 10%;
	height: 6rem;
	margin: 8px;
}
.live-im img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
/***********************************/
.live-product-det {
	float: left;
	width: 90%;
	height: 2.5rem;
}
/***********************************/
.live-product-name {
	width: 100%;
	height: 2.5rem;
	margin-top: 4px;
}
.live-product-name p {
	color: #333;
	text-shadow: 1px 1px 1px #dddddd;
	margin-left: 1rem;
}
.live-product-name p i {
	font-weight: 600;
}
.live-product-name p span {
	color: #2196f3;
}
/***********************************/
.live-product-price {
	width: 100%;
	height: 2.5rem;
}
.live-product-price-text {
	float: left;
	width: 50%;
}
.live-product-price-text p {
	margin-left: 1rem;
	font-size: 1.6rem;
	font-weight: 600;
	width: 200%;
}
.live-product-price-text p span {
	color: #2196f3;
}
/***********************************/
.link-p-colr {
	color: #333;
	text-decoration: none;
}
/* Styling  Search form, input and search button*/
.example {
	max-width: 100%;
	margin: auto;
	z-index: 35;
}
.example input[type="text"] {
	padding: 1rem 2rem;
	height: 4.2rem;
	font-size: 1.7rem;
	border: none;
	border-right: none;
	float: left;
	width: 100%;
	background-color: hsl(220, 33%, 90%);
	transition: all 0.5s;
}
.example input[type="text"]:focus {
	box-shadow: 0 0.7rem 2.5rem rgba(0, 0, 0, 0.08);
	background-color: hsl(220, 33%, 95%);
	outline: none;
}
.example .btn {
	float: left;
	width: 33%;
	background-color: var(--color-main);
	color: white;
	z-index: 35;
	font-size: 4rem;
	border-left: none;
	cursor: pointer;
	border: none;
}
.example .btn:hover {
	background-color: var(--search-butt-hov);
}
.example .btn .search__icon {
	height: 3.5rem;
	width: 3rem;
	fill: var(--color-light-1);
}
.clear-fix {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}
.clear-fix::after {
	content: "";
	display: table;
}
.min-width-auto {
	width: 80%;
	margin: auto;
}
.textbox-clr {
	cursor: text;
	background-color: hsl(220, 33%, 90%);
	width: 25%;
	float: left;
	z-index: 35;
	outline: none;
	border: none;
	text-align: center;
	height: 4.2rem;
	font-weight: 900;
	transition: all 0.5s;
}
.example input[type="text"]:focus + .textbox-clr {
	background-color: hsl(220, 33%, 95%);
	box-shadow: 0 0.7rem 2.5rem rgba(0, 0, 0, 0.08);
	cursor: pointer;
}
.example input[type="text"]:focus + .textbox-clr:hover {
	background-color: rgba(205, 117, 117, 0.605);
}
/* layout */
.search-engine-container {
	margin-bottom: 1rem;
	margin-top: 2rem;
}
.search {
	z-index: 35;
	border-radius: 0;
}
/* Custom Nav Slider */
.slider-container {
	position: relative;
	/*width: 85%;*/
	margin: 0 auto;
}
.slider-header {
	font-size: 2rem;
	font-weight: 600;
}
.slider-wrapper {
	width: 100%;
	overflow-x: scroll;
	cursor: grab;
	overflow-y: hidden;
	white-space: nowrap;
	margin: 0 auto;
	position: relative;
}
.slider-wrapper:active {
	cursor: grabbing;
}
.products ul li {
	display: inline-block;
	padding: 5px;
}
.product-container {
	text-align: center;
	padding: 1.5rem;
	position: relative;
	overflow: hidden;
}
.post__hero:hover > .post__img {
	filter: blur(0px) brightness(100%);
}
.post__hero:hover > .post__img-caption {
	transform: translate(-50%, -200%);
}
.post__img {
	background-color: var(--color-light-1);
	width: 10rem;
	height: 10rem;
	cursor: pointer;
	border-radius: 50%;
	border: 5px solid var(--color-main);
	filter: blur(1px) brightness(50%);
	transition: all 1.3s;
}
.post__img-caption {
	color: var(--color-light-1);
	font-weight: 700;
	text-shadow: 0 0 2rem var(--color-main);
	text-align: center;
	font-size: 1.55rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 100%);
	text-transform: uppercase;
	opacity: 1;
	transition: all 1.3s;
}
.slider-wrapper::-webkit-scrollbar {
	height: 7px;
}
.slider-wrapper::-webkit-scrollbar-track {
	background: #898d91;
	border: 4px solid transparent;
	background-clip: content-box;
}
.slider-wrapper::-webkit-scrollbar-thumb {
	background: var(--color-main);
}
#click2 {
	position: absolute;
	top: 47%;
	left: 0%;
	width: 38px;
	height: 35px;
	border-left: none;
	background-color: transparent;
	border-radius: 50%;
	opacity: 0.8;
	cursor: pointer;
}
#click {
	position: absolute;
	top: 47%;
	background-color: transparent;
	right: 0%;
	width: 38px;
	height: 35px;
	border-right: none;
	border-radius: 50%;
	opacity: 0.8;
	cursor: pointer;
}
#click:hover,
#click2:hover {
	opacity: 1;
}
.icon-circle-left {
	width: 3.8rem;
	height: 3.3rem;
	border-radius: 50%;
	background-color: var(--color-light-1);
	border: 3px solid var(--color-main);
	fill: var(--color-main);
}
.icon-circle-right {
	width: 3.8rem;
	height: 3.3rem;
	border: 3px solid var(--color-main);
	background-color: var(--color-light-1);
	border-radius: 50%;
	fill: var(--color-main);
}
/* Slider */
.parallax-image-one .slider-one .cards {
	width: 29rem;
	background-color: var(--color-light-1);
	overflow: hidden;
}
.parallax-image-one .slider-one .cards__image {
	width: 100%;
	height: 20rem;
}
.parallax-image-one .slider-one .cards__image img {
	opacity: initial !important;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.parallax-info-container {
	padding: 5rem 0;
}
.parallax-image-one__text-heading {
	margin: 3rem auto 4rem auto !important;
	text-align: center;
}
.parallax-image-one__text-sub {
	text-align: center;
	padding: 5px 5px;
	text-shadow: var(--subheading-shadow);
	display: block;
	color: var(--color-main);
}
.appointment-info label {
	display: block;
	font-size: 1.6rem;
	font-weight: 600;
}
input[type="date"],
input[type="time"] {
	padding: 0.5rem;
	width: 20rem;
	font-weight: 900;
	font-family: system-ui;
	text-shadow: 1px 1px 0rem dodgerblue;
	background-color: transparent;
	font-size: 2rem;
	color: firebrick;
	border: none;
	cursor: text;
	outline: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
	font-size: 2rem;
	width: 2.5rem;
	height: 2.7rem;
	margin: auto;
	text-align: center;
	background-image: linear-gradient(
			to right,
			rgba(33, 150, 243, 0.4),
			rgba(33, 150, 243, 0.4)
		),
		url(../../img/svg/calendar1.svg);
	cursor: pointer;
}
@supports (-webkit-mask-image: url()) or (mask-image: url()) {
	input[type="date"]::-webkit-calendar-picker-indicator {
		background-color: var(--color-secondary);
		-webkit-mask-image: url(../../img/svg/calendar1.svg);
		mask-image: url(../../img/svg/calendar1.svg);
		-webkit-mask-size: cover;
		mask-size: cover;
		background-image: none;
	}
}
input[type="time"]::-webkit-calendar-picker-indicator {
	font-size: 2rem;
	margin: auto;
	width: 2.5rem;
	height: 2.5rem;
	text-align: center;
	background-image: linear-gradient(
			to right,
			rgba(33, 150, 243, 0.4),
			rgba(33, 150, 243, 0.4)
		),
		url(../../img/svg/clock4.svg);
	cursor: pointer;
}
@supports (-webkit-mask-image: url()) or (mask-image: url()) {
	input[type="time"]::-webkit-calendar-picker-indicator {
		background-color: var(--color-secondary);
		-webkit-mask-image: url(../../img/svg/clock4.svg);
		mask-image: url(../../img/svg/clock4.svg);
		-webkit-mask-size: cover;
		mask-size: cover;
		background-image: none;
	}
}
.clientDets {
	padding: 1rem 0;
	width: 100%;
	outline: none;
	color: firebrick;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	border: none;
	border-radius: 6px;
}
/* Products */
.container {
	padding: 0 3.6rem;
}
.section-2 {
	margin: 3.6rem 0;
}
.offer {
	background-color: var(--color-dark-1);
	box-shadow: 0 0 3.5rem var(--color-dark-2);
	margin: 1.6rem 0;
	display: grid;
}
.offer img {
  width: 30rem;
  height: 25rem;
	background-color: var(--color-dark-1);
	padding: 3.6rem 0;
}
.offer-description {
	background-color: var(--color-light-2);
	padding: 0 1.6rem;
}
.offer-description .offer-title {
	color: var(--color-tertairy);
	font-size: 2.6rem;
	font-weight: 400;
	padding: 2.4rem 0 0.8rem 0;
}
.offer-description .offer-hook {
	color: var(--color-tertairy);
	font-size: 1.9rem;
}
.offer-description .cart-btn {
	cursor: pointer;
	display: grid;
	place-items: center;
  margin-bottom: 2rem;
}
.section-3 {
	display: grid;
	place-items: center;
	justify-content: space-around;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 400px));
}


/* page setup */
.wrapper{
	width:80%;
	max-width:1000px;
	margin: 30px auto;
}
section.row{
	margin:0 0 30px 0;
}
.row{
	width: 100%;
	display: block;
	clear: both;
}

/* Actual content */
.container-item{
	position: relative;
	box-shadow: 0 0 3rem var(--color-dark-2);
	float:left;
	margin-right:15px;
	/* position: absolute;
	top:50%;
	left:50%;
	margin-left:-130px;
	margin-top:-130px; */
}

.item{
	width:26rem;
	height:36rem;
	background-image: url(http://i202.photobucket.com/albums/aa307/slucas_bucket/fresh-1.jpg);
	-webkit-background-size: 100%;
	     -o-background-size: 100%;
	        background-size: 100%;
	position: relative;
	top:0;
	left:0;
	z-index:5;
	overflow: hidden;
	-webkit-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
	        box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.item-overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */

	-webkit-transition: background-color 0.3s ease-in-out;
	   -moz-transition: background-color 0.3s ease-in-out;
	    -ms-transition: background-color 0.3s ease-in-out;
	     -o-transition: background-color 0.3s ease-in-out;
	        transition: background-color 0.3s ease-in-out;
}
.item:hover .item-overlay{
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */
	background-color: rgba(0,0,0,0.4);
}
.item-content{
	position: absolute;
	width:100%;
	bottom: 0;
	-webkit-transform: translate(0,100%);
	   -moz-transform: translate(0,100%);
	    -ms-transform: translate(0,100%);
	     -o-transform: translate(0,100%);
	        transform: translate(0,100%);
	
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
	
}
.item:hover .item-content{
	-webkit-transform: translate(0,0);
	   -moz-transform: translate(0,0);
	    -ms-transform: translate(0,0);
	     -o-transform: translate(0,0);
	        transform: translate(0,0);
	    
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}

.item-top-content{
	position: relative;
}
.item-top-content-inner{
	position: absolute;
	bottom: 0;
	padding:10px 15px 10px 15px;
	background: rgba(255,255,255,.85);
	width:100%;
}
.item-add-content{
	padding:0 15px 15px 15px;
	opacity:0;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.item:hover .item-add-content{
	opacity:1
}
.item-add-content-inner{
	border:0px solid #dadada;
	border-top-width:1px;
	padding-top:10px;
}



/* Buttons */
.item-button{
	border-radius:3px;
	width:30px;
	height:30px;
  display: table;
}
.item-button:before {
  display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
font-family: FontAwesome;

}
.item-button.play{
	background-color: var(--color-main);
  color: #fff;
	position: absolute;
	top: 15px;
	left: 15px;
	opacity:0;
}
.item-button.play:before {
  content: "\f04b";
}
.item-button.play:hover{
	background-color:#145181b5;
	}
.container-item:hover .item-button.play{
	opacity:1;
}

.item-button.share{
	background-color:#4f4f4f;
  color: #fff;
	position: absolute;
	top: 50px;
	left: 15px;
	opacity:0;
}
.item-button.share:before {
  content: "\f129";
  font-family: FontAwesome;
}
.item-button.share:hover{
	background-color:#333333;
	}
.container-item:hover .item-button.share{
	opacity:1;
}
.btn.buy{
	background-color: var(--color-main);
	text-align:center;
	line-height:42px;
	font-weight:700;
	color:#fff;
	font-size: var(--body-font-size);
	border-radius:3px;
	text-decoration:none;
	opacity:1;
	border:0px solid #11498ec1;
	border-bottom-width:2px;
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	    -ms-transition: all 0.2s ease-in-out;
	     -o-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}
.btn.buy:hover{
	background-color: #007eb8bd;
}
.expand{
	display:block;
}

/* Tags */
.sale-tag{
	width: 70px;
    height: 131px;
    background: var(--color-main);
    position: absolute;
    top: -42px;
    right: -18px;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.sale-tag span{
	position: absolute;
    top: 43px;
    left: 5px;
    font-weight: var(--subheading-font-weigth);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    font-size: 18px;
    color: #fff;
}

/* content */

.item-product{
	width:70%;
	float:left;
}
.item-product-price{
	width:30%;
	float:right;
	text-align: right;
}
/* Style / Theming */

/*Prduct title*/
h2{
	font-size:1.6em;
	font-weight:400;
	color:#222;
}

.subdescription{
	font-family: 'helvetica neue';
	font-size: var(--body-font-size);
	font-weight:400;
	color:#7d7d7d;
}

/*product price*/
.item-product-price{
	color:var(--color-main);
	font-size: 1.6em;
	font-weight:700;
	position:relative;
	font-family:'helvetica neue'
}

.item-product-price .subdescription{
	color:#7d7d7d;
}

.old-price{
	border: 0 solid #7d7d7d;
    border-bottom-width: 1px;
    margin-top: -11px;
    width: 43px;
    position: absolute;
    right: -3px;
    bottom: 13px;
	-webkit-transform: rotate(-30deg);
	   -moz-transform: rotate(-30deg);
	    -ms-transform: rotate(-30deg);
	     -o-transform: rotate(-30deg);
	        transform: rotate(-30deg);
}

.item-content{
	background: rgba(255,255,255,.85);
}
.item-add-content{
	font-family: 'Lato', sans-serif;
	font-weight:400;
	color:#7d7d7d;
}
.item-add-content .section{
	margin-bottom:10px;
}
.item-add-content .section:last-of-type{
	margin-bottom:0;
}
.item-add-content h4{
	font-weight:600;
	color:#222;
	font-size:0.8em;
}
.item-add-content p{
	font-size:0.8em;
}


/* Item menu */
.item-menu{
	position: absolute;
	top:3px;
	left:0px;
	height:354px;
	width:260px;
	border-radius:3px 0 0 3px;
	background:#4f4f4f;
	-webkit-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
	        box-shadow: 0 1px 5px rgba(0,0,0,0.3);
	-webkit-transform: translate(0,0);
	   -moz-transform: translate(0,0);
	    -ms-transform: translate(0,0);
	     -o-transform: translate(0,0);
	        transform: translate(0,0);
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.item-menu.visible{
	-webkit-transform: translate(-70px,0);
	   -moz-transform: translate(-70px,0);
	    -ms-transform: translate(-70px,0);
	     -o-transform: translate(-70px,0);
	        transform: translate(-70px,0);
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.item-menu:hover{
	-webkit-transform: translate(-70px,0);
	   -moz-transform: translate(-70px,0);
	    -ms-transform: translate(-70px,0);
	     -o-transform: translate(-70px,0);
	        transform: translate(-70px,0);
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
/*List*/
.popout-menu ul{
	list-style-type:none;
}
.popout-menu ul li{
	-webkit-box-shadow: inset 0px 1px rgba(255,255,255,0.1);
	        box-shadow: inset 0px 1px rgba(255,255,255,0.1);
	border-bottom:1px solid #434343;
}
.popout-menu ul li:first-of-type{
	-webkit-border-radius: 3px 0;
	        border-radius: 3px 0;
}
.popout-menu ul li:last-of-type{
	border-bottom-width:0px;
}
.popout-menu ul li:hover{
	background:#434343;
}
.popout-menu ul li a{
	color: #eaeaea;
    font-weight: 900;
    font-size: 1.6rem;
    text-decoration: none;
    line-height: 36px;
    padding: 0px 12px;
    display: block;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

/* .product {
	cursor: pointer;
	background-color: var(--color-light-2);
	position: relative;
}
.product::before {
	content: "";
	background-image: linear-gradient(
    to bottom,
    hsla(199, 100%, 36%, 0.46),
    hsla(359, 78%, 51%, 0.46)
  );
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.product-img{
  width: 30rem;
  height: 30rem;
}
.product_add_cart {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}*/
.product-end-btns{
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
} 
/* -------- SPONSOR SECTION ----------- */
.section-4 {
	margin: 4rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
  }
  .sponsor img {
	cursor: pointer;
	width: 40px;
	height: 40px;
	filter: grayscale(100%);
	opacity: 0.8;
	transition: opacity 300ms;
  }
  .sponsor img:hover {
	/* filter: grayscale(0); */
	opacity: 1;
  }
  
  /* ========= SUBSCRIBE SECTION ========== */
  .section-5 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 2rem 0;
  }
  .subscribe-input-label {
	margin-bottom: 1rem;
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.05rem;
	color: var(--second-color);
  }
  #email-subscribe {
	padding: 0 0.5rem;
	font-size: 1.1rem;
	width: 100%;
	height: 3rem;
	border: none;
	background-color: hsl(220, 33%, 90%);
	color: var(--color-tertairy);
	transition: background-color 300ms;
  }
  #email-subscribe:focus {
	outline: none;
	background-color: hsl(220, 33%, 95%);
  }
  .email-subscribe-submit {
	cursor: pointer;
	background-color: var(--color-main) !important;
	color: var(--color-light-3) !important;
	margin: 1rem 0;
	border: none;
	width: 100%;
	height: 3rem;
	font-size: 1.2rem;
	transition: color 300ms;
  }
  .email-subscribe-submit:hover {
	background-color: var(--color-main);
	color: var(--color-light-1);
  }
  
.footer {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	padding: 20px;
	margin-top: 20px;
	width: 100%;
	background-color: var(--color-dark-1);
	color: var(--color-light-1);
	font-size: 1.6rem;
}
.footer-service-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.footer-service-content > ol {
	list-style: none;
}
.footer-service-content > div {
	padding: 5px;
}
.footer-service-content > div > h3 {
	font-size: 20px;
}
.footer-service-content > ol > li > a {
	color: var(--color-light-1);
	background-color: rgba(103, 38, 130, 0);
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	transition: all 0.2s;
}
.footer-service-content > ol > li > a:hover,
.footer-service-content > ol > li > a:active {
	color: var(--color-main);
	transform: rotate(5deg) scale(1.3);
}
.social-link {
	text-decoration: none;
}
.social-link > * {
	display: inline-block;
	fill: var(--color-light-1);
	height: 3rem;
	width: 3rem;
}
.social-link > *:hover {
	background-color: var(--color-light-1);
	border-radius: 50%;
}
.facebook__icon:hover {
	fill: #3b5998;
}
.linkedin__icon:hover {
	fill: #0e76a8;
}
.twitter__icon:hover {
	fill: #0084b4;
}
.instagram__icon:hover {
	background: #f09433;
	background: -moz-linear-gradient(
		45deg,
		#f09433 0%,
		#e6683c 25%,
		#dc2743 50%,
		#cc2366 75%,
		#bc1888 100%
	);
	background: -webkit-linear-gradient(
		45deg,
		#f09433 0%,
		#e6683c 25%,
		#dc2743 50%,
		#cc2366 75%,
		#bc1888 100%
	);
	background: linear-gradient(
		45deg,
		#f09433 0%,
		#e6683c 25%,
		#dc2743 50%,
		#cc2366 75%,
		#bc1888 100%
	);
}
.copyright{
    color: var(--color-light-1);
}
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 95%;
	margin: auto;
	height: 5.3rem;
	border-bottom: 0.5px solid var(--color-light-2);
	padding: 2rem 1rem;
}
.header__logo {
	float: left;
	color: var(--color-tertairy);
}
.header__logo-text {
	position: relative;
}
.header__logo-text .logo {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	text-decoration: none;
	color: var(--color-light-1);
	text-transform: uppercase;
}
.header .header__user-nav {
	display: flex;
	align-items: center;
	color: var(--color-light-1);
	fill: var(--color-light-1);
	float: right;
	/* signed in Navigation buttons */
}
.header .header__user-nav--sign-up {
	display: inline-block;
}
.header .header__user-nav--sign-in {
	margin-right: 3rem;
	display: inline-block;
}
@supports (display: flex) or (display: -webkit-flex) {
	.header .header__user-nav--sign-in {
		margin-top: 0;
	}
}
.header .header__user-nav .dash-btn a {
	text-decoration: none;
	color: var(--color-light-1);
	font-size: 1.5rem;
	text-shadow: 0px 0px 4px var(--color-light-1);
	padding: 1rem;
	transition: all 0.5s ease;
}
.header .header__user-nav .dash-btn a:hover {
	color: var(--color-main);
}
.header .header__user-nav .header-icon-wrapper {
	position: relative;
}
.header .header__user-nav .header-icon-wrapper:not(:last-child) {
	margin-right: 1rem;
}
.header .header__user-nav .header-icon-wrapper__svg {
	font-size: 3.25rem;
	text-shadow: 1px 1px 1rem var(--color-main);
	outline: none;
	transition: all 0.3s ease;
}
.header .header__user-nav .header-icon-wrapper__svg:hover {
	text-shadow: 1px 1px 1rem var(--color-secondary);
}
.header .header__user-nav .header-icon-wrapper__svg::selection {
	background-color: transparent;
	color: currentColor;
}
.header .header__user-nav .header-icon-wrapper__svg-2 {
	fill: var(--color-dark-3);
	height: 3.25rem;
	width: 3.25rem;
}
.header .header__user-nav .header-icon-wrapper__svg-2:hover {
	fill: var(--color-danger);
}
.header .header__user-nav .header-icon-wrapper__notification {
	position: absolute;
	top: -4px;
	right: -7px;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--color-dark-3);
}
.header .header__user-nav .header-icon-wrapper__notification::selection {
	background-color: transparent;
	color: currentColor;
}
.header .header__user-nav .profile a {
	padding: 1rem;
	text-decoration: none;
	display: flex;
	align-items: center;
}
.header .header__user-nav .profile a:hover > .profile__user-name {
	color: var(--color-main);
}
.header .header__user-nav .profile__user-photo {
	height: 3.75rem;
	width: 3.75rem;
	border-radius: 50%;
	margin-right: 0.5rem;
}
.header .header__user-nav .profile__user-name {
	font-size: 1.5rem;
	color: var(--color-light-1);
	transition: color 0.5s ease;
	text-shadow: 0px 0px 4px var(--color-light-1);
}
.navigation-container {
	clear: both;
}
.parallax-container {
	margin: 0 auto;
}
.fetchItems {
	margin-top: 2rem;
	display: grid;
	max-width: 100%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.parallax-container::after {
	content: "";
	clear: both;
	display: table;
}
.nav {
	/* All direct decendance of the nav class */
	width: 100%;
	margin: auto;
	/* Top navigation links */
}
.nav > * {
	width: 32.68%;
	position: relative;
	/* Top navigation links*/
}
@supports (display: flex) or (display: -webkit-flex) {
	.nav > * {
		width: initial;
	}
}
.nav > * a:link,
.nav > * a:visited {
	font-size: 1.3rem;
	text-decoration: none;
	color: var(--color-light-3);
	text-transform: uppercase;
	display: inline-block;
	padding: 1rem 1.5rem;
	position: relative;
}
.nav > * a:link::before,
.nav > * a:visited::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 5px;
	width: 3px;
	background-color: var(--color-main);
	transform: scaleY(0);
	transition: transform 0.3s, width 0.2s cubic-bezier(1, 0, 0, 1),
		background-color 0.1s;
}
.nav > * a:link:hover::before,
.nav > * a:visited:hover::before {
	transform: scaleY(1);
	width: 100%;
	color: var(--light-color-1);
}
.nav > * a:focus {
	outline: none;
	animation: pulsate 1s infinite;
}
.nav > * a .link {
	z-index: 33;
	position: relative;
}
@supports (display: flex) or (display: -webkit-flex) {
	.nav > * a .link {
		display: flex;
		align-items: center;
	}
	@media only screen and (max-width: 37.25em) {
		.nav > * a .link {
			flex-direction: column;
		}
	}
}
@supports (display: flex) or (display: -webkit-flex) {
	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.nav__link-one {
	display: inline-block;
	text-align: left;
}
.nav__link-two {
	display: inline-block;
	text-align: center;
}
.nav__link-three {
	display: inline-block;
	text-align: end;
}
.nav__icon {
	height: 1.2rem;
	width: 1.2rem;
	margin-right: 4px;
	fill: var(--color-light-1);
}
.home-container {
	max-width: 100%; 
	box-shadow: var(--boxsh);
}
.header-container {
	padding: 0 1rem;
	background-color: var(--color-dark-1) !important;
}
.nav-container {
	background-color: var(--color-dark-1) !important;
}
/* ******************************************************************************************* */
/* Responsive Design */
@media only screen and (max-width: 68.75em) {
	.composition__photo {
		position: relative;
		width: 30%;
	}
	.composition__photo--p1 {
		top: 0;
		left: 35%;
		transform: scale(1.1);
	}
	.composition__photo--p2 {
		top: 2rem;
		right: 27%;
	}
	.composition__photo--p3 {
		left: 5%;
		top: 2rem;
	}
	.popup__content {
		max-width: 85%;
		width: 85%;
		display: block;
	}
	.popup__left {
		width: 100%;
		display: inline-block;
	}
	.popup__right {
		width: 100%;
		padding: 0.5rem 1rem;
		display: inline-block;
	}
	.popup__img {
		width: 49%;
		display: inline;
	}
	.popup__text {
		margin-bottom: 1rem;
		-moz-column-count: 1;
		-moz-column-gap: 0;
		-moz-column-rule: none;
		column-count: 1;
		column-gap: 0;
		column-rule: none;
	}
	.popup:target .popup__content {
		padding: 2rem;
	}
	.home-container {
		margin: 0;
		max-width: 100%;
		overflow: hidden;
	}
}
@media only screen and (max-width: 56.25em) {
	/* Margins */
	.u-margin-bottom-small {
		margin-bottom: 1rem !important;
	}
	.u-margin-bottom-med {
		margin-bottom: 1rem !important;
	}
	.u-margin-bottom-big {
		margin-bottom: 5rem !important;
	}
	.u-margin-bottom-huge {
		margin-bottom: 7rem !important;
	}
	.u-margin-top-big {
		margin-top: 5rem !important;
	}
	.u-margin-top-med {
		margin-top: 2rem !important;
	}
	.u-margin-top-huge {
		margin-top: 7rem !important;
	}
	.col-1-of-3 {
		padding: 1rem;
	}
	/* Composition Images  */
	.composition__photo {
		width: 33.3333333%;
		float: left;
		position: relative;
	}
	.composition__photo--p1 {
		left: 33%;
	}
	
	.composition__photo--p2 {
		right: 35%;
	}
	.composition__photo--p3 {
		left: 0%;
	}
	.composition__photo:hover {
		transform: scale(1.1) translate(0%, 7%);
	}
	.composition__photo--p1:hover {
	    outline: 0.5rem solid var(--color-secondary);
	}
	.composition__photo--p2:hover {
	    outline: 0.5rem solid var(--color-main);
	}
	.composition__photo--p3:hover {
	    outline: 0.5rem solid var(--color-main);
	}
	/* Forms */
	.form__input {
		width: 60%;
	}
	.form__label {
		margin-left: 0;
	}
	/* POPUP */
	.popup__content {
		max-width: 90%;
		width: 90%;
	}
	.footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer-service-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer-service-content div > ol {
		text-align: center;
	}
	.header {
		flex-direction: column;
		height: 12.5rem;
	}
	.header__logo {
		display: block;
		float: none;
		text-align: center;
	}
	.header .header__user-nav {
		float: none;
		text-align: center;
	}
	.fetchItems {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media only screen and (max-width: 56.25em), only screen and (hover: none) {
	.card__details ul li {
		padding: 0.2rem;
	}
	.card__hover-indication {
		display: none;
	}
	.card__use-case {
		margin-bottom: 2rem;
	}
	.card__use-case-text {
		font-size: 2.5rem;
	}
	.card {
		height: auto;
		border-radius: 3px;
		background-color: var(--color-light-1);
		box-shadow: 0 1.5rem 4rem rgba(var(--color-dark-1), 0.15);
	}
	.card__side {
		height: auto;
		position: relative;
		box-shadow: none;
	}
	.card__side--back {
		transform: rotateY(0);
		clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
	}
	.card:hover .card__side--front {
		transform: rotateY(0);
	}
	.card__details {
		padding: 1rem 3rem;
	}
	.card__cta {
		position: relative;
		top: 0;
		left: 0;
		transform: translate(0);
		width: 100%;
		padding: 4rem 2rem 2rem 2rem;
	}
	.card__price-box {
		margin-bottom: 3rem;
	}
	.card__price-value {
		font-size: 2.1rem;
	}
	.item-button.play {
		opacity: 1;
	}
	.item-button.share {
		opacity: 1;
	}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
	.card__details ul li:nth-child(2) {
		min-height: 5rem;
	}
}

@media only screen and (max-width: 37.25em) {
	/* Mobile Text */
	.heading-text {
		font-size: var(--heading-font-size-ms-ml);
		margin: 0.5rem;
		text-align: center;
	}
	.subheading-text {
		font-size: var(--subheading-font-size-ms-ml);
		text-align: center;
	}
	/* Mobile Margins */
	.u-margin-bottom-small {
		margin-bottom: 0.5rem !important;
	}
	.u-margin-bottom-med {
		margin-bottom: 5rem !important;
	}
	.u-margin-bottom-big {
		margin-bottom: 3rem !important;
	}
	/* Mobile Buttoms */
	.btn--block {
		display: block;
		position: relative;
		bottom: 0;
		right: 0;
	}
	.col-1-of-3 {
		padding: 1rem;
	}
	/* Mobile Forms */
	.form__radio-group {
		width: 100%;
		margin-bottom: 2rem;
		text-align: left;
	}
	.example input[type="text"] {
		width: 60%;
	}
	/* Mobile Popups */
	.popup__content {
		max-width: 100%;
		height: 100vh;
		width: 100%;
	}
	.popup__img {
		width: 48%;
		display: inline;
	}
	/* Mobile Search */
	.live-im {
		width: 25%;
	}
	.textbox-clr {
		width: 13%;
	}
	/* Mobile Widths */
	.min-width-auto {
		width: 90%;
	}
	/* Mobile Navs */
	.nav__icon {
		display: block;
		margin: auto;
	}
	/* Mobile Grids */
	.fetchItems {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.footer {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}
@media only screen and (max-width: 31.25em) {
	.form__input {
		width: 100%;
	}
}
/* =============== MEDIA QUERIES ======= */
@media only screen and (max-width: 768px) {
	/* .container {
		padding: 0 1.6rem; 
	} */
}
@media only screen and (min-width: 769px) {
	.section-2 {
		margin: 3.6rem 8rem;
	}
	.offer {
		margin: 8rem 0;
		align-items: center;
		grid-template-rows: auto auto;
	}
	.offer-1 {
		grid-template-areas: "offer-1-img offer-desc-1";
	}
	.offer-1 img {
		background-color: var(--color-dark-1);
		padding: 3.6rem 0;
		margin: auto;
	}
	.offer-2 {
		grid-template-areas: "offer-desc-2 offer-2-img";
	}
	.offer-1-img {
		grid-area: offer-1-img;
	}
	.offer-2-img {
		grid-area: offer-2-img;
		margin: auto;
	}
	.offer-desc-1 {
		grid-area: offer-desc-1;
	}
	.offer-desc-2 {
		grid-area: offer-desc-2;
	}
	.offer-description .offer-title {
		font-size: 3.2rem;
		padding: 2.2rem 0 0.8rem 0;
	}
	.offer-description .offer-hook {
		max-width: 48rem;
	}
	.offer-description {
		background-color: var(--color-light-2);
		padding: 3.6rem 1.6rem;
	}
	.offer-description .offer-title {
		padding: 0.8rem 0 1.6rem 0;
	}
	.offer-description .cart-btn {
		margin: 3.6rem 0 0.5rem 0;
	}
	.section-3 {
		gap: 5rem;
	}
	.product::before {
		transform: scaleY(0);
		transform-origin: bottom;
		transition: transform 300ms;
	}
	.product:hover::before {
		transform: scaleY(1);
		transform-origin: top;
		transition: transform 300ms;
	}
	.product_add_cart {
		transform: scaleY(0);
		transform-origin: bottom;
	}
	.product:hover .product_add_cart {
		transform: translate(-50%, -50%) scaleY(1);
		transform-origin: top;
	}
	 /* -------- SPONSOR SECTION ----------- */
	 .section-4 {
		margin: 5rem 0;
	  }
	  /* ========= SUBSCRIBE SECTION ========== */
	  .section-5 {
		padding: 1rem 0;
	  }
	  .section-5 .subscribe-container {
		display: flex;
		align-items: center;
	  }
	  input[type="text"] {
		padding: 0 1rem;
		width: 15rem;
	  }
	  input[type="submit"] {
		width: 10rem;
	  } 
}
@media only screen and (display-mode: fullscreen) {
	.InstallApp {
		display: none;
	}
}