/*
  date created : 6/12/2017
  author : Mahdi heydarnejad Moghadam
  Golden Harvest
 */
 @font-face {
	font-family: 'Franklin';
	src        : url('../fonts/FranklinGothicStd-ExtraCond.eot');
	src        : url('../fonts/FranklinGothicStd-ExtraCond.eot#iefix') format('embedded-opentype'),
		url('../fonts/FranklinGothicStd-ExtraCond.woff') format('woff2'),
		url('../fonts/FranklinGothicStd-ExtraCond.woff') format('woff'),
		url('../fonts/FranklinGothicStd-ExtraCond.ttf') format('truetype'),
		url('https://jasminsandwich.ca/fonts/FranklinGothicStd-ExtraCond.svg#FranklinGothicStd-ExtraCond') format('svg');
	font-weight: normal;
	font-style : normal;
}

body,
html {
	min-height: 100%;
}

body {
	/* style of body */
	font-family        : 'News Cycle';
	color              : #161616;
	overflow-x         : hidden;
	background-image   : url(https://jasminsandwich.ca/img/HCP_Web_Background.jpg);
	background-size    : 100% auto;
	background-repeat  : repeat-y;
	background-position: top center;
}

.title {
	font-size     : 6rem;
	color         : #fff;
	text-transform: uppercase;
	margin        : 1.5rem auto;
	font-family   : 'Franklin';
}

.opacity {
	opacity: 0;
}

.text {
	font-size: 2.2rem;
	color    : #fff;
}

.text strong {
	font-family   : 'Franklin';
	text-transform: uppercase;
	font-size     : 2.8rem;
}

footer {
	padding: 50px 0 15px;
}

#Gallery [class*='col-'] {
	padding: 0;
}

#Gallery img {
	width             : 100%;
	-webkit-filter    : grayscale(100%);
	/* Safari 6.0 - 9.0 */
	-moz-filter       : grayscale(100%);
	-ms-filter        : grayscale(100%);
	-o-filter         : grayscale(100%);
	filter            : grayscale(100%);
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition   : all 400ms ease-in-out;
	-o-transition     : all 400ms ease-in-out;
	transition        : all 400ms ease-in-out;
}

#Gallery img:hover {
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition   : all 400ms ease-in-out;
	-o-transition     : all 400ms ease-in-out;
	transition        : all 400ms ease-in-out;
	-webkit-filter    : grayscale(0%);
	/* Safari 6.0 - 9.0 */
	-moz-filter       : grayscale(0%);
	-ms-filter        : grayscale(0%);
	-o-filter         : grayscale(0%);
	filter            : grayscale(0%);
}

/*************  Style of scrollbar ****************************/
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius     : 10px;
	background-color  : #F5F5F5;
}

::-webkit-scrollbar {
	width           : 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
	border-radius     : 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
	background-color  : #1F1F1F;
}

.hidden_vertical_overflow {
	overflow-y: hidden;
}

.blur {
	-webkit-filter: blur(5px);
	-moz-filter   : blur(5px);
	-o-filter     : blur(5px);
	-ms-filter    : blur(5px);
	filter        : blur(5px);
}

.md-input {
	position     : relative;
	margin-bottom: 30px;
}

.md-input .md-form-control {
	font-size       : 2.5rem;
	padding         : 5px 5px 5px 5px;
	display         : block;
	border          : none;
	border-bottom   : 2px solid #424242;
	box-shadow      : none;
	width           : 100%;
	color           : #161616;
	background-color: transparent;
}

.md-input textarea.md-form-control {
	resize: none;
}

.md-input .md-form-control:focus {
	outline: none;
}

.md-input label {
	color             : rgba(0, 0, 0, 0.5);
	font-size         : 2.2rem;
	font-weight       : normal;
	position          : absolute;
	pointer-events    : none;
	left              : 5px;
	top               : 10px;
	transition        : 0.2s ease all;
	-moz-transition   : 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}

.md-input .bar:before {
	left: 50%;
}

.md-input .bar:after {
	right: 50%;
}

.md-input .highlight {
	position      : absolute;
	height        : 60%;
	width         : 100px;
	top           : 25%;
	left          : 0;
	pointer-events: none;
	opacity       : 0.5;
}

.md-input .md-form-control:focus~label,
.md-input .md-form-control:valid~label {
	top      : -15px;
	font-size: 14px;
	color    : #333;
}

.md-input .bar:before,
.md-input .bar:after {
	content           : '';
	height            : 2px;
	width             : 0;
	bottom            : 0px;
	position          : absolute;
	background        : #000;
	transition        : 0.2s ease all;
	-moz-transition   : 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}

.md-input .md-form-control:focus~.bar:before,
.md-input .md-form-control:focus~.bar:after {
	width: 50%;
}

