/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
 * General Styles
*/


body {
  font-family: 'Source Sans Pro', 'Open Sans', arial, sans-serif;
  color: #666666;
}

* {
  -moz-box-sizing: border-box; /* Firexfox */
  -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
  box-sizing: border-box; /* IE */
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  width: 100%;
  margin: 1% auto;
  padding: 8% 6%;
}

.container:nth-child(odd) {
  background-color: #f7f7f7;
}

/*
 * Header
*/

header {
  margin-top: 1%;
}

.veggieburger {
  float: left;
  margin-left: 5%;
  margin-top: 2%;
}

.veggieburger p a {
  text-decoration: none;
  color: #3080CF;
  font-size: 2.2em;
}

.mobile_nav {
  display: none;
  text-align: center;
  background-color: rgb(187,153,176);
  padding: 5%;
  border-radius: 0 0 1% 1%;
}

.mobile_nav ul li a {
  font-family: 'Quattrocento';
  text-decoration: none;
  color: white;
  font-size: 1.5em;
}

.mobile_nav ul li {
  padding: 2%;
  margin: 2%;
  border-bottom: 1px solid #dac7d4;
}

.mobile_nav ul li a:hover {
  color: #666666;
}

.expand {
  display: block !important;
}

.language_bar ul li a:hover {
  color: rgb(187,153,176);
}

.language_bar ul li {
  display: inline-block;
  float: right;
  margin-top: 2%;
  margin-left: 3%;
/*  width: 15%;*/
}

.language_bar ul li a {
  padding: 20px;
}

.language_bar ul li a, footer a {
  text-decoration: none;
  color: #666666;
}

/*
 * Hero
*/
.hero {
  max-height: 200px;
  overflow: hidden;
  margin-bottom: 1%;
  position: relative;
}

img.banner {
  opacity: 0.3;
}

.hero::after {

}

.hero h1 {
  font-family: 'Quattrocento', serif;
  font-size: 2em;
  position: absolute;
  width: 100%;
  text-align: left;
  top: 65%;
/*  left: 3%;*/
}

.hero h2 {
  font-size: 1em;
  position: absolute;
  width: 100%;
  text-align: left;
  top: 80%;
/*  left: 3%;*/
}

img.hide, .main_nav {
  display: none;
}


#special_announcement {
  border: 3px grey solid;
  background-color: #d3d3d3;
}

#special_announcement .imagery {
  display: none;
}

.announcement-info.clearfix {
  padding: 10px 0;
}

#special_announcement h2 {
  padding-bottom: 0;
  color: black;
}

#special_announcement h3 {
  margin-bottom: .5em;
}

table.announcement-table {
  width: 100%;
  margin-bottom: 5%;
  border: none;
}

table.announcement-table {}

table.announcement-table td {
  font-size: 1.2em;
  text-align: justify;
  padding: 3%;
}

table.announcement-table td.announcement-date {
  width: 40%;
  font-weight: 800;
  color: black;
  border-right: 1px silver solid;
}

table.announcement-table td.announcement-date {
  line-height: 2;
  text-align: right;
  padding: 2%
}

h1.announcement-head {
  padding: 15px;
}

td.announcement-info {
  width: 60%;
}

table.announcement-japan td.announcement-info {
  line-height: 1.5;
}

/*
 * Font Styles
*/

h1, h2 {
  color: #3080CF;
}

h1 {
  font-family: 'Quattrocento', serif;
  font-size: 1.3em;
}

h2 {
  padding: 1% 0 2% 0;
  font-size: 1.2em;
  margin-bottom: 1%;
}

h1, h2, h3, address {
  text-align: center;
}

p, ul li {
  padding-bottom: 2%;
  line-height: 25px;
  font-size: .9em;
}

p {
  text-align: justify;
}

address a {
  text-align: justify;
  color: inherit;
  text-decoration: none
}

.sub {
  color: rgb(187,153,176);
  font-size: 1em;
}

strong {
  font-weight: 700;
}

/*
 * List Styles
*/

ul.left {
  float: left;
}

ul.right {
  float: right;
  padding-left: 15%;
}

h1.announcement-head {
  font-size: 1.8em;
}

/*
 * Services
*/

#services, #jp_services {
  margin-top: 0;
}

#services_list li:before, #jp_services li:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: gray; /* Or a color you prefer */
}

/*
 * Table Styles
*/

table.timetable {
  width: 100%;
  margin-bottom: 3%;
  margin-top: 3%;
  table-layout: fixed;
  border: 1px solid gray;
}

table.timetable tr:nth-child(1) {
  background: #b8d1f3;
}

th, td {
  text-align: center;
  padding: 2%;
  vertical-align: middle;
}

table.timetable tr {
  border-bottom: 1px solid #7F7F7F;
}

td.hours {

}

td.time {
  font-weight: 700;
}

p.timetable_notice {
/*  text-align: right;*/
  margin-bottom: 2%;
 /* font-style: italic;*/
}

td.ok {
  color: #0F9D1C;
  font-size: 2em;
}

td.no {
  font-size: 2em;
}

td.careful {
  color: #D0021B;
}

/*
 * Google Map
*/

#map {
  margin-top: 6%;
}

/*
 * Footer Styles
*/

footer p.phone, h1.footer_title, h3.footer_details {
  text-align: left;

}
footer {
  padding: 5%;
  background-color: rgb(187,153,176);
  color: white;
}

p.phone a {
  text-decoration: none;
  font-size: 1em;
  color: white;
}

p.phone a:hover {
  color: #666666;
}

h1.footer_title {
  font-family: 'Quattrocento', serif;
  margin-bottom: 2%;
  font-size: 1.5em;
}

h3.footer_details {
  line-height: 130%;
  font-size: .8em;
}

