/* ======== MOBILE ======== */
@media (max-width: 768px){
    body {
        background-size: 40%;
    }
    #bar {
        height: 38px;
    }
    #container {
        padding-top: 60px;
    }
    #header {
        width: 90%;
    }
    .name {
        line-height: 0.85;
        padding: 12px 0px 12px 0px;
    }
    .menu {
        width: 90%;
    }
	div.menu-full {
		margin-bottom: 25px;
	}
    div.menu-half, div.menu-third {
        width: 100%;
        margin-bottom: 25px;
    }
	div.price span.large::before {
		padding-left: 25px;
	}
	div.price span.dinner::before {
		padding-left: 25px;
	}
    span.address {
        display: block;
    }
	span.phonea {
        display: none;
    }
	span.phoneb {
        display: block;
    }
    a[href^="tel"] {
		text-decoration: none;
		color: #CD4844;	
	}
    .menu-list {
        top: 0;
    }
    .store-info {
        top: 0;
        right: 275px;
    }
    img.mobile {
        height: 106px;
    }
	img.mobile2 {
        width: 100%;
    }
}

/* ======== TABLET ======== */
@media (min-width: 768px) and (max-width: 1199px) {
    body {
        background-size: 225px;
    }
    #bar {
        height: 8px;
    }
    #container {
        padding-top: 30px;
    }
    #header {
        width: 750px;
    }
    .menu {
        width: 750px;
    }
	div.menu-full {
		margin-bottom: 50px;
	}
    div.menu-half {
        width: 50%;
        margin-bottom: 50px;
    }
    div.menu-third {
        width: 33.33%;
        margin-bottom: 50px;
    }
	div.price span.large {
		display: block;
	}
	div.price span.dinner {
		display: block;
	}
    a[href^="tel"] {
		text-decoration: none;
		color: #CD4844;	
	}
    .menu-list {
        top: 30px;
    }
    .store-info {
        top: 30px;
        right: 245px;
    }
    img.mobile {
        height: 112px;
    }
	img.mobile2 {
        height: 150px;
    }
}

/* ======== DESKTOP ======== */
@media (min-width: 1200px ) {
    body {
        background-size: 300px;
    }
    #bar {
        height: 8px;
    }
    #container {
        padding-top: 30px;
    }
    #header {
        width: 1000px;
    }
    .menu {
        width: 1000px;
    }
	div.menu-full {
		margin-bottom: 50px;
	}
    div.menu-half {
        width: 50%;
        margin-bottom: 50px;
    }
    div.menu-third {
        width: 33.33%;
        margin-bottom: 50px;
    }
	div.price span.large::before {
		padding-left: 25px;
	}
	div.price span.dinner::before {
		padding-left: 25px;
	}
    .menu-list {
        top: 30px;
    }
    .store-info {
        top: 30px;
        right: 245px;
    }
    img.mobile {
        height: 150px;
    }
	img.mobile2 {
        height: 200px;
    }
}