/************************************/
.btn_action {
	margin-top        : 30px;
	position          : relative;
	color             : #fff;
	background-color  : #000;
	padding           : 10px 20px;
	font-size         : 2.8rem;
	display           : inline-block;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

.btn_action:hover,
.btn_action:focus,
.btn_action:active {
	position          : relative;
	color             : #fff;
	text-shadow       : 0 0 5px #fff;
	text-decoration   : none;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

.hover {
	display           : inline-block;
	position          : relative;
	border            : none;
	color             : #161616;
	font-size         : 1.8rem;
	cursor            : pointer;
	margin            : 10px auto;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

.hover:hover {
	color             : #161616;
	text-decoration   : none;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

.hover span {
	display: block;
	padding: 5px 10px;
}

.hover::before,
.hover::after {
	content   : "";
	width     : 0;
	height    : 2px;
	position  : absolute;
	transition: all 0.2s linear;
	background: #161616;
}

.hover span::before,
.hover span::after {
	content   : "";
	width     : 2px;
	height    : 0;
	position  : absolute;
	transition: all 0.2s linear;
	background: #161616;
}

.hover:hover::before,
.hover:hover::after {
	width: 100%;
}

.hover:hover span::before,
.hover:hover span::after {
	height: 100%;
}

.hover::before,
.hover::after {
	transition-delay: 0.2s;
}

.hover span::before,
.hover span::after {
	transition-delay: 0s;
}

.hover::before {
	right: 0;
	top  : 0;
}

.hover::after {
	left  : 0;
	bottom: 0;
}

.hover span::before {
	left: 0;
	top : 0;
}

.hover span::after {
	right : 0;
	bottom: 0;
}

.hover:hover::before,
.hover:hover::after {
	transition-delay: 0s;
}

.hover:hover span::before,
.hover:hover span::after {
	transition-delay: 0.2s;
}

/*********************************/

header .header {
	/* style of sticky header */

	position          : fixed;
	z-index           : 110;
	top               : 0;
	width             : 100%;
	height            : 80px;
	background-color  : transparent;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

header .header.active {
	background-color  : #fff;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

header.opened .header.active {
	background-color: transparent;
	opacity         : 1;
}

header.home .logo_header {
	opacity           : 0;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

header.home .header.active .logo_header {
	opacity           : 1;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

header .logo_header {
	position: absolute;
	top     : 10px;
	left    : 35px;
}

header .logo_header img {
	height: 60px;
	width : auto;
}

header .OrderOnline_header {
	position: absolute;
	top     : 0;
	right   : 80px;
}

header .OrderOnline_header a {
	/* header order Online btn */
	font-size      : 3rem;
	font-family    : 'Franklin';
	color          : #f7a51d;
	padding        : 19px;
	display        : inline-block;
	position       : relative;
	text-decoration: none;
}

header .OrderOnline_header a:after {
	content           : '';
	background-color  : #fff;
	position          : absolute;
	right             : 0;
	top               : 0;
	bottom            : 0;
	left              : 100%;
	z-index           : -1;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

header .OrderOnline_header a:hover:after {
	left              : 0;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

header .hamburger {
	/* menu button style on mobile */

	width           : 80px;
	height          : 80px;
	position        : fixed;
	top             : 0;
	right           : 0;
	padding         : 25px;
	z-index         : 5161616;
	cursor          : pointer;
	background-color: #fff;
}

header .hamburger .line {
	/* each line of menu button style */

	width             : 30px;
	height            : 3px;
	background-color  : #161616;
	display           : block;
	margin            : 5px auto;
	-webkit-transition: all 0.2s ease;
	-o-transition     : all 0.2s ease;
	transition        : all 0.2s ease;
	border-radius     : 2px;
}

header .hamburger .line:nth-child(2) {
	/* each line of menu button style */

	width             : 20px;
	margin-right      : 0px;
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition     : all 0.1s ease-in-out;
	transition        : all 0.1s ease-in-out;
}

header .hamburger:hover .line:nth-child(2) {
	/* each line of menu button style */

	width             : 30px;
	-webkit-transition: all 0.4s ease-in-out;
	-o-transition     : all 0.4s ease-in-out;
	transition        : all 0.4s ease-in-out;
}

header .hamburger.is-active {
	-webkit-transition: all 0.2s ease;
	-o-transition     : all 0.2s ease;
	transition        : all 0.2s ease;
}

header .hamburger.is-active .line:nth-child(1) {
	/* first line of menu button when actived */

	-webkit-transform: translatey(8px) rotate(-45deg);
	-ms-transform    : translatey(8px) rotate(-45deg);
	-o-transform     : translatey(8px) rotate(-45deg);
	transform        : translatey(8px) rotate(-45deg);
}

header .hamburger.is-active .line:nth-child(2) {
	/* second line of menu button when actived */
	width             : 0;
	-webkit-transition: all 0s ease;
	-o-transition     : all 0s ease;
	transition        : all 0s ease;
}

header .hamburger.is-active .line:nth-child(3) {
	/* third line of menu button when actived */

	-webkit-transform: translatey(-9px) rotate(-45deg);
	-ms-transform    : translatey(-9px) rotate(-45deg);
	-o-transform     : translatey(-9px) rotate(-45deg);
	transform        : translatey(-9px) rotate(45deg);
}

/**********************************************************************************************************************/
.overlay {
	position          : fixed;
	top               : 0;
	left              : 0;
	width             : 100%;
	height            : 100%;
	opacity           : 1;
	visibility        : hidden;
	-webkit-transition: opacity .35s, visibility .35s, width .35s;
	transition        : opacity .35s, visibility .35s, width .35s;
	z-index           : 50;
}

.overlay:before {
	content           : '';
	background        : #fff;
	left              : -55%;
	top               : 0;
	width             : 50%;
	height            : 100%;
	position          : absolute;
	-webkit-transition: left .35s ease;
	transition        : left .35s ease;
}

.overlay:after {
	content           : '';
	background        : #fff;
	right             : -55%;
	top               : 0;
	width             : 50%;
	height            : 100%;
	position          : absolute;
	-webkit-transition: all .35s ease;
	transition        : all .35s ease;
}

.overlay.open {
	opacity   : .93;
	visibility: visible;
	height    : 100%;
}

.overlay.open:before {
	left: 0;
}

.overlay.open:after {
	right: 0;
}

.overlay.open li {
	-webkit-animation      : fadeInRight .3s ease forwards;
	animation              : fadeInRight .3s ease forwards;
	-webkit-animation-delay: .15s;
	animation-delay        : .15s;
}

.overlay.open li:nth-of-type(2) {
	-webkit-animation-delay: .20s;
	animation-delay        : .20s;
}

.overlay.open li:nth-of-type(3) {
	-webkit-animation-delay: .25s;
	animation-delay        : .25s;
}

.overlay.open li:nth-of-type(4) {
	-webkit-animation-delay: .30s;
	animation-delay        : .30s;
}

.overlay.open li:nth-of-type(5) {
	-webkit-animation-delay: .35s;
	animation-delay        : .35s;
}

.overlay.open li:nth-of-type(6) {
	-webkit-animation-delay: .40s;
	animation-delay        : .40s;
}

.overlay.open li:nth-of-type(7) {
	-webkit-animation-delay: .45s;
	animation-delay        : .45s;
}

.overlay.open li:nth-of-type(8) {
	-webkit-animation-delay: .50s;
	animation-delay        : .50s;
}

.overlay.open li:nth-of-type(9) {
	-webkit-animation-delay: .55s;
	animation-delay        : .55s;
}

.overlay nav {
	position         : relative;
	height           : 70%;
	top              : 50%;
	-webkit-transform: translateY(-55%);
	transform        : translateY(-55%);
	font-size        : 3rem;
	font-weight      : 400;
	text-align       : center;
	z-index          : 100;
}

.overlay ul {
	list-style: none;
	padding   : 0;
	margin    : 0 auto;
	display   : inline-block;
	position  : relative;
	height    : 100%;
}

.overlay ul li {
	display   : block;
	height    : calc(100% / 9);
	min-height: 30px;
	position  : relative;
	opacity   : 0;
}

.overlay ul li a {
	position       : relative;
	display        : inline-block;
	color          : #fff;
	text-decoration: none;
	overflow       : hidden;
	font-size      : 3rem;
	color          : #161616;
	text-transform : uppercase;
}

.overlay ul li:last-child a {
	background-color: #f7a51d;
}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		left   : 20%;
	}

	100% {
		opacity: 1;
		left   : 0;
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		left   : 20%;
	}

	100% {
		opacity: 1;
		left   : 0;
	}
}

img {
	width: 100%;
}

.no-padding {
	padding: 0;
}

/************************************* Home section **********************************************/
#Home main {
	padding-top: 0;
}

#Home #intro {
	position          : relative;
	-webkit-transition: all 450ms ease-in-out;
	-moz-transition   : all 450ms ease-in-out;
	-ms-transition    : all 450ms ease-in-out;
	-o-transition     : all 450ms ease-in-out;
	transition        : all 450ms ease-in-out;
	overflow          : hidden;
}

#Home #intro .slider {
	position: relative;
}

#Home #intro .slider .slide {
	position          : absolute;
	z-index           : 1;
	opacity           : 0;
	left              : 0;
	right             : 0;
	top               : 0;
	bottom            : 0;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition   : all 500ms ease-in-out;
	-ms-transition    : all 500ms ease-in-out;
	-o-transition     : all 500ms ease-in-out;
	transition        : all 500ms ease-in-out;
}

#Home #intro .slider .slide.active {
	opacity           : 1;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition   : all 500ms ease-in-out;
	-ms-transition    : all 500ms ease-in-out;
	-o-transition     : all 500ms ease-in-out;
	transition        : all 500ms ease-in-out;
}

#Home #intro .container-fluid {
	position: absolute;
	bottom  : 20%;
	z-index : 2;
	left    : 0;
	right   : 0;
}

#Home #intro .sliderText {
	text-align: center;
	color     : #fff;
}

#Home #intro .sliderText .btn_action {
	background-color: #f7a51d;
	color           : #000;
}

