@font-face {
    font-family: 'Contralto Medium Demi';
    src: url('../fonts/ContraltoMedium-DemiBold.woff2') format('woff2'),
        url('../fonts/ContraltoMedium-DemiBold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Trade Gothic Wide';
    src: url('../fonts/TradeGothicLTStd-Extended.woff2') format('woff2'),
        url('../fonts/TradeGothicLTStd-Extended.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Trade Gothic Narrow';
    src: url('../fonts/TradeGothicLTStd-Bd2.woff2') format('woff2'),
        url('../fonts/TradeGothicLTStd-Bd2.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

* {
  box-sizing: border-box;
}

html {margin: 0; padding: 0;}
body {margin: 0; padding: 0; background-color: #171717; width: 100%; height: 100%; color: #fff; font-family: 'Trade Gothic';}



.clear {clear: both;}

#fixednav {
	position: fixed;
	width: 100%;
	text-align: center;
	padding: 30px 0px 0px 0px;
	z-index: 1000;
	/*background-color: #171717;*/
}

#logo {
	background: url(../images/logo-yui.png) no-repeat;
	width: 214px;
	height: 39px;	
	margin: 0 auto 40px auto;
}

#navbar ul {list-style-type: none; margin: 0; padding: 0;}
#navbar li {display: inline; margin: 0 30px; padding: 0;}
#navbar li a {color: #fff; text-decoration: none; font-family: 'Contralto Medium Demi'; font-size: 21px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 1px; border:1px solid red;}

/********** yui styles **********/	

h1 {font-family: 'Contralto Medium Demi'; font-size: 70px; margin: 0;}
h2 {font-family: 'Contralto Medium Demi'; font-size: 95px; margin: 0;}
h3 {font-family: 'Contralto Medium Demi'; font-size: 70px; margin: 0;}
h4 {font-family: 'Contralto Medium Demi'; font-size: 50px; margin: 0;}
h5 {font-family: 'Contralto Medium Demi'; font-size: 35px; margin: 0;}
p {color: #fff2ef;}
a {color: #fff2ef; text-decoration: none;}

.black {color: #000;}
.red {color: #6c5548;}

.but-reserve {border: 2px solid #f3e6df; padding: 30px; display: inline-block;}

#home-row-top {padding-top: 150px; text-align: center; padding-left: 25px; padding-right: 25px;}
#home-row-top .title {margin-top: 75px;}
#home-row-top .sushi {margin-top: -150px;}

#home-row {text-align: center; padding-left: 25px; padding-right: 25px;}

#reserve {padding: 100px 30px; }

.banner-home-partytray {background: url(../images/banner-home-partytray.jpg) no-repeat center center; background-size: cover; height: 800px; display: flex; align-items: center; justify-content: center;}
.banner-home-bistro {background: url(../images/banner-home-bistro.jpg) no-repeat center bottom; background-size: cover; height: 800px; display: flex; align-items: center; justify-content: center;}

#reserve {text-align: center;}

footer {background-color: #434343; padding-bottom: 100px;}

.banner-footer {background: url(../images/banner-reserve-now.jpg) no-repeat center bottom; background-size: cover; height: 425px; display: flex; align-items: center; justify-content: center; padding-left: 25px; padding-right: 25px;}
.footer-row-top {width:100%; max-width: 1284px;  margin: 0 auto; display: flex; align-items: center; border:0px solid red; }
.footer-row-top .box-1 {width: 50%;}
.footer-row-top .box-2 {width: 20%; text-align: center;}
.footer-row-top .box-3 {width: 30%; text-align: center;}

.footer-row-top p {margin: 0;}
.footer-row-top h2 {font-size: 70px;}
.footer-row-bottom h2 {font-size: 70px; line-height: 70px;}

.footer-row-bottom {max-width: 1284px; margin: 0 auto; display: flex; text-align: left; padding-top: 75px; padding-left: 25px; padding-right: 25px;}
.footer-row-bottom .box-1 {width: 12%; text-align: left; margin-right: 2%;}
.footer-row-bottom .box-1 img {width: 100%;}
.footer-row-bottom .box-2 {width: 28%; text-align: left;}
.footer-row-bottom .box-2 p {margin: 0; padding: 0;}
.footer-row-bottom .box-3 {width: 30%; text-align: left;}
.footer-row-bottom .box-4 {width: 28%; text-align: center;}
.footer-row-bottom ul {list-style-type: none; margin: 0; padding: 0;}
.footer-row-bottom li {margin: 0; padding: 0;}


.footer-copyright {text-align: center; border-top: 1px solid #f3e6df; width: 75%; margin: 50px auto; padding-top: 30px;}
.footer-copyright p {margin: 0; padding: 0;}

/* Sub Pages **********/

#sub-row {}

#sub-row .box-template-1 {max-width: 1375px; width: 100%; margin: 0 auto; align-items: center; justify-content: center; padding: 75px 30px;}
#sub-row .box-template-1 .row {text-align: center;width: 100%;}
.sushi-sampler {display: flex; text-align: center; width:100%; justify-content: center;}
.sushi-sampler div {width: 325px;}
.sushi-sampler img {width: 100%;}
.sushi-sampler .roll-desc {width: 270px; margin: 0 auto;}

.canape-menu-items {display: flex; text-align: center; width:100%; justify-content: center; flex-wrap: wrap;}
.canape-menu-items p {font-size: 18px;}
.canape-menu-items div {width:31%; margin: 0 1% 25px 1%;}
.canape-menu-items img {width:100%; max-width: 490px;}
.canape-menu-items .roll-desc {font-size: 17px; max-width: 290px; margin: 0 auto;}

.menu-price {font-family: 'Contralto Medium Demi'; font-size: 15px;}

@media only screen and (max-width: 480px) {
.canape-menu-items div {width:48%; margin: 0 1%;}
}

#sub-row .box-template-2 {display: flex; max-width: 1375px; width: 100%; margin: 15px auto; align-items: center; justify-content: center; padding: 35px 30px;}
#sub-row .col-1 {width: 50%;}
#sub-row .col-2 {width: 50%;}

#sub-row .col-1-chef {margin-left: 10%; margin-right: 2.5%;}
#sub-row .col-2-chef {margin-right: 10%; margin-left: 2.5%;}

.row-photos-3 {width: 100%; max-width: 1975px; margin: 0 auto; display: flex;}
.row-photos-3 div {margin: 0 15px;}
.row-photos-3 img {width: 100%;}

.row-photos-circle {width: 100%; max-width: 1975px; margin: 0 auto; display: flex; text-align: center;justify-content: center;}
.row-photos-circle div {margin: 0 20px;}
.row-photos-circle img {width: 100%; max-width: 386px;}

.row-photos-1 {width: 100%; max-width: 1205px; margin: 0 auto;}
.row-photos-1 img {width: 100%;}


.bg-pink {background: #faf3f2;}
.bg-map {background: #050c0d url(../images/world-map.png) no-repeat; background-size: cover; padding: 75px 30px;}
.bg-stripe {background: url(../images/bg-stripe.png); padding: 75px 30px; margin: 100px 0px;}
.bg-grey {background: url(../images/bg-grey.png);}
.bg-black {background: black;}
.bg-bistro {background: url(../images/banner-home-bistro.jpg) no-repeat center bottom; background-size: cover; height: 800px;}
.bg-partytray {background: url(../images/banner-home-partytray.jpg) no-repeat center bottom; background-size: cover; height: 800px;}
.bg-catering {background: url(../images/banner-home-catering.jpg) no-repeat center bottom; background-size: cover; height: 800px;}



.txt-center {text-align: center;}
.txt-left {text-align: left;}
.flex-wrap {flex-wrap: wrap;}


/********** 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: url('../images/logo-yui.png') no-repeat center 50px;
    background-color: rgba(0, 0, 0, 0.93) ;    
}

	
.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: 'Trade Gothic';	
    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: #ac0218;}

.close {cursor: pointer;}

.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) */
}