/* Fonts (Majesti Banner, Athelas, & SimSun) */
@import url("https://use.typekit.net/aeh3kwk.css");

@font-face { 
    font-family: "Majesti Banner", serif;
    src: url(Majesti-Banner.otf) format("opentype");
}
@font-face {
    font-family: athelas, serif;
    src: url(Athelas.otf) format("opentype");
}
@font-face {
    font-family: "Athelas Italic", serif;
    src: url(Athelas.otf) format("opentype");
}
@font-face {
    font-family: SimSun, 宋体, 黑体, 黑体, 微软雅黑, 宋体, sans-serif;
    src: url(simsun.ttf) format("truetype");
}

/* Color fading animation for navigation bar buttons */
@keyframes nav-highlight {
    0% {border-color: #d4a18d; border-width: 0px;}
    100% {border-color: #d4a18d; border-width: 0px; border-bottom-width: 6px; margin-top: -2px;}
}
/* Color fading animation for social media buttons */
@keyframes social-media-highlight {
    0%   {opacity: 0.9;}
    100% {opacity: 1;}
}
/* Background */
#container {
    background-color: #41393d;
}

/* Body */
body {
    margin: 0;
}

/* General styling of content */
#main-content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #d7e4c2;
}

/* Logo */
#logo {
    display: block;
    margin: auto;
    width: 256px;
    padding: 48px;
}

/* Phone number and social media icons list */
ul.top-list {
    width: 92%;
    max-width: 1200px;
    min-height: 154px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -154px;
    margin-bottom: 0px;
    list-style-type: none;
    padding: 0px;
    overflow: hidden;
    background-color: #41393d;
}
#top-list-phone {
    float: left; 
    display: block;
    color: white;
    text-align: center;
    text-decoration: none; 
    padding-top: 53px;
    opacity: 0.9;
    font-family: Athelas, serif;
    font-size: 30px;
}
ul.top-list li a {
    float: right; 
    padding-top: 56px;
    padding-left: 26px;
}
ul.top-list li a img {
    opacity: 0.9;
}
ul.top-list li a img:hover {
    animation-name: social-media-highlight;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

/* Social media icons */
#small-facebook-icon {
    overflow: hidden;   
}
#large-facebook-icon {
    overflow: hidden;   
}
#small-instagram-icon {
    overflow: hidden;   
}
#large-instagram-icon {
    overflow: hidden;   
}
#small-yelp-icon {
    overflow: hidden;   
}
#large-yelp-icon {
    overflow: hidden;   
}

/* Navigation Bar */
#nav-container {
    width: 100%;
    height: 55px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    background-color: #be1e2d;
    overflow: hidden; 
}
ul.nav {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1px;
    margin-bottom: 0px;
    list-style-type: none;
    padding: 0px;
    overflow: hidden;
    background-color: #be1e2d;
}
ul.nav li {
    float: left;
    width: 25%;
}
ul.nav li a {
    display: block;
    color: #d7e4c2;
    text-align: center;
    text-decoration: none; 
    padding: 13px;
    font-family: "Majesti Banner", serif;
    font-size: 23px;
    border: solid;
    border-color: #c45044;
    border-width: 0px;
}
ul.nav li a:hover {
    background-color: #be1e2d;
    animation-name: nav-highlight;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}

/* Banners for each page (crop parameters and the image itself) */
#banner-home {
    background-color: #41393d;
    width: 100%;
    max-height: 800px;
    min-height: 322px;        
    padding-bottom: 15%;          
    background-image: url("../images/arturo-castaneyra-396447.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;                
    border-bottom: solid;
    border-width: 12px;
    border-color: #8a8c8f;
}
#banner-menu {
    background-color: #41393d;
    width: 100%;
    max-height: 800px;
    min-height: 322px;        
    padding-bottom: 15%;          
    background-image: url("../images/chinese-new-year.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;                
    border-bottom: solid;
    border-width: 12px;
    border-color: #8a8c8f;
}
#banner-events {
    background-color: #41393d;
    width: 100%;
    max-height: 800px;
    min-height: 322px;        
    padding-bottom: 15%;          
    background-image: url("../images/tableware.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;                
    border-bottom: solid;
    border-width: 12px;
    border-color: #8a8c8f;
}
#banner-contact {
    background-color: #41393d;
    width: 100%;
    max-height: 800px;
    min-height: 322px;        
    padding-bottom: 15%;          
    background-image: url("../images/piotr-chrobot-276744-sd.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;                
    border-bottom: solid;
    border-width: 12px;
    border-color: #8a8c8f;
}