#Home #intro .control {
	position          : absolute;
	top               : 50%;
	z-index           : 3;
	display           : flex;
	justify-content   : center;
	align-items       : center;
	-webkit-transform : translateY(-50%);
	-moz-transform    : translateY(-50%);
	-ms-transform     : translateY(-50%);
	-o-transform      : translateY(-50%);
	transform         : translateY(-50%);
	font-size         : 3.5rem;
	color             : #000;
	height            : 5rem;
	width             : 5rem;
	border-radius     : 50%;
	background-color  : #f7a51d;
	cursor            : pointer;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

#Home #intro .control:hover {
	-webkit-transform : translateY(-50%) scale(1.2);
	-moz-transform    : translateY(-50%) scale(1.2);
	-ms-transform     : translateY(-50%) scale(1.2);
	-o-transform      : translateY(-50%) scale(1.2);
	transform         : translateY(-50%) scale(1.2);
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

#Home #intro .control.prev {
	left: 5%;
}

#Home #intro .control.next {
	right: 5%;
}

/*****************************************************************/
#Home #OurStory {
	background: #161616;
}

#Home #OurStory .padding {
	padding: 35px 15px;
}

#Home #OurStory .btn_parent {
	text-align: center;
}

#Home #OurStory .btn_parent .btn_action {}

