/*
Theme Name:	Shiro Restaurant v2
Description: A custom theme for Shiro
Version: 1.0.0
Author: Shwapo, LLC
Author URI: http://shwapo.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-theme, mobile
Text Domain: shwapo
*/
@charset "utf-8";


/*@import url('https://www.fontify.me/wf/6dc272ad4f9de9fd0cffbc301842cbd3');*/


/* Reset Styles */
*, *::after, *::before { margin: 0; padding: 0; border: 0; line-height: inherit; color: inherit; text-transform: inherit; font-weight: inherit; font-style: inherit; font-size: inherit; font-family: inherit; background-color: transparent; outline: none; 
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
ol, ul { list-style: none; list-style-position: inside; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: inherit;}
blockquote::before, blockquote::after, q::before, q::after { content: ""; }
blockquote, q { quotes: "" ""; }
button { cursor: pointer; }
button:focus, button:active { outline:0; }
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { padding:0; border: 0; margin: 0; line-height: normal; }
header, footer, nav, article, section, main { display: block; }
:-ms-input-placeholder { color: #ccc; opacity: 1; }
::-webkit-input-placeholder { color: #ccc; opacity: 1; }
::-moz-placeholder { color: #ccc; opacity: 1; }
select.__placeholder { color: #ccc; opacity: 1; }
input, textarea, select { background: none; margin: 0; padding: 0; line-height: 1; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; 
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select::-ms-expand { display: none; }

/*  centering: transform: translate(50%,50%); -webkit-transform: translate(50%, 50%); right: 50%; bottom: 50%; 
	hero: background-position: center center; background-size: cover; background-repeat: no-repeat; */

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { }
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) { }
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) { }
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) { }

/*-------------------------
	Core Elements/Tags
---------------------------*/
html { font-size: 15px; }
body { font-size: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Montserrat', sans-serif; line-height:1.8; color:#000;} 
p{margin-bottom:20px;}

.clear:after{content:''; display:block; clear:both;}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { }
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) { }
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) { }
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) { }


/*-------------------------
	Preloader
---------------------------*/
.preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #FFF url(assets/images/pinstripe.png) repeat; }
.preloader__image{border-radius:50%; background:#FFF; overflow:hidden; border:2px solid #000; width: 80px; height: 80px; transform: translate(50%, 50%); -webkit-transform: translate(50%, 50%); right: 50%; bottom:50%; position: absolute;}
.preloader__image img{width:75%; height:auto; transform: translate(52%, 50%); -webkit-transform: translate(52%, 50%); right: 50%; bottom:52%; position: absolute; display:block;}

.spinner {
  width: 60px;
  height: 60px;
  transform: translate(50%, 50%); -webkit-transform: translate(50%, 50%); right: 50%; bottom:50%;
  position: absolute;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e7750a;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/*-------------------------
custom modal
---------------------------*/
.custom-modal{position:fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.9); z-index:1000000; display:none;}
.custom-modal__box{background:#424242; color:#FFF; padding:30px; width:90%; max-width:400px; position:absolute; text-align:center; 
right:50%; bottom:50%; -webkit-transform: translate(50%,50%); transform: translate(50%,50%); line-height:1.3; border-radius:3px;}
.custom-modal__button{transition:.3s; background:#AA6F2C; color:#FFF; padding:12px 30px; display:inline-block; margin:20px 4px 0; border:none; cursor:pointer; border-radius:3px; line-height:1; text-transform:uppercase;}
.custom-modal__button:hover{opacity:.8;}


/*-------------------------
	Container
---------------------------*/
.container{width:95%; max-width:1200px; margin:0 auto;}
.container--intro{max-width:825px;}
.container--footer{max-width:700px;}


/*-------------------------
	Divider
---------------------------*/
.divider{height:3px; width:40px; background:#e7750a; margin:0 auto; margin-bottom:25px;}
.divider--star{width:100%; height:2px; background:#d7d7d7; position:relative; margin-bottom:80px;}
.divider--star:after{font-size:2rem; background:#FFF; width:60px; position:absolute; color:#e7750a; z-index:2; font-family:fontAwesome; content:'\f0a3'; top:-26px; transform: translateX(50%); -webkit-transform: translateX(50%); right: 50%;}


/*-------------------------
	Header
---------------------------*/
.header{position:absolute; top:0; z-index:10; transform: translateX(50%); -webkit-transform: translateX(50%); right: 50%; width:100%; text-align:center;}
.header__middle{display:inline-block; }
.header__logo{background:#FFF; padding:10px 10px 16px; text-transform:uppercase; text-align:center; line-height:1; display:block;text-decoration:none;}
.header__logo h1{font-size:4.0rem; font-family: 'Open Sans Condensed', sans-serif; letter-spacing:9px; padding-left:16px; margin-bottom:2px; font-weight:300;}
.header__logo span{font-size:.7rem; letter-spacing:-0.2px;}
.header__order-bt{background:#000; color:#FFF; text-decoration:none; display:block; font-weight:700; transition:.3s; text-transform:uppercase; padding:10px 0;}
.header__order-bt:hover{background:#FFF; color:#000;}
.header__nav{ display:none;}
.header__nav a, .mobile__nav a{color:#FFF; text-transform:uppercase; text-decoration:none; font-weight:700; margin:0 40px 0 0; transition:.3s;}
.header__nav a:before{font-family:fontAwesome; content:'\f107'; display:inline-block; padding-right:2px; font-weight:400;}
.header__nav--right a{margin:0 0 0 40px;}
.header__nav a:hover, ..mobile__nav a:hover{color:#e7750a;}
.mobile__nav{display:block; margin-top:20px;}
.mobile__nav a{margin:0 10px;}

@media only screen and (min-width : 992px) {
	.header__nav{display:inline-block; position:relative; top:2px;}
	.mobile__nav{display:none;}
}

/*-------------------------
	Navigation
---------------------------*/

/*-------------------------
	Headline
---------------------------*/
.headline--second{color:#e7750a; font-size:5.000rem; line-height:1; font-family: 'Great Vibes', cursive; margin-bottom:-30px; position:relative; z-index:5;}
.headline--third{text-transform:uppercase; font-size:1.4rem; font-weight:700; margin-bottom:6px; position:relative; z-index:3;}
.headline--page{margin-bottom:15px;}

@media only screen and (min-width : 768px) {
	.headline--second{font-size:8.000rem; margin-bottom:-43px;}
	.headline--third{font-size:2.000rem;}
}

/*-------------------------
	Page Hero
---------------------------*/
.page__hero{background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; height:300px;}
.page__content{background:#FFF; padding:50px 0;}
.page__intro{background:#FFF; padding:40px 0 0; text-align:center;}

@media only screen and (min-width : 768px) {
	.page__hero{height:400px;}
	.page__content{padding:100px 0;}
}

/*-------------------------
	Footer
---------------------------*/
.footer{background:#000; color:#FFF;}
.footer h3{margin-bottom:20px;}
.footer a{text-decoration:none;}
.footer__callout{text-align:center; padding:40px 0; font-size:1.2rem;}
.footer__col-wrapper{margin-bottom:40px;}
.footer__col{margin-bottom:40px;}
.footer__copyright{text-align:center; color:#333; font-size:0.800rem; padding:35px 0; border-top:1px solid #111111; line-height:1.3;}

@media only screen and (min-width : 768px) {
	.footer__callout{font-size:1.600rem; padding:80px 0;}
 }
@media only screen and (min-width : 992px) {
	.footer__col-wrapper{ display: -webkit-flex; display: flex; margin-bottom:80px;}
	.footer__col{ -webkit-flex: 1; flex: 1; margin-bottom:0;}
	.footer__col:first-of-type{padding-right:20px; -webkit-flex: 2; flex: 2;}
 }

 /*-------------------------
  User Generated Content
---------------------------*/
.user-generated-content a{color:#2f3e85;}
.user-generated-content a:hover{color:#5060ab;}
.user-generated-content ul, .user-generated-content ol{list-style-type: disc; list-style-position: outside; margin:0 0 45px 60px;}
.user-generated-content ol{list-style-type:decimal; }
.user-generated-content .italic, .user-generated-content em { font-style: italic; }
.user-generated-content strong, .user-generated-content b{font-weight:700;}
.user-generated-content img{max-width:100%; height:auto; display:block; margin-bottom:40px;}
.user-generated-content li {margin-bottom:10px;}
.user-generated-content .wp-caption-text{line-height:1.4; margin-top:-30px; font-style:italic;}


@media only screen and (min-width : 768px) { 
  .user-generated-content .alignright {float:right; margin:0 0 20px 40px;}
  .user-generated-content .alignleft {float:left; margin:0 40px 20px 0;}
  .user-generated-content .aligncenter {display: block; margin-left: auto; margin-right: auto;}
  .user-generated-content a img.alignright {float:right; margin:0 0 20px 40px;}
  .user-generated-content a img.alignleft {float:left; margin:0 40px 20px 0;}
  .user-generated-content a img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
}

/*-------------------------
	Photo Overlay
---------------------------*/
.photo-cover{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5; background: rgba(0, 0, 0, .58);}


/*-------------------------
	Close
---------------------------*/
.close-bt{position:absolute; right:20px; top:20px; font-size:1.600rem; cursor:pointer;}
.close-bt:after{font-family:fontAwesome; content:'\f00d';}

/*======================================================== 
							PAGES 
======================================================== */


/*-------------------------
Home
---------------------------*/
.home__hero{background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; height:80vh;}
.home__intro{background:#FFF; padding:40px 0 95px; text-align:center;}
.home__about{text-align:center; }
.home__about-hero{background-size: cover; background-position: center center; background-repeat: no-repeat; height:250px; width:100%;}
.home__about-images{margin-bottom:60px;}
.home__about-content{padding-bottom:40px;}
.home__map{width:100%; height:300px; text-align:left;}
.home__map-box{background:#000; color:#FFF; font-family: 'Montserrat', sans-serif; line-height:1.8; font-size:1rem; padding:18px; border-radius:3px; position:relative; top:-5px; left:15px; width:250px;}
.home__map-box:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000;
	border-width: 10px;
	margin-left: -10px;
}
.home__map-title{}
.infoBox-close{display:none;}

.home__menus{background:#FFF; padding:50px 0; text-align:center;}
.home__menus-list{text-align:left;}
.home__menus-list-item{display:block;}
.home__menus-list-link{display:block; background:#000; border-radius:3px; color:#FFF; text-transform:uppercase; padding:12px 0; margin:0 8px 4px 0; text-decoration:none; width:100%; transition:.3s; text-align:center;}
.home__menus-list-item:nth-of-type(3n) .home__menus-list-link{margin-right:0;}
.home__menus-list-link:hover{background:#e7750a;}

.home__menus-photos{ margin-top:30px;}
.home__menus-photos-item{height:300px; background-size:cover; background-repeat:no-repeat; background-position:center center; margin-bottom:12px;}

.home__menus-info{text-align:left; margin-top:30px;}

@media only screen and (min-width : 480px) {
	.home__map{height:550px;}
}

@media only screen and (min-width : 768px) {
	.home__about-hero{height:590px; background-attachment: fixed;}
	.home__menus{background:#FFF; padding:150px 0;}
	.home__menus-photos:after{content:''; display:block; clear:both;}
	.home__menus-list-item{display:inline-block; width:calc((100% - 16px) / 3);}
	.home__menus-photos-item{width:calc((100% - 12px) / 2); margin:0 12px 12px 0; float:left;}
	.home__menus-photos-item:nth-of-type(2n){margin-right:0;}
}
@media only screen and (min-width : 1150px) {
	.home__about-wrapper, .home__menus-wrapper{display: -webkit-flex; display: flex;}
	.home__about-images, .home__about-content, .home__menus-content, .home__menus-photos{-webkit-flex: 1; flex: 1; text-align:left;}
	.home__menus-content, .home__menus-photos{text-align:center;}
	.home__menus-content{padding-right:75px;}
	.home__about-images{margin-bottom:100px;}
	.home__about-content{padding-left:50px; padding-bottom:84px;}
	.home__menus-photos-item{height:200px;}
}


/*-------------------------
Menu
---------------------------*/
.menu-area{background: #FFF;}
.menu-wrapper{background:#FFF; border:2px solid #d7d7d7; display:block; max-width:1000px; margin:0 auto;}
.menu-section-header{text-align:center; display:block; padding:15px 0; background:#000; color:#FFF; text-decoration:none; margin-bottom:2px; position:relative; line-height:1.3;}
.menu-section:last-of-type .menu-section-header{margin-bottom:0;}
.menu-section-header:after{content:'\f105'; font-family:fontAwesome; display:block; position:absolute; right:20px; bottom:50%; transform: translateY(50%); -webkit-transform: translateY(50%);}
.menu-section-header.open:after{content:'\f107';}
.menu-section-description{margin:20px 0; text-align:center; text-transform:uppercase;}
.menu-item{margin:20px 30px; padding-bottom:20px; border-bottom:1px solid #465069; position:relative;}
.menu-item-name{font-weight:700; margin-bottom:8px; margin-right:30px;}
.menu-item-price{margin-top:8px; background:#FFF; position:relative; z-index:2; float:right; display:inline-block; padding-left:5px;}
.menu-item-price-line{height:1px; border-bottom:1px dashed #CCC; position:absolute; z-index:1; left:0; bottom:32px; width:100%;}
.menu-item-details{color:#666;}
.menu-item-pic-bt:after{position:absolute; top:5px; right:0; content:'\f030'; font-family:fontAwesome; cursor:pointer;}
.menu-item-pic-bt:hover{color:#683324;}
.menu-overlay{position:fixed; top:0; left:0; right:0; bottom:0; background: rgba(255, 255, 255, .97); transition:.3s; z-index:11; display:none;}
.menu-item-image{max-width:1000px; width:90%; height:50%; background-size: cover; background-position: center center; background-repeat: no-repeat; position:absolute; 
transform: translate(50%,50%); -webkit-transform: translate(50%, 50%); right: 50%; bottom: 50%;}

.menu-after{max-width:1000px; margin:50px auto 0;}

@media only screen and (min-width : 768px) {
	.menu-section-header{line-height:1.8;}
	.menu-item-image{width:70%; height:70%;}
	.menu-item-name--beer{margin-right:100px;}
	.menu-item-details{position:absolute; top:0px; right:0; font-size:0.800rem;}
}
@media only screen and (min-width : 992px) {
	.menu-section-col{width:50%; float:left;}
	.menu-section-col--two{float:right;}
}