/* Sections */
#text-content{
    padding-top: 60px;
    padding-bottom: 88px;
}
#call-to-action-content{
    background-color: #be1e2d;
    padding-top: 72px;
    padding-bottom: 72px;
}
#menu-content{
    background-color: #8a8c8f;
    padding-top: 72px;
    padding-bottom: 72px;
}
/* Headers */
h1 {
    color: #41393d;
    text-align: center;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-style: italic;
    font-size: 30px;
    padding: 24px;
    padding-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}
h2 {
    background-color: #be1e2d;
    color: #d7e4c2;
    text-align: center;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-style: italic;
    font-weight: normal;
    font-size: 33px;
    padding: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    max-width: 500px;
}
h3 {
    color: #d7e4c2;
    background-color: #8a8c8f;
    text-align: center;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-style: italic;
    font-weight: normal;
    font-size: 30px;
    padding: 12px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}
.header-banner{
    color: #d7e4c2;
    background-color: #be1e2d;
    text-align: left;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-style: italic;
    font-weight: normal;
    font-size: 30px;
    padding: 12px;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 36px;
    margin-bottom: 0px;
}
.header-banner-grey{
    color: #d7e4c2;
    background-color: #8a8c8f;
    text-align: left;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-style: italic;
    font-weight: normal;
    font-size: 30px;
    padding: 13px;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -16px;
    margin-bottom: 0px;
}
/* Chinese subheads */
#chinese-subhead-home {
    color: #d4a18d;
    text-align: center;
    text-decoration: none; 
    font-family: SimSun, serif;
    font-size: 49px;
    padding: 12px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}
#chinese-subhead-menu {
    color: #d4a18d;
    text-align: center;
    text-decoration: none; 
    font-family: SimSun, serif;
    font-size: 49px;
    padding: 12px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}
#chinese-subhead-events {
    color: #d4a18d;
    text-align: center;
    text-decoration: none; 
    font-family: SimSun, serif;
    font-size: 34px;
    font-style: normal;
    padding: 0px;
    padding-top: 12px;
    padding-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
}
#chinese-subhead-reservations {
    color: #d4a18d;
    text-align: center;
    text-decoration: none; 
    font-family: SimSun, serif;
    font-size: 46px;
    font-style: normal;
    padding: 12px;
    padding-top: 0px;
    margin-left: auto;
    margin-right: auto;
}
/* Paragraphs */
p {
    color: #41393d;
    padding-left: 30px;
    padding-right: 30px;
    text-align: justify;
    text-decoration: none; 
    font-family: Athelas, serif;
    font-style: italic;
    font-size: 18px;
    line-height: 32px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    margin-bottom: 0px;
    max-width: 490px;
    padding-bottom: 16px;
}

/* Footer (legal info, sitemap link, etc.) */
footer {
    font-family: Athelas, sans;
    color: #8a8c8f;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    text-align: center;
    vertical-align: middle;
    background-color: #41393d;
    height: 55px;
    line-height: 55px;
}