/*****************************************************************/
#Home #OurMenu {}

#Home #OurMenu .social {
	background-color: #0e0e0e;
	position        : relative;
}

#Home #OurMenu .social .center {
	position       : absolute;
	z-index        : 1;
	top            : 0;
	left           : 0;
	right          : 0;
	bottom         : 0;
	padding        : 20px;
	text-align     : center;
	display        : flex;
	justify-content: center;
	align-items    : center;
}

#Home #OurMenu .social .SocialMedia {
	list-style     : none;
	display        : flex;
	justify-content: center;
	padding        : 0;
	margin-bottom  : 20px;
}

#Home #OurMenu .social .SocialMedia li {
	margin-right: 10px;
}

#Home #OurMenu .social .SocialMedia li:last-child {
	margin: 0;
}

#Home #OurMenu .social .SocialMedia li a {
	display           : flex;
	justify-content   : center;
	align-items       : center;
	font-size         : 25px;
	background-color  : #fff;
	border-radius     : 50%;
	padding           : 0;
	height            : 40px;
	width             : 40px;
	color             : #060c3c;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition   : all 300ms ease-in-out;
	-ms-transition    : all 300ms ease-in-out;
	-o-transition     : all 300ms ease-in-out;
	transition        : all 300ms ease-in-out;
}

#Home #OurMenu .social .SocialMedia li a:hover {
	color             : #fff;
	background-color  : #f7a51d;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition   : all 300ms ease-in-out;
	-ms-transition    : all 300ms ease-in-out;
	-o-transition     : all 300ms ease-in-out;
	transition        : all 300ms ease-in-out;
}

#Home #OurMenu [class*='col-'] {
	padding: 0;
}

#Home #OurMenu a {
	display : block;
	position: relative;
	overflow: hidden;
}

#Home #OurMenu a .fixed {
	position: absolute;
	top     : 0;
	left    : 0;
	right   : 0;
	bottom  : 0;
}

#Home #OurMenu a .bar img {
	-webkit-transition: all 800ms ease-in-out;
	-moz-transition   : all 800ms ease-in-out;
	-ms-transition    : all 800ms ease-in-out;
	-o-transition     : all 800ms ease-in-out;
	transition        : all 800ms ease-in-out;
}

#Home #OurMenu a:hover .bar img {
	-webkit-transform : scale(1.3);
	-moz-transform    : scale(1.3);
	-ms-transform     : scale(1.3);
	-o-transform      : scale(1.3);
	transform         : scale(1.3);
	-webkit-transition: all 5s ease-in-out;
	-moz-transition   : all 5s ease-in-out;
	-ms-transition    : all 5s ease-in-out;
	-o-transition     : all 5s ease-in-out;
	transition        : all 5s ease-in-out;
}

