

/*
 * author: Premier Japanese
 * template: Premier Japanese 
 * version: v1.1
 * url: http:/

*/

/*====================================================
01. CSS Reset
02. Basic Document Styles
03. HEADER
04. MENU
05. Hero IMG
06. HEADER Title for each of SECTION
07. Premier sushi - section
08  STEP - section 
09. Gallery - Section 
10. Catering
11. CONTACT - section / end wrapper 
12. Footer - Section
13. Animations
14. SCROLL UP
15. othermenu - section
16. 404 error 

font-family: 'Windsor Elongated', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Oswald Regular', sans-serif;
font-family: 'Oswald Stencil', sans-serif;
                                                

====================================================*/

/*====================================================
01. CSS Reset
====================================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@import url(https://fonts.googleapis.com/css?family=Poiret+One|Lobster|Anton|Shadows+Into+Light|Open+Sans|Roboto|Orbitron|Oswald|Raleway|Montserrat|Roboto+Slab|Indie+Flower|Fjalla+One|Bree+Serif|Pacifico|Abril+Fatface);
                

:root {
  --main-color: #E8212A;
  /* bg colors */
  --bg-dark: #0B0C0D;
  --bg-light: #F7F7F7;
  --bg-gray: #ECECEC;
  --bg-blue: #f1f5f9;
  --color-dark: #1D2231;
  /* text colors */
  --text-grey: #8390A2;
  --text-gray: #8d8985;
  --text-red: #ff3d00; #EB2026;
  --text-red2: #c04444;
  --text-black: #0B0C0D;
  --text-black2: #2d2c2b;
}

:root {
  --white:#fff;
  --black:#000;
  --darker:#2E2E2E;
  --dark:rgb(0 0 0 / 60%);
  --light:rgb(0 0 0 / 40%);
  --sand: #dbd4cc;
  --sand2:#D7D0C8;
  --taupe:#9F978D;
  --earth:#98887C;
  --fog:#A19999;
  --sage:#98968C;
}