/*Top*/
.jp_top-information.clearfix {
  margin-bottom: 20px;
}

/*
 * Media Query for SMALLER than iPhone 6>
*/

/* Portrait and Landscape */
@media only screen 
  and (max-device-width: 375px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

    ul.right {
       float: left;
    }

}

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 960px) 

  and (-webkit-min-device-pixel-ratio: 1) { 
    
    .container, .hero, header, footer {
      position: relative;
    }

    .container {
      padding: 3%;
      background-color: white;
      width: 90%;
      margin: 0;
    }

    .container:nth-child(odd) {
      background-color: white;
    }

    header {
      background-color: white;
      margin-top: 0;
      padding-top: 20px;
    }

    .main_nav {
      display: inline;
    }

    .main_nav ul {
      float: left;
      width: 70%;
    }

    .main_nav ul li {
      display: inline-block;
      margin-right: 10%;
    }

    .main_nav ul li:nth-child(1){
      margin-left: 3%;
     }

    .main_nav ul li a {
      display: block;
      list-style: none;
      text-decoration: none;
      font-size: 1.3em;
      color: #BB9FC3;
      text-shadow: 2px black;
    }

    .main_nav ul li a:hover {
      color: #666666;
    }

    .language_bar ul li {
      margin-top: 0;
      text-align: right;
    }

    .mobile_nav, .veggieburger {
      display: none;
    }

    body {
      margin: 0 auto;
      background-color: white;
    }

    .hero {
      max-height: 300px;
      overflow: hidden;
      position: relative;
    }

    img.banner {
      opacity: 0.3;
    }

    .hero h1 {
      position: absolute;
      margin: 0;
      width: 100%;
      text-align: center;
      top: 40%;
      font-size: 3em;
    }

    .hero h2 {
      position: absolute;
      margin: 0;
      width: 100%;
      text-align: center;
      top: 60%;
      font-size: 1em;
  /*    font-style: italic;*/
        }

    h2, h3 {
      font-size: 1.5em;
    }

    h2.sub {
      font-size: 1.3em;
    }

    p {
      font-size: 1em;
    }

    table.announcement-table td.announcement-date {
      line-height: 2;
      text-align: right;
      width: 40%;
    }

    table.announcement-table td.announcement-date {
      padding: 2%;
    }

    #services, #jp_services {
      border-radius: 0 0 5% 5%;
    }

    #services h2.section_title, #jp_services h2.section_title {
      font-size: 3em;
      text-align: left;
    }
  
    #services h2.sub, #jp_services h2.sub {
      text-align: left;
    }

    #services_list {
      margin-top: 2%;
      margin-bottom: 2%;
    }

    ul.right {
      float: left;
      padding-left: 15%;
    }

    ul.left {
/*      padding-left: 15%;*/
    }

    #jp_access, #access {
      width: 49%;
      float: right;
      border-left: 2px solid #C8ADBF;
    }

    #jp_walk-in-hours, #walk-in-hours {
      width: 49%;
      float: left;
    }

    .jp_walk-in-hours-text p.section_info {
      text-align: center;
    }

    #jp_services, #services {
      float: left;
      padding: 3% 2% 3% 5%;
    }

    #jp_services {
      width: 60%;
    }

    #services {
      width: 50%;
    }

    #care {
      width: 33%;
      float: left;
      background-color: #f7f7f7;
      padding: 2%;
      margin-top: 4%;
      margin-left: 3%;
      -webkit-box-shadow: 10px 10px 8px 0px rgba(0,0,0,0.32);
      -moz-box-shadow: 10px 10px 8px 0px rgba(0,0,0,0.32);
      box-shadow: 10px 10px 8px 0px rgba(0,0,0,0.32);
    }

    #payment {
      width: 44%;
      float: left;
      border-radius: 5%;
      background-color: #f7f7f7;
      padding: 2%;
      margin-top: 4%;
      margin-left: 3%;
      -webkit-box-shadow: 10px 10px 8px 0px rgba(0,0,0,0.32);
      -moz-box-shadow: 10px 10px 8px 0px rgba(0,0,0,0.32);
      box-shadow: 10px 10px 8px 0px rgba(0,0,0,0.32);
    }

    .jp_top-information, .top-information {
      background-color: white;
    }

    .important_info, .jp_important-info {
      margin-bottom: 1%;
    }

    footer {
      padding: 3% 3% 1% 3%;
      text-align: center;
    }

    .footer_text {
    }

    h1.footer_title {
      color: white;
      font-size: 2em;
      text-align: center;
    }

    h3.footer_details {
      font-size: 1em;
      text-align: center;
    }

    p.phone {
      padding-bottom: 0;
      padding-top: 1%;
      display: inline;
    }

    table.announcement-table td {
   /*   padding: 1%;*/
    }

    h1.announcement-head {
      padding-top: 18px;
      padding-bottom: 0px;
    }
  
    table.announcement-table {
       width: 50%;
       margin: 0 auto;
    }
}

 @media only screen and (device-width:768px) 

  and (-webkit-min-device-pixel-ratio: 1) {

     #special_announcement {
      width: 100%;
    }

    .announcement-info {
      padding-top: 3%;
      padding-bottom: 3%;
      border-radius: 8px;
    }

    table.announcement-table {
      margin-top: 0;
      float: right;
      display: inline-block;
    } 

    table.announcement-table td {
      padding: 1.5%;
    }

    table.announcement-table td.announcement-date {
      
    }

    h1.announcement-head {
      margin-bottom: 1%;
    }

  }

  @media screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 960px) {
  .jp_top-information, .top-information, .jp_important-info, .important_info {
      width: 85%;
      margin: 0 auto;
  }
}