#Home #OurMenu a.btn_action {
	display: inline-block;
}

/***************************************************************************************/
#Home #OrderOnline {
	padding: 5% 0;
}

#Home #OrderOnline .center-flex {
	display        : flex;
	justify-content: center;
	align-items    : center;
}

#Home #OrderOnline .title,
#Home #OrderOnline .text {
	color: #000;
}

#Home #OrderOnline .box-black {
	background-color   : #161616;
	padding            : 20px 45px 35px;
	background-image   : url(https://jasminsandwich.ca/img/Home/HCP_Web_Index_Phone.png);
	background-position: bottom right;
	background-repeat  : no-repeat;
	background-size    : auto 90%;
	margin-top         : -15vw;
	position           : relative;
	z-index            : 2
}

#Home #OrderOnline .box-black .btn_action {
	display: inline-block;
	color  : #fff;
	border : 1px solid #fff;
}

/******************************************************************************/
#Home #ContactInfo {
	color: #fff;
}

#Home #ContactInfo .data {
	position: relative;
}

#Home #ContactInfo .info {
	background-image   : url(../img/Home/JS_ContactUs.jpg);
	background-size    : cover;
	background-repeat  : no-repeat;
	background-position: center center;
	display            : flex;
	justify-content    : flex-start;
	align-items        : center;
	padding            : 5% 35px;
}

#Home #ContactInfo .container-fluid .row {
	display  : flex;
	direction: rtl;
}

#Home #ContactInfo .container-fluid .row * {
	direction: ltr;
}

#Home #ContactInfo .tel {
	text-decoration: none;
	display        : inline-block;
	color          : #fff;
	margin-bottom  : 35px;
	font-size      : 2.8rem;
}

#Home #map {
	height: 100%;
}

/************************************* Frittas Page **********************************************/
#Menu .intro {
	position: relative;
}

#Menu .intro .content {
	position       : absolute;
	top            : 0;
	bottom         : 0;
	left           : 0;
	right          : 0;
	display        : flex;
	align-items    : center;
	justify-content: center;
}

#Menu .intro .content .text {
	color     : #000;
	margin-top: 15px;
	text-align: center;
}

#Menu #items .row [class*='col-'] {
	padding : 0;
	overflow: hidden;
}

#Menu #items .brownback {
	background-color: #2b1713;
}

#Menu #items .grayback {
	background-color: #413833;
}

#Menu #items .item .pic,
#Menu #items .item .decription {
	position          : absolute;
	top               : 0;
	left              : 0;
	right             : 0;
	bottom            : 0;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition   : all 500ms ease-in-out;
	-ms-transition    : all 500ms ease-in-out;
	-o-transition     : all 500ms ease-in-out;
	transition        : all 500ms ease-in-out;
}

#Menu #items .item .decription {
	opacity          : 0;
	display          : flex;
	justify-content  : center;
	align-items      : center;
	-webkit-transform: translateY(-100%);
	-moz-transform   : translateY(-100%);
	-ms-transform    : translateY(-100%);
	-o-transform     : translateY(-100%);
	transform        : translateY(-100%);
}

#Menu #items .item:hover .decription {
	opacity          : 1;
	-webkit-transform: translateY(0);
	-moz-transform   : translateY(0);
	-ms-transform    : translateY(0);
	-o-transform     : translateY(0);
	transform        : translateY(0);
}

#Menu #items .item:hover .pic {
	opacity          : 0;
	-webkit-transform: translateY(100%);
	-moz-transform   : translateY(100%);
	-ms-transform    : translateY(100%);
	-o-transform     : translateY(100%);
	transform        : translateY(100%);
}

#Menu #items .item .decription .text {
	padding: 15px;
	cursor : default;
}

#Menu #Menus {
	background: #cbcbcb;
}

#Menu #Menus .texts {
	font-size: 3rem;
	color    : #161616;
	padding  : 15px 0;
}

#Menu #Menus .menus {
	text-align: center;
	display   : flex;
}

#Menu #Menus .menu {
	padding           : 60px 0 20px;
	text-transform    : uppercase;
	overflow          : hidden;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

#Menu #Menus .menu:hover {
	background        : #f7a51d;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition   : all 200ms ease-in-out;
	-ms-transition    : all 200ms ease-in-out;
	-o-transition     : all 200ms ease-in-out;
	transition        : all 200ms ease-in-out;
}