:root {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

* {
  box-sizing:border-box;
  -webkit-font-smoothing:inherit
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}
a {
  background-color: transparent;
  text-decoration: none;
}
img {
  border: 0;
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
svg:not(:root) {
  overflow: hidden;
}

dl,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
ul {
  font-size: 1em;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}
ol,
ul {
  list-style: none;
}

i,
span,
a {
  display: inline-block; }

svg {
  overflow: visible;
}

embed,
iframe,
object,
video {
  max-width: 100%;
  width: 100%;
  margin: 0;
  line-height: 1;
  border: none;
}

small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*====================================================
02. Basic Document Styles
====================================================*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
	
}

:after,
:before {
  box-sizing: border-box;
  margin: 0; }

html {
  scroll-behavior: smooth; }

img {
  max-width: 100%;
  max-height: 100%; }
  
/*
body {
  font-family: 'Poppins', sans-serif;
	font-size: 1rem;
  	color: #0B0C0D;
}*/


body {
  color: #333;
  font-size: 1rem;
  line-height: 1.5;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  font-family: 'Poppins', sans-serif;
}


/* --------------------------------------------------------------
/* background & border - SCREENS
-------------------------------------------------------------- */
/*
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
*/

/* bg color */
.bg-primary {
  background-color:var(--sand)
}

.bg-secondary {
  background-color:var(--taupe)
}
.bg-third {
  background: #f2f2f2;#f2f5f7;
}
.bg-fourth {
  background: #d9d9d9;
}
.bg-five {
  background: #e5e5e5;
}
.bg-grey {
  background: #8390A2;
}
.bg-white {
  background: #FFFFFF;
}
.bg-blue {background: #f1f5f9;}

.border-t-1 {
  border-top-width: -1px;
  border-top-style: solid;
}
.border-b-1 {
  border-bottom-width: 2px;
  border-bottom-style: solid;  
}

.border-primary {
  border-color:var(--black)
}
.border-secondary {
  border-color: rgba(0,0,0,.1);
}

.border-transparent {
  border-color:transparent
}
.border-inverse {
  border-color:var(--sand)
}

.container {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

main {
  margin-top: 85px;
  padding: 2rem 1.5rem;
  background: #f1f5f9;
  min-height: calc(100vh - 90px);
}

/*===== CONTAINER =====*/
.u-wrap {
  padding-right:2.5rem; 
  padding-left: 2.5rem; 
  margin-right: auto;
  margin-left: auto;
  max-width: 1080px;
  width: 100%;
}
.u-wrap .u-wrap {
  padding-right: 0;
  padding-left: 0;
}

.-wrapper {
  margin-left:auto;
  margin-right:auto;
  width:100%; 
}
.-wrapper--pad {
  padding-left:20px;
  padding-right:20px
}
.-wrapper--1 {
  max-width:1520px
}
.-wrapper--1.-wrapper--pad {
  max-width:1560px
}

.z-index--0 {
  z-index:0!important
}
/*
.section{
  padding: 5.5rem 0 1rem;
}
*/
::-webkit-input-placeholder {
  color:unset
}
::-moz-placeholder {
  color:unset
}
:-ms-input-placeholder,
::-ms-input-placeholder {
  color:unset
}
::placeholder {
  color:unset
}

/*====================================================
03. HEADER
====================================================*/

/* NAV - section 
------------------------------------------------- */
.nav-bar-wrapper {
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;20px;
  padding-bottom: 10px;20px;
  display: flex; border-bottom: 1px solid rgba(0, 0, 0, .04);
}

/*nav-main*/
.main-container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3vw;
  padding-right: 3vw; 
}

/* logo text */
.site-name {
  letter-spacing: .5px;
  font-family: Neue Montreal, sans-serif;
  font-weight: 700;
  line-height: 1em;
}

@media screen and (max-width: 479px) { 
  .site-name {
    letter-spacing: .5px;
	font-family: Neue Montreal, sans-serif;
	font-weight: 700;
	line-height: 1em;
	max-width: 100px;
  }
}

.logo-wrapper {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.logo-link {
  padding-top: 0px;
  padding-bottom: 0px;
  text-decoration: none;
}

.nav-btn {
  grid-column-gap: 8px;
  cursor: pointer;
  border-radius: 20px;
  align-items: center;
  padding: 8px 16px;
  text-decoration: none;
  display: flex;
}

.nav-btn:hover, .nav-btn.current {
  text-decoration: underline;
}

/*  Desktop menu
========================================== */
li span.toggle {
  margin-left: 0.5em;
  margin-top: 5px; 
}
.toggle2 {
  margin-left: 0.5em;
  margin-top: 5px; 
}

.nav-btn:hover, .nav-btn.current {
  text-decoration: underline;
}
.nav-btn:hover, .nav-btn.current {
  text-decoration: underline;
}

ul.top-menu{ list-style: none; }

.top-menu li{
  display:inline-block;
  cursor:pointer;
}

.top-menu li a{
	/*
  display: block;
  padding: 10px 20px;
*/  
  grid-column-gap: 8px;
  cursor: pointer;
  align-items: center;
  padding: 8px 16px 0 16px;
  text-decoration: none;
  display: flex; 
}
	
.top-menu li a.active,
.top-menu li a:hover{ text-decoration: underline;}


/* Dropdown */
.top-menu  li.dropdown{  position: relative; }


.top-menu li.dropdown li:not(:last-child) { padding-bottom: 0px; }
.top-menu li.dropdown li:nth-child(5) { padding-bottom: 20px;}	



ul.dropdown-menu{
  position: absolute;
  min-width: 120px;
  background-color: #FFF;
  border-radius: 16px; 
  box-shadow: 0 12px 16px -4px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(16, 24, 40, .03) ; 
}

ul.dropdown-menu li{
  display: block !important;
  white-space: nowrap;
  padding: 8px 16px 0 16px; 
}

/* Sub Dropdown */
ul.dropdown-menu ul.dropdown-menu{
  left: 100%;
  top: 0;
  color: #a1a1a1;
  background-color: var(--bg-gray);
  box-shadow: 2px 0 -5px rgba(75, 75, 75, .07); 
  border-radius: 0 16px 16px 0;
}
ul.dropdown-menu ul.dropdown-menu li:not(:last-child) { margin-bottom: 0; }
ul.dropdown-menu ul.dropdown-menu li:last-child { margin-bottom: 15px; }


/* Display none by Default */
ul.dropdown-menu{
  display: none;
}

/*  lOGO
========================================== */
.logo-symbol {
  max-width:140px; 24px;
  width: 140px;
  left: 0;
  position: absolute;
  top: 0;
}


/*  Menu - button icon
========================================== */
.nav-btn.menu-trigger {
  grid-column-gap: 16px;
  align-items: center;
  display: flex;
}

.menu-trigger-icon {
  grid-column-gap: 16px;	
  align-items: center;
  display: flex;
}

.nav-btn.close-menu {
  border-radius: 20px;
  position: absolute;
  top: 13px;
  bottom: auto;
  left: 16px;
  right: 0;
  left: 62%;
}


.menu-trigger-label {
/*display: none;*/
  opacity: 1;
}

/*  OVERLAY
========================================== */
.backdrop {
  z-index: 20;
  background-color: rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  align-items: flex-start;
  padding-bottom: 6px;
  display: none;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.backdrop.show{
  display: block;
  opacity: 1;
}

/*  MOBILE - MENU
========================================== */	
.menu-drawer--btn-group {
  lex-direction: column;
  align-items: flex-end;
  display: flex; 
}

.mobile-menu-positioner {
  z-index: 30;
  position: fixed;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.mobile-menu-parent {
  position: relative; 
}

.slide-menu {
  width: 100%;
  max-height: 98vh;
  max-width: 450px;
  grid-row-gap: 40px;
  background-color: #fff;
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin: 8px;
  padding: 100px 60px;
  position: absolute;
  top: 8px;
  right: -12px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -ms-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	   scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

.slide-menu.show { 
  opacity: 1;
  visibility: visible;
  right: 0;
}

.slide-menu > div::-webkit-scrollbar {
  width: 15px;
  background-color: #1e1e27;
}
.slide-menul > div::-webkit-scrollbar-thumb {
  width: 5px;
  border-radius: 99em;
  background-color: #95a3b9;
  border: 5px solid #F00;1e1e27;
}

.hide-script {
  display: none;
}

.nav-bar {
  z-index: 10;
  background-color: #fff;
  position: fixed;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

/* will replace*/
.svg-icon {
  display: flex;
}

.svg-icon.rotate90 {
  transform: rotate(90deg);
}

.menu-drawer--btn-group {
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.mobile-menu--btn-group--header {
  grid-column-gap: 8px;
  flex-direction: row;
  align-items: center;
  margin-top: 40px;
  padding-bottom: 8px;
  padding-right: 12px;
  display: flex;
  color: #a1a1a1;  
}

.hide-on-desktop {
  display: none;
}

.hide-on-mobile {
  display: flex;
}

.hide-on-logo {
  display: flex;
}

/*  NAV
========================================== */
.menu ul {
  width: 100%;text-transform: none;
}
.menu ul li{
  grid-column-gap: 8px;
  cursor: pointer;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  text-decoration: none;
  font-weight: 500; 
  font-size: 1.2rem;
  margin-bottom: 2px

}
.menu ul li a{
  max-width: 100%;
  display: flex;  
}

/*  
	Navigation Menu - Dropdown submenu
========================================== */

.menu .has-children:hover{
  cursor:hand;
}

.menu .has-children {
  position: relative;
  border-bottom: 0px solid #c6c1ba;
}


.menu .has-children li { 
  color: #a1a1a1;
  text-transform: none;	
  font-size: 1rem;
}

.menu .children ul li:last-child { border-bottom: 1px solid #c6c1ba;  }

.menu .has-children:after {
  position: absolute;
  right: 0;
  top: 7px;
  content: "+";
  display: block;
  font-size: 20px;
  font-weight: 700; 
  color: #2a2a2a;
}

.slide-menu .has-children.opened:after {
  content: "-";
  color: #2a2a2a;
}

/* submenu first level of second sub item */
.menu .children {
  display:none;
  width: 100%;   
}

.menu .children ul{ 
  padding: 0 0 5px 5px;
}

.menu ul li ul { width: 100%; }

.menu .children li > ul li a {
  align-items: center;
  padding: 5px 0;	
  font-weight: 500;
  text-shadow:none; 
  color: var(--text-black2);
  letter-spacing: -.02em;
  font-family: "Oswald", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 400;	    
  text-transform: none;
}

.menu .mini-text {
  font-size:0.95rem;  
  align-items: center;
  font-weight: 400;
  text-shadow:none;
  margin-left: 0rem;
  line-height: 1.45;
  color: #2a2a2a;
}

.menu .sub-text {
  font-size: 0.95rem;  
  align-items: center;
  font-weight: 500;
  text-shadow:none;
  margin-left: 0rem;
  line-height: 1.45;
  color: var(--darker);
}

/* submenu first level of  open/close icon */
.menu ul li .children .has-children:after {
  position: absolute;
  right: 0;
  top: 6px;	
  content: "+";
  display: block;
  font-size: 20px;
  font-weight: 700; 
  color:  var(--text-black);
}
.menu ul li .children .has-children.opened:after {
  content: "-";
  color: var(--text-black);
}

/* Active menu link
---------------------------------------------*/
.menu .children a:hover, .menu .children a.active,
.menu .children a:hover, .menu .has-children a.active,
.menu ul li a:hover, .menu ul li a.active {
  text-decoration: underline;
}

@media screen and (min-width: 1440px) {
  .main-container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .nav-btn.menu-trigger {
    position: relative;
  }
}

@media screen and (max-width: 991px) {
  .main-container {
    flex: 1;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .nav-bar-wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
  }  

/*
  .slide-menu {
    display: block;
  }
*/
  .hide-on-mobile {
    display: none;
  }

  .hide-on-desktop {
    display: block;
  }

}

@media screen and (max-width: 767px) {
  .close-icon {
    flex: none;
    margin-top: 4px;
  }

  .hide-on-logo {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .logo {
    height: 32px;
  }

  .padding-top-regular {
    margin-top: 2rem;
  }

  .slide-menu {
    width: auto;
    margin: 8px;
    padding-left: 20px;
    padding-right: 20px;
    position: fixed;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: 0%;
  }

  .menu-trigger-label {
    /*display: none;*/
	opacity: 0;
  }
  .menu-trigger-label.close {
    /*display: none;*/
	opacity: 1;
  }  

  .heading {
    letter-spacing: .25px;
    font-size: 1.6rem;
    line-height: 1.1em;
  }

  .heading.large {
    font-size: 2.5rem;
  }

}

/*====================================================
06. HEADER Title for each of SECTION
====================================================*/

.h1 {
  letter-spacing: 0;
  font-size: 3rem;
  line-height: 1;
  font-family: Helvetica,sans-serif;
  text-transform: uppercase;
  hanging-punctuation: force-end; 
  margin-bottom: 25px; 
  margin-top: 3rem;
}
.h1 b{color: var(--sage) }

h1,h2,h3,h4,h5,h6 {font-family: "Oswald", sans-serif;}
h1 {
  color: #111;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1.2;
}

h2 {
  color: #111;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 6.5rem;
  font-weight: 900;
  line-height: 1.2
}

h3 {
  color: #111;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2
}

h4 {
  color: #111;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3
}

h5 {
  color: #111;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.4
}

h6 {
  color: #111;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4
}

@media screen and (max-width:991px) {
  h1 {
    font-size: 3.5rem
  }
  h2 {
    font-size: 3.25rem
  }
  h3 {
    font-size: 2.75rem
  }
}
@media screen and (max-width:767px) {
  h1 {
    font-size: 2.5rem
  }
  h2 {
    font-size: 2.25rem
  }
  h3 {
    font-size: 2rem
  }
  h4 {
    font-size: 1.75rem;
    line-height: 1.4
  }
  h5 {
    font-size: 1.5rem
  }
  h6 {
    font-size: 1.25rem
  }
}
@media screen and (max-width:479px) {
  h1 {
    font-size: 2.5rem
  }
}

/* ------------------------------------------------------------------- 
 * Heading text - section 
 * ------------------------------------------------------------------- */
.heading-text {
  font-family: Inter-Regular, sans-serif;
  letter-spacing: -.55rem;
  cursor: default;
  font-size: 6rem;
  line-height: 1.1;
  position: relative;
  left: -.5rem;
  font-weight: 400;
  text-transform:none;
  color: var(--text-black);
}

.center {
  text-align: center;
  left: 0;
}

.center.split-left {
  width: 95%;
  height: 100%;
  color: var(--white);
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.center.split-right {
  width: 100%;
  height: 100%;
  color: var(--white);
  align-items: center;
  display: flex;
}

@media screen and (min-width: 1280px) {
  .heading-text {
    letter-spacing: -.5vw;
    font-size: 6vw;
  }

  .split-left {
    text-align: right;
  }

  .split-right {
    text-align: left;
  }

  .column-text-row {
    grid-column-gap: 3.5vw;
    grid-row-gap: 3.5vw;
  }

  .column-text-heading {
    letter-spacing: -.2vw;
    font-size: 2.5vw;
  }

}

@media screen and (max-width: 991px) {
  .xlarge-heading-text {
    font-size: 15rem;
  }
}

@media screen and (max-width: 767px) {
  .xlarge-heading-text {
    letter-spacing: -1rem;
    font-size: 10rem;
  }
}

@media screen and (max-width: 479px) {
  .heading-text {
    letter-spacing: -.15rem;
    font-size: 2.5rem;
  }
  .xlarge-heading-text {
    letter-spacing: -.7rem;
    font-size: 5.5rem;
  }
}

.font-32 {
  font-size: 32px;
  line-height: 44px;
}

@media (max-width: 1020px) {
  .font-32 {
	font-size: 22px;
	line-height: 30px;
  }
}

.location .heading-text.center.split-right { color: black ;}
.location .font-32 {
  font-size: 22px;
  line-height: 44px;
  margin: 0px 0;
}

@media (max-width: 1020px) {
  .location .font-32 {
    font-size: 20px;
	line-height: 30px;
  }
}

/*====================================================
07. Premier sushi - section
====================================================*/

@media only screen and (max-width: 47.9375rem) {
  #about {
    padding-top: 70px; } 
}

.containerWrapper {
  overflow: hidden; }

.sectionWrapper {
  padding-top: 50px;
  padding-bottom: 50px;
}

@media only screen and (min-width: 48rem) {
  .sectionWrapper {
    padding-top: 75px;
    padding-bottom: 75px; 
  } 
}

@media only screen and (min-width: 64rem) {
  .sectionWrapper {
    padding-top: 100px;
    padding-bottom: 100px; }
}

/*====================================================
08.1 STEP - section 
====================================================*/

/*=============== .section REUSABLE CSS CLASSES ===============*/
.section{
  padding: 5.5rem 0 1rem;
}

.grid{
  display: grid;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px){

}

/* For medium devices */
@media screen and (min-width: 576px){
	
}


/* For large devices */
@media screen and (min-width: 992px){
  .container{
    margin-left: auto;
    margin-right: auto;
  }
  .section{
    padding: 8rem 0 1rem;
  }
}

/*=============== BREAKPOINTS ===============*/
/* For large devices */
@media screen and (min-width: 992px){
  .container{
    margin-left: auto;
    margin-right: auto;
  }

  .section{
    padding: 8rem 0 1rem;
  }
  .section__title,
  .section__title-center{
    font-size: var(--h1-font-size);
  }

}

/*====================================================
13. Animations
====================================================*/
.headerBox {
  animation: fadeIn 0.3s ease-in both; 
  animation-delay: 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }
  to {
	opacity: 1;
	transform: translate3d(0, 0, 0);
  }
}

/*====================================================
14. SCROLL UP
====================================================*/
.scrollup{
  position: fixed;	
  border-radius: 5px 0 0 5px;
  bottom: 60px;
  color: #ffffff;
  font-size: 10px;
  padding: 12px 0;
  height: 60px;
  line-height: 1.5;
  right: 0;
  z-index: 10;
  text-align: center;
  width: 35px;
  font-weight: 700;
  box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.15);
  text-transform: uppercase;	
  background-color: var(--text-black2);
  -webkit-border-radius: 3px;
	 -moz-border-radius: 3px;
	  	  border-radius: 3px;
  -webkit-transform: translateY(40px);
	 -moz-transform: translateY(40px);
	  -ms-transform: translateY(40px);
		o-transform: translateY(40px);
		  transform: translateY(40px);
	 -webkit-transition: all .6s ease;
	    -moz-transition: all .6s ease;
		 -ms-transition: all .6s ease;
		  -o-transition: all .6s ease;
			 transition: all .6s ease;	
}

.scrollup__icon{
  font-size: 18px;
  display: block;
}

.scrollup:hover{
  color:#fff;
  opacity: 0.7;
          -moz-opacity: 0.7;
       -webkit-opacity: 0.7;
  filter: alpha(opacity=70);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.scrollup > svg {
  margin-bottom: -0.15rem;
}

/* Show Scroll Up*/
.show-scroll{
  -webkit-transform: translateY(-20px);
	 -moz-transform: translateY(-20px);
	  -ms-transform: translateY(-20px);
	   -o-transform: translateY(-20px);
		  transform: translateY(-20px);
			opacity: 1;
	   -moz-opacity: 1;
	-webkit-opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

@media only screen and (max-width: 640px) {
  .scrollup {
	right: 0;
  }
  .show-scroll {
   	bottom: 5px;
  }	
}
/*
@media only screen and (max-width: 480px) {
  .scrollup {
	opacity: 0;
	-moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0); 	}
}
*/

/*====================================================
13. Footer - Section
====================================================*/
.footer-section {
  color: #fff;
  background-color: #111;
}

.footer_top-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
}

.footer_left-wrapper {
  flex-direction: column;
  align-items: flex-start;
  margin-top: 5px;
  display: flex
}

.footer_logo-link {
  margin-bottom: 2rem;
  padding-left: 0
}
.footer_link {
  text-align: center;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s
}

.footer_link:hover {
  color: #344054
}

.footer_right-wrapper {
  flex-direction: column;
  display: flex
}

.footer_bottom-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  display: flex
}

.footer-link {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  align-items: flex-end;
  display: flex;
  position: relative; 
}
.footer-text-link {
  font-size: 1.15rem; 
  margin-right: 0rem;
  transition: color .25s;
}

.footer-text-link:hover {
  color: #7a7a7a
}

.btn_arrow{
  margin: auto 0;
  top: 0;
  bottom: 0.1em;
  position: relative;
  width:15px;
  height:15px; 
  -ms-transform-origin:bottom left;
  transform-origin:bottom left;
  transition:opacity .2s cubic-bezier(.165,.84,.44,1)
}

.btn_arrow path {
  fill:#7a7a7a;
}

.footer-text-link{
  transition: color .25s
}
.footer-link:hover .btn_arrow path{ 
  fill:#7a7a7a;
  transition: color .25s
}
.footer-text-link:hover {
  color: #7a7a7a; 
}


@media screen and (max-width:991px) {
  .footer_top-wrapper {
    grid-row-gap: 3rem;
    text-align: center;
    flex-direction: column-reverse;
    grid-template-columns: 1fr;
    align-items: center;
    display: flex
  }
}

@media screen and (max-width:767px) {
   .footer_top-wrapper {
     grid-row-gap: 2.5rem
   }
   .footer_link:hover {
     color: #667085
   }
   .footer_bottom-wrapper {
     flex-direction: column-reverse;
     align-items: flex-start
   }
   .footer_legal-list {
     margin-bottom: 1rem
   }
   .heading-large.text-color-white.footer-right {
     font-size: 6rem
   }	
}

@media screen and (max-width:479px) {
  .footer_top-wrapper {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    text-align: left;
    flex-direction: column-reverse;
    align-items: flex-start
  }
  .footer-link {
    grid-column-gap: 11px;
    grid-row-gap: 11px
  }
  .footer-text-link {
	margin-right: 0rem;
  }
  .heading-large.text-color-white.footer-right {
    letter-spacing: .01em;
    font-size: 3.7rem
  }
}

/*====================================================
13. FOODS - Swiper slider
====================================================*/

.u-comp-def--1 {
  color:#f5f5f5;
  overflow:hidden;
  padding-bottom: 4rem;
}
.u-comp-def--1,
.u-comp-def--2 {
  display:block;
  font-size:0;
  position:relative;
  width:100%
}
.u-comp-def--2 {
  background-color:#f5f5f5;
  color:#050505
}
.u-comp-def--3,
.u-comp-def--4 {
  color:#f5f5f5;
  display:block;
  font-size:0;
  overflow:hidden;
  position:relative;
  width:100%
}
.u-comp-def--4 {
  background-color:#050505;
  margin-top:-265px
}
.u-comp-def--5 {
  background-color:#95e0ea;
  color:#050505;
  display:block;
  font-size:0;
  overflow:hidden;
  position:relative;
  width:100%
}
.u-img-def--1 {
  top:0;
  left:0;
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
.c--1 { color: var(--text-grey); }
.-bg--1 {  background-color:transparent }

.u-hidden {
  display:none!important;
  visibility:hidden!important
}
.u-wrapper {
  margin-left:auto;
  margin-right:auto;
  width:100%
}
.u-wrapper--pad,
.u-wrapper--pad-nav {
  padding-left:4.5vw;
  padding-right:4.5vw
}
.u-wrapper--1 {
  max-width:1440px
}
.u-wrapper--2 {
  max-width:1540px
}
-z-index--2 {
  z-index:2!important
}
.u-z-index--1 {
  z-index:1!important
}
.u-z-index--0 {
  z-index:0!important
}

@media (min-width:1231px) {
  .u-wrapper--pad {
    padding-left:80px;
    padding-right:80px
  }
  .u-wrapper--pad-nav {
    padding-left:40px;
    padding-right:40px
  }
}
@media (min-width:1024px) and (max-width:1230px) {
  .u-wrapper--pad {
    padding-left:40px;
    padding-right:40px
  }
  .u-wrapper--pad-nav {
    padding-left:20px;
    padding-right:20px
  }

}

/* --------------------------------------------------------------
/* Our Foods - image slick-slider@Home page
-------------------------------------------------------------- */
	
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;

  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  -webkit-touch-callout: none;
     -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
.no-scroll {
  overflow: hidden; }

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor; }

.center-image, .card__background img {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  object-fit: cover;
 }

.slick-slide {
  padding: 2em .5em; }

.card-slider1,
.card-slider2,
.card-slider13,
.card-slider {
  margin: auto;
  width: 100%;
}

.card_slider-button { margin-top: 1.25rem; margin-bottom:0;}

/*---- prev, next button - controls -----*/
.card-controls {
  bottom: 0;
  position: absolute;
  right: 0;
  display: flex;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:row;
  flex-direction:row;
  -ms-flex-align:center;
  align-items:center; 	
}

.card-controls span {
  border: 2px solid #fff;
  border-radius: 2px;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-pack:center;
  justify-content:center;
  width: 45px;
  height: 45px;   
}
.card-controls span:nth-of-type(1) {
   margin-left: 20px;
}

.card-controls span:nth-of-type(2) {
   margin-left: 15px;
}

.card-controls svg {
  top: 0;
  bottom: 5px;
}
  
.card-controls svg stoke {fill: white; }
.card-controls svg:hover path { fill:var(--text-grey); }
  
.card-controls span:hover {
  border: 2px solid var(--text-grey);	
  cursor: default;
  opacity: 1;
  -webkit-transition: all .6s ease;
     -moz-transition: all .6s ease;
  	  -ms-transition: all .6s ease;
	   -o-transition: all .6s ease;
		  transition: all .6s ease;	
}

@media (max-width: 999px) {
  .card-controls {
    position: relative;
    bottom: -10px;
	left: -20px;
	height: auto;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;	
  }
}

.foods-controls {
  right:0;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:row;
  flex-direction:row;
  margin-bottom: 2.5rem;
  margin-top: -10px;
  align-items:flex-end;   
}

.foods-controls span:nth-of-type(1) {
   margin-left: 7px;
}

.foods-controls span:nth-of-type(2) {
   margin-left: 10px;
}

/*
[type="button"] {
  position: fixed;
  top: 102%;
  left: 20px;
  z-index: 10;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border: 0;
  text-indent: -9999px;
  background-color: black;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: 0.9;
  transform: translateY(-50%);
  transition: all 0.25s ease;
}

.slick-next {
  left: 82px;
  position: absolute;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jaGV2cm9uLXJpZ2h0PC90aXRsZT48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTUuNzA2IDExLjI5NGwtNi02Yy0wLjM4Ny0wLjM4Ny0xLjAyNS0wLjM4Ny0xLjQxMyAwcy0wLjM4NyAxLjAyNSAwIDEuNDEzbDUuMjk0IDUuMjk0LTUuMjk0IDUuMjk0Yy0wLjM4NyAwLjM4Ny0wLjM4NyAxLjAyNSAwIDEuNDEzIDAuMTk0IDAuMTk0IDAuNDUgMC4yOTQgMC43MDYgMC4yOTRzMC41MTMtMC4xIDAuNzA2LTAuMjk0bDYtNmMwLjM5NC0wLjM4NyAwLjM5NC0xLjAyNSAwLTEuNDEzeiI+PC9wYXRoPjwvc3ZnPg==);
}

.slick-prev {
  left: 10px;
  position: absolute;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jaGV2cm9uLWxlZnQ8L3RpdGxlPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0xMC40MTMgMTJsNS4yOTQtNS4yOTRjMC4zODctMC4zODcgMC4zODctMS4wMjUgMC0xLjQxM3MtMS4wMjUtMC4zODctMS40MTMgMGwtNiA2Yy0wLjM4NyAwLjM4Ny0wLjM4NyAxLjAyNSAwIDEuNDEzbDYgNmMwLjE5NCAwLjE5NCAwLjQ1IDAuMjk0IDAuNzA2IDAuMjk0czAuNTEzLTAuMSAwLjcwNi0wLjI5NGMwLjM4Ny0wLjM4NyAwLjM4Ny0xLjAyNSAwLTEuNDEzbC01LjI5NC01LjI5NHoiPjwvcGF0aD48L3N2Zz4=);
}
*/
/*
.slick-arrow{
  top: 97%;
  left: 20px;
  z-index: 10;
  transition: all 0.25s ease;
  border:1px solid var(--text-grey);
  border-radius: 100%;
  color:transparent;
  cursor:pointer;
  overflow:hidden;
  position:relative;
  width: 45px;
  height: 45px;
  text-indent:-999px;
  transition:all .6s ease;
  -ms-transform-origin:center;
  transform-origin:center; 
}



.slick-arrow:hover {
  background-color: var(--text-grey);
}

.slick-next {
  left: 72px;
  position: absolute;
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='16' fill='none' viewBox='0 0 23 16'%3E%3Cpath stroke='%23444' stroke-width='2' d='M21.043 7.81H.201M14.032.8l7.2 7.2-7.2 7.2'/%3E%3C/svg%3E") no-repeat 50%/17px 12px;
}

.slick-prev {
  left: 10px;
  position: absolute;
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='16' fill='none' viewBox='0 0 23 16'%3E%3Cpath stroke='%23444' stroke-width='2' d='M21.043 7.81H.201M14.032.8l7.2 7.2-7.2 7.2'/%3E%3C/svg%3E") no-repeat 50%/17px 12px;
}

.slick-prev{
  -ms-transform:rotate(-180deg);
  transform:rotate(-180deg)
}
*/

.food-grid {
  max-width: 100%;
  position: relative;
  justify-content: center; 
}

.food_grid-wrapper {
  padding-bottom: 87px;
}

.food_grid-content {/*
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:row;
  flex-direction:row;
  -ms-flex-pack:center;
  justify-content:center;*/
  
  display:-ms-inline-flexbox;
  display:inline-flex;
  -ms-flex-direction:row;
  flex-direction:row;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  column-gap:32px;
  row-gap:50px;
}


/* hover => background white */
.food-grid .food_grid-wrapper .food_grid-content .grid-item {
  background-color:#f5f5f5;
  color: #050505;
  /*max-width:402px;*/
  width: 402px;
}

.food-grid .food-item {
  font-size:20px;
  font-size:1.25rem;
  -ms-flex:0 0 auto;
  flex:0 0 auto;
  border-radius: 15px;15px;
  overflow:hidden;
  position:relative;
  max-width: 452px;
}

/* ocntent info */
.food-item .food_item-content {
/*
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:row;
  flex-direction:row;
  column-gap:34px;
  min-height: 556px;
  padding:30px; 
*/	
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:row;
  flex-direction:row;
  column-gap: 1px;
  min-height: 550px;
  padding: 30px 0 30px 30px;    
/*
  justify-content: space-between;
  align-items: center;*/
}

.food-item .food_item-content .food_item-background {
  top:0;
  right:0;
  bottom:0;
  left:0;
  position:absolute;
  z-index:2;
  width:100%;
  height:100%;
  pointer-events:none;
  background-color:#050505;
  transition:all .3s ease-in-out;
}

.food-item .food_item-content .food_item-background .food_item-image {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.95);  
}

/* hover */
.food-item .food_item-content:hover .food_item-content-left .food_item-title .food_name {
  color:#050505
}

.food-item .food_item-content:hover .food_item-background {
  opacity:0;
}
/* food left */
.food_item-content-left {
  -ms-flex-item-align:start;
  align-self:flex-start;
  z-index:3; 
}
.food_item-content-left {
  /*min-width:75px*/
  min-width: 76px; 
}

.food_item-content-left .food_item-title h3 {
  font-family: 'Oswald' ;
  letter-spacing:.0125em;
  line-height:.75em;
  text-transform:uppercase;
  color:#f5f5f5;
  transition:all .3s ease-in-out; 
  font-size: 3rem;
  text-shadow: -15px 10px 20px rgb(206, 208, 211, .5); /*#ced0d3;*/
}

.food_item-content-left .food_item-title .food_name {
	/*
  -ms-writing-mode:tb-lr;
  writing-mode:vertical-lr;
  -ms-transform:rotate(180deg);
  transform:rotate(180deg)*/
}

.food-item .food_item-content .food_item-content-right {
	/*
  -ms-flex-item-align:end;
  align-self:flex-end;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  row-gap: 26px;
  z-index:1	
	*/
  -ms-flex-item-align:end;
  align-self:flex-end;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  row-gap: 26px;
  z-index:1; 
  padding-right: 20px; 
}

.food_item-content-right .food_item-description .description {
  font-family:Quicksand,sans-serif;
  font-weight:400;
  line-height:1.5em
}
.food_item-content-right .food_item-link {
  display:-ms-flexbox;
  display:flex
}
.food_item-content-right .food_item-link .food_link {
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:row;
  flex-direction:row;
  -ms-flex-align:center;
  align-items:center;
  column-gap:3px;
  padding-bottom:8px;
  border-bottom:1px solid var(--text-grey);
  transition:border-color .4s ease
}
.food_item-content-right .food_item-link .food_link:hover {
  border-color:#050505
}
.food_item-content-right .food_item-link .food_link .btn_label {
  font-family:Space Grotesk,sans-serif;
  font-weight:400;
  text-transform:uppercase
}
.food_item-content-right .food_item-tabs {
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:row;
  flex-direction:row;
  column-gap:5px;
  row-gap:5px;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
}
.food_item-content-right .food_item-tabs .food_item-tab {
  font-weight:400;
  text-transform:uppercase;
  padding:7px 10px;
  border:1px solid #050505;
  border-radius:70px
}

.food_item-content-left .food_item-title {
  font-size:calc(80px + 37 * ((100vw - 420px) / 1020));
  font-size:calc(5rem + 37 * ((100vw - 26.25rem) / 1020))
}
.food_item-content-right .food_item-description .description {
  font-size:calc(10px + 2 * ((100vw - 420px) / 1020));
  font-size:calc(.625rem + 2 * ((100vw - 26.25rem) / 1020))
}
.grid-item .btn_label {
  font-size:calc(9px + 1 * ((100vw - 420px) / 1020));
  font-size:calc(.5625rem + 1 * ((100vw - 26.25rem) / 1020))
}
.food_item-content-right .food_item-tab {
  font-size:calc(9px + 3 * ((100vw - 420px) / 1020));
  font-size:calc(.5625rem + 3 * ((100vw - 26.25rem) / 1020))
}

@media (max-width: 1203px) {
  .food-item .food_item-content {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:row;
    flex-direction:row;
    column-gap: 1px;
    min-height: 426px;
    padding: 30px 0 30px 30px;     	
  }	
}
@media (max-width:992px) {
  .food-item .food_item-content {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction: row;
    flex-direction: row;
    column-gap: 1px;
    min-height: 425px;
    padding: 30px 0 30px 30px;   	
  }
  .food-item .food_item-content .food_item-content-right {
	margin-top: 2rem;
	max-width: 425px;
  } 
  .grid-item .food_item-content-left {
    min-width:55px;
  }
}

/* 767px*/
@media (max-width: 860px) {
  .food-item {
    max-width:calc(100vw - 80px); 
  }

  .food-grid .food_grid-wrapper .food_grid-content {
    -ms-flex-pack:center;
    justify-content:center;
  }
   
  .food-item .food_item-content {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction: column;
    flex-direction: column;
    column-gap: 1px;
    min-height: 425px;
    padding: 30px 0 30px 30px;   	
  }	
	
  .food-grid .food_grid-wrapper .food_grid-content .grid-item {
    max-width: 342px;342px;
    min-height:420px
  }
  .food-grid .food_grid-wrapper .food_grid-content .grid-item .food_item-content {
    min-height:405px; 
  }
  .grid-item .food_item-content-left {
    /*min-width:55px*/
  }

}

@media (max-width: 600px) {
  .food-grid .food_grid-wrapper .food_grid-content {
    -ms-flex-pack:center;
    justify-content:center;
    justify-content: space-between;
    align-items: center;	
  }	
  .food-item .food_item-content {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction: row;
    flex-direction: row;
    column-gap: 1px;
    min-height: 425px;
    padding: 30px 0 30px 30px;   	
  }
  
  .food-grid .food_grid-wrapper .food_grid-content .grid-item {
    max-width: 502px;342px;
    min-height:420px
  }   
	
}

@media (max-width:479px) {
  .food-item .food_item-content {
    padding:10px 22px 22px 14px;
    column-gap:22px;
    min-height:357px;
    padding:20px
  }
 
  .food_item-tab {
    padding:5px 8px
  }
}


@media screen and (max-width:420px) {
  .food-item .food_item-content {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction: column;
    flex-direction: column;
  } 
   .food_item-title {
    font-size:80px
  }
   .company_description {
    font-size:10px
  }
  .grid-item .btn_label,
  .grid-item .food_item-tab {
    font-size:9px
  }

}


@media (min-width:768px) and (max-width:960px) { }

/* --------------------------------------------------------------
/* =Our LOCATIONS @HOME PAGE
-------------------------------------------------------------- */
.location-head {
  text-align:center;
  margin-bottom: 3rem;
}
.heading-location {
  text-align:center;
  white-space:nowrap;
  word-break:normal;
  margin-top:0;
  margin-bottom: 8px;
  font-size: 4.25vw;
  font-weight: 600;
  line-height:100%
}

.container-location {
  grid-column-gap:80px;
  grid-row-gap:80px;
  grid-template-rows:auto;
  grid-template-columns:1fr 2fr;
  grid-auto-columns:1fr;
  align-items:end;
  display:block  
}

.location-wrapper {
  grid-column-gap:8px;
  grid-row-gap:8px;
  border-bottom: 1px solid var(--darker);magenta;
  color:var(--darker);
  background-color:transparent;
  flex-direction:column;
  grid-template-rows:auto;
  grid-template-columns:1fr 1.5fr;
  grid-auto-columns:1fr;
  align-items:flex-start;
  padding:0;
  display:flex; 
}
.div-block-4 {
  grid-column-gap:8px;
  grid-row-gap:8px;
  align-items:center;
  display:flex;  
  color: #9A9A9A;
}
.div-block-4 { margin-bottom: 8px;}

.div-block-4 > div {
  /*color:#181820; */
  font-size: 1.15rem; 
  font-weight: 400;
  line-height:1;
}
.location-image {
  width:30vw;
  height:37.5vw;
  /*background-image:url('');*/
  background-position:50%;
  background-size:cover;
  border-radius:20px;
  position:-webkit-sticky;
  position:sticky;
  bottom:5rem;
  left:0%;
  right:auto
}
.hide-mobile-landscape .location-image {
  border-radius:20px;
  overflow:hidden
}

.padding-xxl {
  padding:5rem;
}

.section-location.padding-xxl {
  padding-top: 0;
}

.location-item-3 {
  padding-left:33vw;
  position:static
}
.location-list-4 {
  position:relative
}

.div-block {
  width:30vw;
  height:100%;
  flex-direction:column;
  justify-content:flex-end;
  display:flex;
  position:absolute;
  top:auto;
  bottom:0%;
  left:0%;
  right:auto;
}

.location-hover {
  width:100%;
  grid-column-gap:8px;
  grid-row-gap:8px;
  border-bottom: 0px solid var(--text-black);
  background-color:transparent;
  flex-direction:column;
  grid-template-rows:auto;
  grid-template-columns:1fr 1.5fr;
  grid-auto-columns:1fr;
  align-items:flex-start;
  padding:52px 40px;
  display:flex;
}


.location-hover h4 {
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.45rem;
  font-size: 1.15rem;
  color:  var(--darker);
  transition: all .3s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover:hover) {

  .location-hover:hover {
    color: var(--black);
    text-decoration:underline;
  }

  .location-hover:hover {
    background-color: rgb(242, 245, 247, .8);
    transition: all .2s cubic-bezier(0.33, 1, 0.68, 1);
  }
  
}

@media screen and (max-width:991px) {
  .padding-xxl {
    padding:4rem
  }
}
@media screen and (max-width:767px) {
  .hide-mobile-landscape {
    display:none
  }
  .padding-xxl {
    padding:2.5rem
  }
  .container-location {
    grid-template-columns:1fr
  }
  .location-wrapper {
    grid-template-columns:1fr .75fr
  }
  .location-item-3 {
    padding-left:0
  }
  .location-hover {
    grid-template-columns:1fr .75fr;
    padding-left:20px;
    padding-right:20px
  }
  .location-hover:hover { background: transparent;}
 
}

@media screen and (max-width:479px) {
  .heading-location{ font-size: 6.25vw; }
  .padding-xxl {
    padding:1.25rem
  }
}

.location-item-3 .hide-mobile-landscape { 
  opacity: 0;
  transition: all 300ms ease;
  transition-delay: 300ms;  
}

.location-item-3:hover .hide-mobile-landscape{
  opacity: 1; 
  transition-delay: 0s;  
}

.page {
    display: block;
    color: inherit;
    transition: all .2s cubic-bezier(0.33, 1, 0.68, 1);
    padding-left: 5.34vw;
    padding-right: 24px;
    padding-top: 2em;
    padding-bottom: 2em;
	/*
    margin-top: -.1em;
    margin-bottom: -.1em;
	*/
	color: var(--text-black);
}

.page:before {
    content: '→';
	/*content: '→';*/
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-left: -2.4em;
    margin-top: -.2em;
    position: absolute;
    font-size: 1.4em;
    transition: all .3s cubic-bezier(0.33, 1, 0.68, 1);
}

.page:hover:before {
    margin-left: -2em;
    color: var(--text-grey);
}

@media (max-width: 960px) {
    .page {
        padding-left: 48px;
        padding-right: 48px;
    }

    .page:before {
        /* display: none; */
        margin-left: -1.6em;
    }

    .page:hover:before {
        margin-left: -1.6em;
    }
}

@media (max-width: 600px) {
    .page {
        opacity: .7;
        filter: grayscale();
        user-select: none;		
        padding-left: 28px;
        padding-right: 28px;		
    }
}

@media (max-width: 380px) {
    .page:before {
	  display: none;
	  padding-left: 0;
	  padding-right: 0;
	   margin-left: 0em;	
    }
	.location-hover {
	  padding-left: 0;
	  padding-right: 0;
	}
}

/* ------------------------------------------------------------------- 
 * Locations Page - section 
 * ------------------------------------------------------------------- */
.block-2 {
  clear:both;
  width:100%;
  display:block;
  position:relative;
  text-align:center;
}

.center--1 { 
  clear:both;
  float:none;
  width:100%;
  max-width:1560px;
  min-width:300px;
  padding:0;
  margin:0 auto;
  text-align:left;
  box-sizing: border-box;
  position:relative;
}

.locations {
  padding-top: 200px; 
  padding-bottom: 100px;
}

.locations h3 {
  font-weight: 300;
  font-size: 28px;
  text-transform: capitalize;
  line-height: 32px;
  letter-spacing: 0.02em;
  color: var(--text-black);
  margin-bottom: 5px;
}

.locations .list .item {
  display:flex;
  justify-content: space-between;
  padding:80px 0 60px;
  border-bottom: 1px solid #EAECF0;	
}

.locations .list .item:first-child {
  padding-top:0px;
}

.locations .list .item:last-child {
  border-bottom:0;
}

.locations .list .item .left {
  width:calc(100% - 770px - 50px); 
}

.locations .list .item .right {
  width:770px;
}

.locations .list .elems  {
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 20px 24px 20px 24px;
  position:relative; 
 	
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack:center;
  justify-content:center;
}

.locations .list .elems::before {
  content:'';
  display:block;
  position:absolute;
  left:0px;
  right:0px;
  top:0px;
  bottom:0px;
  border: 1px solid #EAECF0;
  transition: all 0.2s;
  border-radius: 16px; 
}

.locations .list .elems:hover::before {
  border: 3px solid #EAECF0;
}

.locations .list .elems:first-child { margin:0; }
.locations .list .item:last-child { }

.locations .list .elems .brick {
  box-sizing: border-box;
  border-right: 1px solid transparent;
  padding: 0;
  margin: 10px 0 0 24px;	
  position:relative; 
  max-width: 420px;
  bottom: 0;
  right: 24px; 
  width: 100%;
}

.locations .list .elems .brick--corner {
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-pack:end;
  justify-content:flex-end;	
  padding: 10px 0px 10px 0px;
}

.locations .list .elems .brick--corner a {
  display: block;
  position: relative;
  padding: 5px 20px;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 20px;
  background: transparent;
  border-radius: 16px;
  margin-top: 10px;
  transition: all 0.6s;
  color:var(--black;)	
  border-radius:9999px;
  white-space:nowrap;
  cursor:pointer;
  border: 1px solid var(--black);
}

.locations .list .elems .brick--corner a:first-child { margin-top: 0; }

.locations .list .elems .brick--corner a:hover{
  background-color:var(--black);
  color:var(--white);
}

/* view menu */
.locations .list .view-btn {
  margin-top: 10px;
}
.locations .underline-black .btn_label { 
  font-size: 1.2rem;
  color: var(--darker);
  font-weight: 600;
}

/* text styles */
.locations .list .elems .brick p {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #101828;	
}
.locations .list .elems .brick small {
  display:block;
  padding:8px 0 0 0;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.locations .list time {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-black2);
  margin: 16px 0 0 0;
  display:inline-block;
  padding-left: 28px;
  position:relative;
}

.locations time::before {
  content:'';
  display:block;
  position:absolute;
  left:0px;
  top:50%;
  width: 20px;
  height: 20px;
  margin:-10px 0 0 0;
  background: url("../img/clock.svg") no-repeat center center;
}

.locations time svg {
  position:absolute;
  left:0;
  top: 50%;
  margin:-10px 0 0 0;
}

.locations time b{ 
  color: var(--text-black2);
  margin-right: 10px;
}


@media screen and (max-width: 1780px) {
  .center--1 {
    width:1080px;
  }	
  .locations .list .item .left {
    width: calc(100% - 713px - 50px);  
  }
  .locations .list .item .right {
    width: 713px;
  }

  .locations .list .item {
    padding:60px 0;
  }
}


@media screen and (max-width: 1100px) {
  .center--1 {
    width:720px;
  }
  .locations {
    padding: 150px 0 100px;
  }	

  .locations .description {
    margin:0 auto;
    text-align:center;
  }
	
  .locations .list .item {
	flex-wrap: wrap;
  }
	
  .locations .list .item .left {
	width:100%;
	text-align:center;
	padding-bottom:32px;
  }
  .locations .list .item .right {
	width:100%;
  }
  .locations .list .elems:hover::before {
    border: 1px solid #EAECF0;
  }
}

@media screen and (max-width: 740px) {
  .center--1 {
    width:350px;
  }	

  .locations {
    padding: 100px 0 52px;
  }

  .locations .item h3 {
	padding: 0 0 12px 0;
	font-size: 28px;
	line-height: 150%;
	text-align: center;
  }
  .locations .list .item .elems  {
    display:inline-flex;
    -ms-flex-direction: column;
    flex-direction: column;	
  }
  
  .locations .list .item .right {
    width:100%;
  }
  .locations .list .item .left {
	width: 100%;
	margin-bottom: 0px;
  }	
		
  .locations .list .elems .brick {
	padding:12px 0px;
	margin: 0;
	left: 0;
  }
  .locations .list .elems .brick p {
	font-size: 12px;
	line-height:12px;	
  }

  .locations .list .elems .brick small {
	padding: 12px 0 0 0;
	font-size: 16px;
	line-height: 1.53rem;		
  }
	
  .locations .list .elems .brick time {
	margin: 12px 0 0 0;
	font-size: 14px;
	line-height: 20px;
	padding-left: 11px;
  }	
	
  .locations .list .elems .brick time::before {
	width: 8px;
	height: 8px;
	background-size:100% auto;
	margin:-4px 0 0 0;
  }	
  .locations .list .item {
	padding: 20px 0;
	border:none;
  }	
}

@media screen and (max-width: 380px) {
  .center--1 {
    width:300px;
  }	
  .locations .list .item {
    padding:20px 0;
	border:none; 
	margin: 0;	
	bottom: 0;
	right: 0; 
	left: 0; 
  }
  .locations .list .item .right {
    width:100%;
	padding: 0;
	margin: 0;
  }
  .locations .list .elems {
	padding: 20px 10px 20px 10px;
	margin: 0;	
	bottom: 1.5rem;
	right: 0; 
	left: 0; 		
  }
  .locations .list .elems::before, 
  .locations .list .elems:hover::before {
    border: none;
  }  
}

@media screen and (max-width: 320px) {
  .center--1 {
    width: 200px;
  }
  .locations .list .elems {
	padding: 0;
  }
  .locations .list .item {
    width: 90%;
	margin: 0;
	margin-left: 5px;
	margin-right: 5px;	
  }
} 
/* --------------------------------------------------------------
/* Modal - Delivery App @locations Page
-------------------------------------------------------------- */
/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: transparent; rgba(0,0,0, .5);
}

.modal > div{
  background-color: #1e1e27;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  padding: 1.25rem;
  border-radius: 8px;
  position: absolute;
  max-height: calc(100vh - 100px);
  width: 400px;
  max-width: calc(100vw - 2rem);
  bottom: calc(100% + 1rem);
  right: 0;
  overflow: auto;
  transform-origin: 100% 100%;
  color: #95a3b9; 
  right: 1rem;
  bottom: 1rem;
  margin-top: 2rem;
  color: #6b7280;
  display: flex;
  flex-direction: column; 

}

.modal > div::-webkit-scrollbar {
  width: 15px;
  background-color: #1e1e27;
}
.modal > div::-webkit-scrollbar-thumb {
  width: 5px;
  border-radius: 99em;
  background-color: #95a3b9;
  border: 5px solid #1e1e27;
}
.modal > div > * + * {
  margin-top: 0.75em;
}
.modal > div {
  animation-name: modalopen;
  animation-duration: 1.75s;
  animation: scale 0.25s ease;
}

@keyframes modalopen {
  from{opacity: 0}
  to {opacity: 1}
}

@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}


.modal-header h4 {
  margin: 0;
}

.modal-header {
  background: var(--text-grey); #d30404;
  padding: 15px;
  color: white;
}


.modal div pre {
  white-space: pre-line;
  border: 1px solid #95a3b9;
  border-radius: 6px;
  font-family: monospace;
  padding: 0.75em;

  font-size: 0.875rem;
  color: #fff;
}
.modal div pre .btn { 
  width: 100%;
  text-align: center;
}

.modal div pre .btn:hover,
.modal div pre .btn:focus {
  background: var(--text-grey);
}
.modal div pre .btn:last-child { margin-bottom: 0;} 

.closeBtn {
  color: #ccc;
  float: right;
  font-size: 1.875em;
  color: white;
}

.closeBtn:hover, 
.closeBtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.closeBtn.closeBtn2 {
  font-size: 1.25em;	
  margin-top: 0.5rem;
  border: 1px solid #fff;
  border-radius: 24px;
  align-items: center;
  padding: 10px 26px;
  line-height: 1em;
  text-decoration: none;
  transition: all .2s;
  display: flex;
  color: #FFF;
}

.closeBtn.closeBtn2:hover {
  background-color: #fff;
  color: #1b1b1b;
  border-color: #fff;
}

.closeBtn2:hover, .closeBtn2:focus {  cursor: pointer;}*/

/* --------------------------------------------------------------
/* =SMALL SCREENS
-------------------------------------------------------------- */

.work-list {
  display:block;
  font-size:16px;
  list-style-type:none;
  
}
@media (max-width:49.365em) {
  .work-list {
    font-size:17px;
    padding-bottom:100px
  }
}
.work-list a {
  align-items:flex-start;
  align-items:center;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  line-height:1;
  padding:25px 0;
  position:relative
}
.work-list a * {
  position:relative;
  z-index:2
}
.work-list a:after {
  background-color:#fff;
  border-radius:8px;
  bottom:-1px;
  content:"";
  left:-1px;
  left:-15px;
  opacity:0;
  position:absolute;
  right:-1px;
  right:-15px;
  top:-1px;
  transform:scaleY(.9) scaleX(.98);
  transition:transform .5s cubic-bezier(.19,1,.22,1),opacity .15s linear;
  z-index:1
}
@media (max-width:49.365em) {
  .work-list a {
    padding:20px
  }
}
@media (hover:hover) {
  .work-list a:hover:after {
    opacity:1;
    transform:scale(1)
  }
  .work-list a:hover .tag {
    background-color:#f2f1f1
  }
}

.work-list a+a {
  border-top:1px solid #0000001a
}
.work-list a img,
.work-list a svg {
  border-radius:8px;
  display:block;
  height:96px!important;
  overflow:hidden;
  width:96px!important
}
.work-list a sup {
  display:inline-block;
  font-size:11px;
  margin-top:1em;
  vertical-align:top
}
.work-list a p {
  font-size:16px;
  line-height:1.2;
  margin-top:3px;
  max-width:31em;
  opacity:.6
}
@media (max-width:49.365em) {
  .work-list a p {
    font-size:15px;
    margin-top:3px
  }
}
.work-list__text {
  padding:3px 0;
  width:calc(100% - 110px)
}

.work-pane {
  -webkit-backdrop-filter:blur(29px);
  backdrop-filter:blur(29px);
  background-color: rgb(232, 232, 233, 0.8);
  color:#181820;
  display:block;
  margin-top:10vh;
  min-height:100vh;
  position:relative;
  width:100%;
  z-index:1;
  
}
.work-pane:after {
  background-color:#181820;
  border-radius:10px;
  content:"";
  height:10px;
  left:10px;
  position:absolute;
  top:10px;
  width:10px
}
@media (max-width:49.365em) {
  .work-pane:after {
    display:none
  }
}
.work-pane:before {
  background-color:#181820;
  border-radius:10px;
  content:"";
  height:10px;
  position:absolute;
  right:10px;
  top:10px;
  width:10px
}
@media (max-width:49.365em) {
  .work-pane:before {
    display:none
  }
}
@media (min-width:49.375em) {
  .work-pane {
    margin-left:50%;
    padding:40px 25px;
    width:50%
  }
}

.js-work-list-item .hide-mobile-landscape { 
  opacity: 0;
  transition: all 300ms ease;
  transition-delay: 300ms;  
}
/*
.location-item-3:first-child .hide-mobile-landscape { 
  opacity: 1;
}
*/
.js-work-list-item:hover .hide-mobile-landscape{
  opacity: 1; 
  transition-delay: 0s;  
}


/*----- TAB --*/
.tag {
  background-color:#d7d2d2;
  border-radius:100px;
  display:inline-block;
  font-size:14px;
  line-height:1;
  margin-top:8px;
  padding:4.5px 8px 6px;
  transition:background .15s linear
}
@media (max-width:49.365em) {
  .tag {
    font-size:12px
  }
}
.tag.--no-padding {
  background-color:initial;
  font-size:12px;
  letter-spacing:.05em;
  margin-top:0;
  padding:0;
  text-transform:uppercase
}
@media (max-width:49.365em) {
  .tag.--no-padding {
    font-size:10px
  }
}
.tag.--lighter {
  background-color:#f2f1f1
}


/*--------------------------------------------------------------*/

.today {
    color: #8AC007;
}
/*--------------------------------------------*/