/* Menu flex boxes - menu page */
.menu-flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;   
    max-width: 900px;
    width: 100%;
    height: 100%;
}
.menu-flex-container>div{
    width: 438px;
    min-height: 1000px;
    max-height: 1000px;
    height: 100%;
    padding: 0px;
    font-size: 30px;
    margin-bottom: 12px;
}
.menu-box-red{
    background-color: #be1e2d;
    overflow: hidden;
}
.menu-box-bamboo{
    background-color: #d7e4c2;
    overflow: hidden;
}
.menu-text{
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 24px;
    padding-top: 10px;
}
/* Menu headers - menu page */
.menu-image{
    height: 300px;
}
.menu-header-sleek{
    float:left;
    color: #41393d;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-style: italic;
    font-weight: bold;
    font-size: 30px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: solid 1.5px #d4a18d;
}
.menu-header-bamboo{
    float:left;
    color: #d7e4c2;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-style: italic;
    font-size: 30px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: solid 1.5px #d4a18d;
}
/* Menu dish list - menu page */
ul.dish-list{
    float: left;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    padding-top: 24px;
    padding-bottom: 24px;
    list-style-type: none;
}
ul.dish-list li{
    padding-bottom: 12px;
}
.dish-header-sleek{
    color: #41393d;
    text-align: left;
    font-family: "Athelas", serif;
    font-style: italic;
    font-weight: bold;
    font-size: 24px;
    padding-bottom: 8px;
}
.dish-header-bamboo{
    color: #d7e4c2;
    text-align: left;
    font-family: "Athelas", serif;
    font-style: italic;
    font-weight: normal;
    font-size: 24px;
    padding-bottom: 8px;
}
.dish-header-chinese{
    color: #d4a18d;
    text-align: left;
    font-family: SimSun, serif;
    font-size: 24px;
    font-style: normal;
}
.dish-description-grey{
    color: #8a8c8f;
    text-align: left;
    font-family: "Athelas", serif;
    font-style: italic;
    font-size: 16px;
    padding: 0px;
    min-height: 64px;
}
.dish-description-lucky{
    color: #d4a18d;
    text-align: left;
    font-family: "Athelas", serif;
    font-style: italic;
    font-size: 16px;
    padding: 0px;
    min-height: 64px;
}
.dish-price-sleek{
    float: right;
    color: #41393d;
    font-family: "Athelas", serif;
    font-style: italic;
    font-weight: bold;
    font-size: 24px;
    margin-top: -36px;
}
.dish-price-lucky{
    float: right;
    color: #d4a18d;
    font-family: "Athelas", serif;
    font-style: italic;
    font-weight: bold;
    font-size: 24px;
    margin-top: -36px;
}

/* Events flex boxes - events page */
#events-flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    margin-left: auto;
    margin-right: auto;   
    max-width: 948px;
    width: 100%;
    height: 100%;
}
/* Images - events page */
#events-image{
    padding: 0px;
    padding-right: 24px;
    margin:0;
    height: 100%;
    overflow: hidden;
    margin-top: 30px;
}
#events-image img{
    box-sizing: border-box;
    max-width: 420px;
    border: solid 12px #8a8c8f;
    border-bottom: solid 12px #8a8c8f;
}

/* Events info - events page */
#events-info-box{
    width: 100%;
    max-width: 480px;
	max-height: 474px;
	padding-bottom: 24px;
}

/* contact info - events page */
#contact-info-c2a {
    color: #d7e4c2;
    text-align: left;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-weight: normal;
    font-style: italic;
    font-size: 30px;
    line-height: 48px;
    padding: 24px;
    padding-top: 0px;
    padding-bottom: 13px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    max-width: 500px;
}
#contact-info-mobile-phone {
    color: #d7e4c2;
    background-color: #be1e2d;
    text-align: center;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-weight: normal;
    font-style: italic;
    font-size: 52px;
    padding: 0px;
    padding-bottom: 0px;
    padding-top: 12px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
}
#contact-info-mobile-email {
    background-color: #be1e2d;
    color: #d7e4c2;
    text-align: center;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-weight: normal;
    font-style: italic;
    font-size: 30px;
    padding-bottom: 0;
    padding-top: 24px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 12px;
    width: 100%;
}

/* Contact flex boxes - contact page */
#contact-flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    margin-left: auto;
    margin-right: auto;   
    max-width: 900px;
    width: 100%;
    height: 100%;
}
/* Images - contact page */
#contact-image{
    padding: 0px;
    margin:0;
    height: 100%;
    overflow: hidden;
    margin-top: 36px;
}
#contact-image img{
    box-sizing: border-box;
    max-width: 412px;
    border: solid 12px #8a8c8f;
    border-bottom: solid 12px #8a8c8f;
}