#Menu #Menus .menu a {
	opacity           : 0;
	-webkit-transform : translateY(100%);
	-moz-transform    : translateY(100%);
	-ms-transform     : translateY(100%);
	-o-transform      : translateY(100%);
	transform         : translateY(100%);
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition   : all 500ms ease-in-out;
	-ms-transition    : all 500ms ease-in-out;
	-o-transition     : all 500ms ease-in-out;
	transition        : all 500ms ease-in-out;
}

#Menu #Menus .menu:hover a {
	opacity           : 1;
	-webkit-transform : translateY(0);
	-moz-transform    : translateY(0);
	-ms-transform     : translateY(0);
	-o-transform      : translateY(0);
	transform         : translateY(0);
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition   : all 500ms ease-in-out;
	-ms-transition    : all 500ms ease-in-out;
	-o-transition     : all 500ms ease-in-out;
	transition        : all 500ms ease-in-out;
}

#Menu #Menus .name {
	font-size         : 4rem;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition   : all 500ms ease-in-out;
	-ms-transition    : all 500ms ease-in-out;
	-o-transition     : all 500ms ease-in-out;
	transition        : all 500ms ease-in-out;
}

#Menu #Menus .menu:hover .name {
	-webkit-transform : translateY(-20px) scale(0.8);
	-moz-transform    : translateY(-20px) scale(0.8);
	-ms-transform     : translateY(-20px) scale(0.8);
	-o-transform      : translateY(-20px) scale(0.8);
	transform         : translateY(-20px) scale(0.8);
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition   : all 500ms ease-in-out;
	-ms-transition    : all 500ms ease-in-out;
	-o-transition     : all 500ms ease-in-out;
	transition        : all 500ms ease-in-out;
}

#Menu #Menus .text {
	color: #161616;
}

/************************************* Contact Page **********************************************/
#Contact {}

#Contact #Background .title {
	position  : absolute;
	left      : 0;
	right     : 0;
	bottom    : 10%;
	text-align: center;
}

#Contact #Form,
#About #Story {
	background: #feeecd;
	padding   : 10% 0;
}

#Contact #Form #contact-form {
	background-image   : url(../img/Contactus/JS_Contactus1.jpg);
	background-size    : cover;
	background-repeat  : no-repeat;
	background-position: center center;
	padding            : 50px;
}

#About #Story .box {
	background-image   : url(../img/Contactus/JS_Contactus1.jpg);
	background-size    : cover;
	background-repeat  : no-repeat;
	background-position: center center;
	padding            : 20px;
}

#About #Story .box img {
	width: 250px;
}

#About #Story .box .text {
	color  : #161616;
	padding: 0 8px;
}

#Contact #Form #contact-form .title {
	color: #161616;
}

#Contact .btn_action {
	border: none;
}

#Contact #answer {
	height: 30px;
}

#Contact .align {
	text-align: right;
}

#Contact #Data {
	background-image   : url(../img/Contactus/JS_Contactus2.jpg);
	background-size    : cover;
	background-position: center center;
	background-repeat  : no-repeat;
}

#Contact #Data .box {
	padding   : 25px 15px;
	text-align: center;
}

#Contact #Data h3.title {
	font-size: 5rem;
	color    : #f7a51d;
}

#Contact #Data table {
	width: 100%;
}

#Contact #Data td {
	color     : #fff;
	font-size : 2rem;
	text-align: left
}

#Contact #Data .tel {
	text-decoration: none;
	display        : inline-block;
	color          : #fff;
	margin-bottom  : 35px;
	font-size      : 2.8rem;
}

#Contact #map {
	height: 500px;
}

/**************************************************/
footer,
.copyright {
	background-color: #0e0e0e;
	padding         : 25px 0 15px;
	color           : #fff;
}

footer a,
footer a:hover,
.copyright a,
.copyright a:hover {
	color: #fff;
}

@media (max-width: 993px) {
	header.home .logo_header {
		opacity           : 1;
		-webkit-transition: all 200ms ease-in-out;
		-moz-transition   : all 200ms ease-in-out;
		-ms-transition    : all 200ms ease-in-out;
		-o-transition     : all 200ms ease-in-out;
		transition        : all 200ms ease-in-out;
	}
}

@media (max-width: 1200px) {
	#Home #intro .container-fluid {
		bottom: 5%;
	}

	#Menu .intro .content .text {
		font-size: 1.8rem;
	}

	#Menu #Menus .name {
		font-size: 3rem;
	}

	#Menu #Menus .texts {
		font-size: 2rem;
	}

	#Menu #Menus .text {
		font-size: 1.8rem;
	}

	#Menu #Menus .btn_action {
		padding  : 8px 16px;
		font-size: 2.1rem;
	}

	#Menu #items .item .decription .text {
		font-size: 2rem;
	}

	#Contact #map {
		height: 350px;
	}
}

