@font-face {
    font-family: 'jj-header';
    src: url('../fonts/jj-header.woff2') format('woff2'),
        url('../fonts/jj-header.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'jj-text';
    src: url('../fonts/jj-text.woff2') format('woff2'),
        url('../fonts/jj-text.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

* {box-sizing: border-box;}

html {width: 100%; height: 100%; padding: 0; margin: 0;}
body {width: 100%; height: 100%; padding: 0; margin: 0; font-family: 'Roboto', sans-serif; color: #ffb871;  background: #170d0b url('../images/bg-fire-effect.jpg') no-repeat center center; background-size: cover; background-attachment: fixed;}

iframe {width: 100%; height: 100%;}

h2 {font-family: 'jj-header'; margin: 0; font-weight: 800; font-size: 160px; line-height: 180px;}
h3 {font-family: 'jj-header'; margin: 0; font-weight: 800; font-size: 100px; line-height: 120px;}
h4 {font-family: 'jj-text'; margin: 0; font-weight: 500; font-size: 70px; line-height: 80px;}
h5 {font-family: 'jj-text'; margin: 0; font-weight: 500; font-size: 60px; line-height: 70px; text-transform: uppercase;}
h6 {font-family: 'jj-header'; margin: 0; font-weight: 800; font-size: 60px; line-height: 65px; text-transform: uppercase;}

.col-popup-kitchen-right h5 {margin-bottom: 20px;}

p,li {font-family: 'jj-text'; margin-top: 0; font-weight: 500; font-size: 30px; line-height: 40px;}
p a {font-size: inherit; color: inherit; text-decoration: none;}

header {text-align: center; padding-top: 15px; position: fixed; width: 100%; z-index: 100;}

.logo {width: 200px; margin: 0 auto;}
.logo img {width: 100%;}

.darkHeader {background: #210b07;}
.darkHeader .logo {width: 100px;}

.backdrop-filter {-webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);}

nav {position: absolute; top: 40px; right: 50px;}
nav a {color: #fff;}

/* section top row */
.section-top-flex {width: 100%; height: 100%; padding-top: 138px;}
.home-hero-row {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.home-hero-row img {height: 100%; max-width: 1149px; object-fit: contain;}

.section-top {width: 100%; text-align: center; position: relative; padding-top: 150px;}
.title-juicy {position: relative; z-index: 2;}
.title-juicy img {width: 65%; max-width: 996px;}

.top-row-burgers {position: relative; z-index: 3; margin-top: -120px;}
.top-row-burgers img {width: 70%; max-width: 1039px;}

.top-row-border {
	border: 0px solid #ffb871;
	border-radius: 150px; 
	max-width: 1560px; 
	width: 75%;
	height: 600px; 
	margin: 0; 
	position: absolute; z-index: 1;
 	top: 500px;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* section tasty */
.section-tasty {width: 100%; text-align: center; position: relative;}
.title-tasty {position: relative; z-index: 2;}
.title-tasty img {width: 65%; max-width: 965px;}
.banner-tasty-burgers {position: relative; z-index: 3; margin-top: -150px;}
.banner-tasty-burgers img {width: 100%; max-width: 1792px;}

/* section menu */

.title-menu {margin: 0 35px;}
.title-menu img {width: 100%; max-width: 808px;}

/* section secret */
.section-secret {text-align: center; max-width: 1600px; margin: 30px auto; padding: 0 50px;}

/* misc */

.button-view-menu {margin: 20px auto;}
.button-view-menu img {width: 100%; max-width: 338px;}

/* section popup kitchen */

.section-popup-kitchen {margin: 50px 50px;}
.row-popup-kitchen {display: flex; align-items: center; max-width: 1600px; border: 8px solid #ffb871; border-radius: 150px; padding: 0px 20px; margin: 0 auto;}
.col-popup-kitchen-left {width: 50%; text-align: center; padding: 50px;}
.col-popup-kitchen-right {width: 50%; text-align: center;}

.row-map-address {display: flex; flex-wrap: wrap;}
.col-map-address-left {width: 50%;}
.col-map-address-right {width: 50%;}

.img-popup-burgers {width: 100%; max-width: 580px;}
.img-map {width: 100%; max-width: 318px;}

/* section order buttons */

.section-order-buttons {margin-top: 75px; margin-bottom: 75px;}
.row-order-buttons {display: flex; margin: 0 auto; max-width: 1600px; text-align: center;}
.row-order-buttons div {width: 50%;}
.row-order-buttons div img {width: 100%; max-width: 515px;}

/* section photos layout home */

.section-photo-layout img {display: block; width: 100%;}
.row-pic-flex {display: flex; flex-wrap: wrap;}
.pic-col {width: 50%;}

/* section menu */
.section-menu {max-width: 1600px; margin: 75px auto; text-align: center; padding: 0 25px;}

.menu-items-row {display: flex; justify-content: center; flex-wrap: wrap;}
.menu-items-col {width: 30%; margin: 20px 1.5%; max-width: 420px; background: #000; border-radius: 30px; padding: 25px;}

.menu-items-col-25 {width: 22%; margin: 20px 1.5%; max-width: 420px; background: #000; border-radius: 30px; padding: 25px;}

.menu-items-name p {text-align: left;}
.menu-items-details p {font-size: 18px; line-height: 24px; text-align: left;}
.menu-items-photo img {width: 100%;}

.about-content-row {background: #000; border-radius: 30px; padding: 50px; margin-left: 35px; margin-right: 35px;}
.about-text {text-align: left; margin-top: 50px; padding: 50px; color: #fff;}
.about-text p {}
.about-content-row img {width:100%; max-width: 660px;}

/* section photos */
.section-photos {max-width: 1600px; margin: 75px auto; text-align: center; padding: 0 25px;}

.photos-row {display: flex; justify-content: center; flex-wrap: wrap;}
.photos-col {width: 31.3333%; margin: 20px 1%; max-width: 420px; background: #ffead5; border-radius: 20px; padding: 15px 15px 50px 15px;}
.photos-col img {width: 100%; border-radius: 20px;}


/* section burger nine */
.section-burger-nine {max-width: 1600px; margin: 75px auto; text-align: center;}
.burger-nine-row {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.burger-nine-col {width: 30%; margin: 20px 0;}
.burger-nine-col img {width:100%; max-width: 527px;}


/* delivery logos */

.section-delivery-logos {max-width: 1600px; margin: 125px auto; text-align: center;}
.delivery-logos {display:flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.delivery-logos-col img {width: 100%;}
.delivery-logos-col {width: 28.3333; margin: 20px 2.5%; max-width: 225px;}

footer {text-align: center; padding: 50px 20px; }


/********** menu popup **********/

.mobile-nav {
    z-index:20000;
    position: fixed;
    /*width:150px;*/
    width:100%;
    height: 100%;
    background: black;
    color: #FFF;    
    display: none;
    top: 0;
    left: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.93) url(../images/logo-new-juicy-joes-small.png) no-repeat center 50px;    
}

    
.nav-box-outside {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}

.nav-box {
    
}

.mobile-nav ul {
    list-style:none;
    margin: 0;
    padding: 0;
}
.mobile-nav ul li {
    list-style: none;
    color: #FFF;  
    margin: 0;
    padding: 0;
}

.mobile-nav a {
    font-family: 'jj-header';
    font-size: 28px; 
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    letter-spacing: 2px;
    line-height: 40px;
}

.mobile-nav a:hover {color: #ffa057;}

.close {cursor: pointer; margin-bottom: 15px; margin-top: 0px;}

.menu-button-row {display: flex;}

.menu-button:first-child {
  margin-right: 15px;
}

.menu-button {cursor: pointer;}


.menu-button img:hover {
  transform: scale(0.95); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.instagram-logo img {margin-top: 10px;}

@media only screen and (max-width: 480px) {
.menu-button img.order-online {width: 135px;}
.menu-button img {width: 65px;}
}