/* ======== GENERAL ======== */
::selection {
	background-color: rgba(205,72,68,0.10);
}
html {height: 100%;}
body {
    font-family: 'Merriweather', serif;
    font-size: 18px;
    color: #444444;
    background-color: #F6F2DB;
    background-image: url("../images/man.png"), url("../images/woman.png"),
					  url("../images/leaves1.jpg"), url("../images/leaves2.jpg");
    background-position: left bottom, right bottom, left top, right top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 0px;
    margin: 0px;
}
.hrr {
    font-size: 22px;
    font-style: italic;
    font-weight: 900;
    color: #CD4844;
}
.hr {
    font-size: 22px;
    font-style: italic;
    font-weight: 900;
    color: #444444;
}
.hrr-content {
    font-size: 15px;
}
.normal {
    font-style: normal;
}
.strong {
    font-weight: 900;
}
a.order-online {
	font-family: 'Viga', sans-serif;
    font-size: 20px;
	background-color: #CD4844;
	border: 3px solid #CD4844;
	border-radius: 8px;
	color: #FFFFFF;
	padding: 8px 16px 8px 16px;
	text-decoration: none;
	text-transform: uppercase;
    display: inline-block;
    overflow: hidden;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
a.order-online:hover, .delivery:hover, .social-link:hover {
    opacity: 0.5;
}
.delivery, .social-link {
    transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
/* ---- BAR (RED STATIC) ----*/
#bar {
    background-color: #CD4844;
    font-weight: 900;
    color: #FFFFFF;
    width: 100%;
    display: block;
    overflow: hidden;
    position: fixed;
}
/* ---- HEADER (BRANDING) ----*/
#header {
    text-align: center;
    margin: auto;
}
#header #logo {
    background-image: url("../images/logo.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 72px;
    width: 197px;
    display: block;
    overflow: hidden;
    margin: auto;
}
#header span.name {
    font-family: 'Viga', sans-serif;
    font-size: 72px;
    font-weight: bold;
    color: #CD4844;
    display: block;
}
#header span.tag {
    font-family: 'Viga', sans-serif;
    font-size: 20px;
    font-weight: normal;
    color: #444444;
    display: block;
}
#header span.tagb {
    font-family: 'Merriweather', serif;
    font-size: 20px;
    font-weight: 900;
    color: #444444;
    display: block;
    padding-top: 15px;
}
#header span.tagr {
    font-family: 'Merriweather', serif;
    font-size: 30px;
    font-weight: 900;
    color: #CD4844;
    display: block;
    padding-top: 5px;
}
/* ---- MENU GRID ----*/
.menu {
    background-color: rgba(255,255,255,0.75);
	border-radius: 8px;
    margin: auto;
    display: block;
    overflow: hidden;
    padding: 10px 25px 0px 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.category {
    font-family: 'Merriweather', serif;
    font-size: 32px;
    font-style: italic;
    font-weight: 900;
    text-align: center;
    color: #CD4844;
	border-bottom: 1px solid #CD4844;
    padding: 8px 0px 8px 0px;
    margin-bottom: 15px;
}
div.category span.zh {
    font-family: "Long Cang", cursive;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    display: block;
}
span.desc {
    font-family: 'Merriweather', serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    display: block;
}
div.menu-full {
    width: 100%;
    display: block;
    overflow: hidden;
}
div.menu-full.center {
    text-align: center;
}
span.red {
    color: #CD4844;
}
span.italic {
	font-style: italic;
}
div.row {
    display: block;
    overflow: hidden;
    clear: both;
}
div.menu-half, div.menu-third {
    float: left;
    display: block;
    overflow: hidden;
    padding: 8px;
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
div.item span {
    font-family: "Long Cang", cursive;
	font-size: 22px;
    font-weight: 400;
    color: #CD4844;
    display: block;
	margin-bottom: 5px;
}
div.item {
   font-weight: 900;
    display: block;
    overflow: hidden;
}
div.item.spicy::after {
    color: #CD4844;
    content: "✽";
    padding-left: 10px;
}
div.desc {
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    display: block;
    overflow: hidden;
    padding: 0px 25px 0px 0px;
    margin: 5px 0px 15px 0px;
}
div.price {
    display: block;
    overflow: hidden;
}
div.price span.small::before {
    content: "Small - ";
}
div.price span.large::before {
    content: "Large - ";
}
div.price span.lunch::before {
    content: "Lunch - ";
}
div.price span.dinner::before {
    content: "Dinner - ";
}
/* ---- MENU CATEGORY SELECTOR ----*/
.menu-list {
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    position: fixed;
    float: right;
    right: 15px;
    width: 215px;
}
.store-info {
    position: fixed;
    float: left;
}
.nav {
    text-decoration: none;
    background-color: #CD4844;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    color: #FFFFFF;
    padding: 8px;
    cursor: pointer;
}
.nav:hover {
    background-color: rgba(205,72,69,0.8);
}
#menu-link {
    background-color: rgba(205,72,69,0.8);
    display: none;
}
#menu-link a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    overflow: hidden;
    padding: 5px;
}
#menu-link a:hover {
    background-color: rgba(255,255,255,0.5);
}
/* ---- MODAL ----*/
#openMap, #openAbout, #openDelivery, #closeMessage {
    cursor: pointer;
}
.modal-map, .modal-delivery, .modal-about, .modal-message {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(68,68,68,0.8);
}
.modal-container{
    background-color: #FFFFFF;
	border-radius: 8px;
    margin: auto;
    width: 80%;
}
.modal-container.mod1 {
    background-color: #F6F2DB;
}
.mod {
    margin: auto;
    display: block;
    overflow: hidden;
    padding: 10px 25px 0px 25px;
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.modal-top {
    text-align: right;
    padding: 8px 10px 8px 8px;
}
.modal-content {
    padding: 20px;
}
.modal-category {
    font-family: 'Merriweather', serif;
    font-size: 32px;
    font-style: italic;
    font-weight: 900;
    text-align: center;
    color: #CD4844;
	border-bottom: 1px solid #CD4844;
    padding: 8px 0px 8px 0px;
    margin-bottom: 15px;
}
.close-map, .close-delivery, .close-about, .close-message {
    color: #444444;
    font-weight: 900;
}
.close-map:hover, .close-delivery:hover, .close-about:hover, .close-message:hover {
    color: rgba(68,68,68,0.5);
    text-decoration: none;
    cursor: pointer;
}
/* ---- FOOTER) ----*/
#footer {
    font-size: 13px;
    text-align: center;
    width: 100%;
    display: block;
    overflow: hidden;
    padding-bottom: 20px;
}