@media (max-width: 992px) {
	.title {
		font-size: 5rem;
	}

	.text {
		font-size: 2rem;
	}

	.btn_action {
		font-size: 2.2rem;
	}

	#Home #intro .sliderText .btn_action {
		font-size: 2rem;
	}

	#Home #ContactInfo .container-fluid .row {
		display  : block;
		direction: ltr;
	}

	#Home #ContactInfo #map {
		height: 350px;
	}

	#Contact #Form,
	#About #Story {
		padding: 0;

	}

	#Contact #Form #contact-form,
	#About #Story .box {
		margin: auto -15px;
	}

	#Contact #Data table {
		width : 300px;
		margin: auto;
	}

	#Contact #Form #contact-form,
	#About #Story .box {
		padding: 15px 30px;
	}

	#Menu .intro .content {
		position        : relative;
		background-color: #2b1713;
		padding         : 30px 15px;
	}

	#Menu .intro .content .text {
		color: #fff;
	}

	#Menu #items .item .decription {
		position         : relative;
		opacity          : 1;
		-webkit-transform: none;
		-moz-transform   : none;
		-ms-transform    : none;
		-o-transform     : none;
		transform        : none;
	}

	#Menu #items .brownpic {
		background-image   : url(../img/Mobile/JS_TraditionalSandwiches_Back_Mobile.jpg);
		background-repeat  : no-repeat;
		background-size    : cover;
		background-position: center center;
	}

	#Menu #items .yellowpic {
		background-image   : url(../img/Mobile/JS_TraditionalSandwiches_Back2_Mobile.jpg);
		background-repeat  : no-repeat;
		background-size    : cover;
		background-position: center center;
	}

	#Menu #items .graypic {
		background-image   : url(../img/Mobile/JS_Burger_Back_Mobile.jpg);
		background-repeat  : no-repeat;
		background-size    : cover;
		background-position: center center;
	}
}

@media (max-width: 768px) {
	#About #Story .box img {
		width: 190px;
	}

	#Contact #Form #contact-form,
	#About #Story .box {
		padding: 10px 20px;
	}

	#Home #OrderOnline .center-flex {
		display: block;
	}

	.overlay ul li a {
		font-size: 2.5rem;
	}
}

@media (max-width: 480px) {
	#Home #OurMenu .social .center {
		position: relative;
	}

	#Home #intro .title {
		font-size: 4rem;
	}

	#Home #intro .text {
		font-size: 1.8rem;
	}

	#Home #intro .control {
		display: none;
	}

	#Home #OurMenu .social .im {
		display: none;
	}

	#Home #intro .sliderText .btn_action {
		font-size: 2rem;
	}

	#About #Story .box img {
		width: 150px;
	}

	.overlay ul li a {
		font-size: 2rem;
	}
	.wth-50-md {
		width: 67%;
		margin-top  : 1em;
		margin-left : auto;
		margin-right: auto;
	}

	.pos-center {
		display           : flex;
		flex-direction    : column;
		/* justify-content: center; */
		align-items       : center;
	}
}

.downapp {
	background: #2b1713;
	padding   : 5em 0;
}

@media screen and (min-width:992px) {
	.wth-50-md {
		width     : 50%;
		margin-top: 1em;
	}

	.flt-right {
		float: right;
	}
}

@media screen and (min-width:750px) and (max-width:992px) {
	.wth-50-md {
		width: 50%;
		margin-top  : 1em;
		margin-left : auto;
		margin-right: auto;
	}
	.pos-center {
		display           : flex;
		flex-direction    : column;
		/* justify-content: center; */
		align-items       : center;
	}

}
.txt-trns{
	text-transform: none !important;
}

/***************  Modal Styles  *******************/