/* Contact info - contact page */
#contact-info-box{
    width: 100%;
    max-width: 448px;
	max-height: 474px;
	padding-bottom: 24px;
	border-bottom: solid 1.5px #d4a18d;
}
.contact-info{
    color: #41393d;
    text-align: left;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-weight: normal;
    font-style: italic;
    font-size: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-bottom: 24px;
    padding-top: 24px;
}
#contact-address{
    font-size: 30px;
}
#contact-phone{
    margin-top: -30px;
    margin-bottom: -24px;
    font-size: 30px;  
}
#contact-email{
    font-size: 30px;
    margin-bottom: -24px;
}
.days-info{
    color: #41393d;
    text-align: left;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-style: italic;
    font-size: 30px;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    margin-bottom: 0px;
    width: 100%;
    padding-top: 12px;
}
.hours-info{
    color: #41393d;
    text-align: right;
    text-decoration: none; 
    font-family: "Athelas", serif;
    font-style: italic;
    font-size: 30px;
    margin-top: -33px;
    width: 100%;
}

/* Adjustments based on screensize (for mobile) */
@media screen and (min-width: 537px){
    #contact-info-mobile-phone{display:none;}
    #contact-info-mobile-email{display:none;}
}
@media screen and (max-width: 960px){
    #chinese-subhead-events{padding-top:20px; padding-bottom: 28px; font-size: 41px;}
    td{padding-bottom: 20px;}
    #events-flex-container{max-width:500px;}
    #events-image{padding: 0px;margin-left: auto;margin-right:auto;}
    #events-info-box{margin-left: auto;margin-right:auto;padding-bottom: 0px;}
    #chinese-subhead-events{font-size:36px;}
    #contact-flex-container{max-width:500px;}
    #contact-info-box{width:100%;max-width:500px;}
    #contact-image{width:100%;}
    #contact-image img{max-width: 100%;}
    
}
@media screen and (max-width: 780px){
    ul.nav li a{font-size: 21px;}
}
@media screen and (max-width: 750px){   
    ul.top-list {max-width: 300px;}
    #top-list-phone {margin-top: 84px;opacity: 0.9;font-family: Athelas, serif;font-size: 48px;}
    ul.top-list li{width: 100%;}
    ul.top-list li a{margin: 40px;width: 33.33%; padding: 0px; margin-left: auto; margin-right: auto;}
    ul.top-list li a img{height: 48px; width: 48px; margin-left: 20%}
    
    ul.nav li{width: 100%;}
    ul.nav li a{font-size: 30px;}
    #nav-container{height: 100%;border: none;}
    
    #banner-home{min-height: 160px;}
    #banner-menu{min-height: 160px;}
    #banner-events{min-height: 160px;}
    #banner-contact{min-height: 160px;}
    
    #large-facebook-icon{height: 50px; width: 100%;}
    #small-facebook-icon{display: none;}
    #large-instagram-icon{height: 50px; width: 100%;}
    #small-instagram-icon{display: none;}
    #large-yelp-icon{height: 50px; width: 100%;}
    #small-yelp-icon{display: none;}
    
    footer {font-size: 14px;}
}
@media screen and (max-width: 536px){
    #chinese-subhead-home{font-size: 28px;}
    #chinese-subhead-menu{font-size: 28px;}
    #chinese-subhead-events{font-size: 26px;}
    #chinese-subhead-reservations{font-size: 28px; padding-left:20px; padding-right:20px;}   
    
    #events-image img{max-width:312px;}
    #contact-phone-number{font-size: 48px; }
    #contact-email-address{font-size: 27px;}
    
    p{max-width: 295px;}
    
    #contact-info-c2a{display: none;}
    #contact-info-mobile-phone{display:block;}
    #contact-info-mobile-email{display:block;}
    .menu-flex-container{margin-top: -72px; margin-bottom: -72px;}
    .menu-flex-container>div{min-height: 100%; padding-bottom: 24px;}
    .dish-header-sleek{font-size:20px;}
    .dish-header-bamboo{font-size:20px;}
    .dish-price-sleek{font-size:20px; margin-top: -32px;}
    .dish-price-lucky{font-size:20px; margin-top: -32px;}
    .dish-description-grey{margin: 0px; margin-top: 12px;}
    .dish-description-lucky{margin: 0px; margin-top: 12px;}
    
    #contact-info-box{padding-left:24px;padding-right:24px;border-bottom:0px;}
    #contact-address{font-size:21px;}
    #contact-phone{font-size:21px;}
    #contact-email{font-size:21px;}
    #contact-image{padding:24px;margin-top:12px;margin-bottom:-12px;}
    .days-info{font-size:21px;}
    .hours-info{font-size:21px;margin-top:-24px;}
}