.modal-new {
	/* Hidden by default */
  
	position: fixed;
	/* Stay in place */
  
	z-index: 114;
	/* Sit on top */
  
	padding-top: 0em;
	/* Location of the box */
  
	left: 0;
  
	top: 0;
  
	width: 100%;
	/* Full width */
  
	height: 100%;
	/* Full height */
  
	overflow: hidden;
	/* Enable scroll if needed */
  
	background-color: rgb(0, 0, 0);
	/* Fallback color */
  
	background-color: rgb(180 180 180 / 53%);
	/* Black w/ opacity */
  
	z-index: 10052999999 !important;
  
	box-shadow: 20px 20px 20pxx #212529;
}
.modal-close {
  margin: auto;
  position: relative;
  top: 1em;
  z-index: 99;
}
.modal-content1 {
  background-color: white;
  display: block;
  text-align: center;
  margin: auto;
  width: 1024px;
  height: 768px;
  margin-top: 5%;
  position: relative !important;
  background-image: url('https://jasminsandwich.ca/img/Popup/JasminSandwich_Website_PopUp_1024x768.jpg');
  background-size: cover;
}
.map-wrapper {
  width: 100%;
  height: 547px;
}
.modal-context {
  position: absolute;
  bottom: 3%;
  width: 100%;
}
.modal-context a.btn__order_our-menu {
  padding: 1.1rem 1.25rem !important;
  width: 14.5rem;
}
.modal-context a.btn__order_our-menu:hover {
  background-color: black;
}
.padd-md-0 {
	padding-bottom: -1% !important;
	margin-bottom: 0 !important;
	margin-top: 0%;
}
.close1 {
	float: right;
	-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;
	width: 5.5% !important;
	position: absolute;
	top: 2%;
	right: 20px;
    font-size: 3.5em;
    /* font-weight: 700; */
    /* color: black !important; */
    -webkit-text-fill-color: black;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: white;
}
.blurmain {
	filter: blur(50px);
	-webkit-filter: blur(20px);
	z-index: 2;
}
.btn-popup {
	border-radius: 5px;
	padding: 1rem 3.5rem !important;
	margin-bottom: 1%;	
	background-color: black;
	color: white;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.c2 {
	color: black; 
	font-size: 20px;
}

@media (min-width: 1280px) and (max-width: 1366px) {
	.modal-content1 {
	  width: 878px;
	  height: 657px;
	}
}
@media (max-height: 750px) and (max-width: 1285px) {
	.modal-content1 {
		margin-top: 2.5%;
	}
}
@media (max-height: 780px) and (max-width: 1030px) {
	.modal-content1 {
		background-color: white;
		display: block;
		margin: auto;
		width: 45%;
		height: 80%;
		margin-top: 5%;
		position: relative !important;
		text-align: center;
		background-image: url('https://jasminsandwich.ca/img/Popup/JasminSandwich_Website_PopUp_M_1024x768.jpg');
		background-size: 100% 100%;	
	}
	.btn-popup {
		margin-bottom: 2%;	
		padding: 0.8rem 5.5rem !important;
   		width: unset;
   		font-size: 1.85rem;
	}
	.modal-context {
		bottom: 2%;
	}
}
@media screen and (min-width: 992px) {
	.modal-content1 .hidden-md {
	  display: none;
	}
  }
@media screen and (max-width: 992px) {
	.modal-content1 .hidden-xs {
	  display: none;
	}
	.modal-close {
	  top: 0em;
	}
  }
@media (max-width: 850px) {
  .modal-content1 {
    background-color: white;
    display: block;
    margin: auto;
    width: 86%;
    height: 65%;
    margin-top: 10%;
    position: relative !important;
    text-align: center;
    background-image: url('https://jasminsandwich.ca/img/Popup/JasminSandwich_Website_PopUp_M_1024x768.jpg');
    background-size: 100% 100%;
  }
  .modal-context {
    bottom: 2%;
  }
  .modal-context a.btn__order_our-menu {
    padding: 0.8rem 0.9rem !important;
    width: 11.5rem;
    margin-bottom: -1rem;
  }
}
@media (min-height: 1020px) and (max-width: 850px) {
	.modal-content1 {
		width: 75%;
		height: 67.3333333%;
	}
	.btn-popup {
		margin-bottom: 2%;	
	}
	.modal-context {
		bottom: 3%;
	}
}
@media (max-height: 820px) and (min-height: 750px) and (max-width: 850px) {
	.modal-content1 {
		height: 53%;
		margin-top: 25%;
	}
}
@media (max-height: 670px) and (max-width: 850px) {
	.modal-content1 {
		height: 66%;
		margin-top: 15%;
	}
	.btn-popup {
		margin-bottom: 2%;	
	}
}
@media (max-width: 480px) {
	.btn-popup {
		padding: 0.4rem 3.5rem !important;
   		width: unset;
    	margin-bottom: 0.5rem;
   		font-size: 1.7rem;
	}
	.c2 {
		color: black; 
		font-size: 14px;
	}
}
  
@media (max-width: 366px) {
	.modal-content1 {
	  background-color: white;
	  display: block;
	  margin: auto;
	  width: 95%;
	  height: 68%;
	  margin-top: 15%;
	  position: relative !important;
	  text-align: center;
	  background-image: url('https://jasminsandwich.ca/img/Popup/JasminSandwich_Website_PopUp_M_1024x768.jpg');
	  background-size: 100% 100%;
	}
	.modal-context {
	  bottom: 0.5%;
	}
	.modal-context a.btn__order_our-menu {
	  padding: 0.7rem 0.7rem !important;
	  width: 11.5rem;
	  margin-bottom: -1rem;
	}
  }
  @media (max-width: 300px) {
	.modal-content1 {
	  height: 62%;
	  margin-top: 20%;
	}
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */