/* Provide a background color for the entire website*/
body{
    background-color: #111111;
}

/* Provides the styling for the navigation bar */
h1{
    font-size: 35pt;
    text-align: center;
    color: white;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}
/* Change the active link color to #86282e */
.active {
    background-color: #86282e;
}
/* move the ichiban logo to the right on the nav bar */
li#IchLogo {
    float: right;
    padding-right: 5%;
}
/* change background color of hover to none for logo*/
li#IchLogo a:hover {
    background-color: #333333;
}

/* style the photo of the ichiban building on the home page */
.IchBuild {
    text-align: center;
    padding-top: 3%;
    padding-bottom: 3%;
}
/* make two columns to put content in contains */
.row {
    background-color: #333;
    display: flex;
}

.column {
    background-color: #333;
    flex: 50%;
}
/* style the column headings */
.homeInfo {
    text-align: center;
    color: white;
    padding: none;
}
/* style the different hours */
li.hours {
    float: left;
    clear: left;
    padding-top: 30px;
    padding-left: 35%;
    color: white;
    font-size: 20px;
}
/* Styling to provide google maps container */
.mapouter {
    position:relative;
    text-align:right;
    height:500px;
    width:600px;
}

.gmap_canvas {
    overflow:hidden;
    background:none!important;
    height:500px;
    width:600px;
}
*, *:after, *:before {
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
}

// clear all the things
@mixin clearfix() {
&:after, &:before {
              display: table;
              content: " ";
              line-height: 0;
              font-size: 0;
              clear: both;
          }
}

.container {
@include clearfix;
    width: 80%;
    background-color: #111111;
    margin: 1em auto;
    border: 20px solid #333333;
    padding: 10px;
}

p {
    font-size: .9em;
    margin-bottom: 1.5em;
    font-style: italic;
    text-align: center;
}

.group-header {
    float: right;
    font-weight: 700;
    width: 20%;
    margin: .7em 0 1em 0;
span {
    float: left;
    width: 50%;
    text-align: center;
    display: block;
}
}

h3 {
@include clearfix;
    position: relative;
    font-weight: 700;
    margin: .7em 0 1em 0;
span {
    float: left;
    width: 10%;
    text-align: center;
    display: block;
&:first-child {
     width: 40%;
     text-align: left;
 }
}
.dots {
    width: 40%;
    border-bottom: 2px dotted #ccc;
    margin-top: .8em;
}
}
/* Styling for the menu header */
.headMenu {
    text-align: center;
    font-family: Helvetica;
    padding-bottom: 10px;
}
/*Styling for the sub menus */
.subMenu {
    text-align: center;
    font-family: Helvetica;
}
/*Styling for the prices */
.price {
    float: right;
}
/* create a dotted line to make the menu look more readable */
.line {
    border-bottom: 1px dotted black;
}
/* Styling to create an aesthetic online ordering form */
.bg-img {
    /* The image used */
    background-image: url(food.jpg);

    /* Control the height of the image */
    min-height: 800px;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.bg-img-home {
    /* The image used */
    background-image: url(7.PNG);

    /* Control the height of the image */
    min-height: 800px;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/*  styles to the form container */
.order-container {
    position: absolute;
    right: 0;
    margin: 20px;
    max-width: 500px;
    padding: 16px;
    background-color: white;
}

/* Full-width input fields */
input[type=text], input[type=time], input[type=tel],input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus, input[type=tel]:focus{
    background-color: #ddd;
    outline: none;
}

/* style for the submit button */
.btn {
    background-color: #86282e;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.btn:hover {
    opacity: 1;
}
/* style the big sentence in the home page */
.homeHead {
    text-align: center;
    font-family: Helvetica;
    color: white;
}
/* Style the paragraphs in the about us page */
.aboutP {
    text-align: left;
    font-family: Helvetica;
    color: white;
    font-size: 18px;
    font-weight: revert;
    letter-spacing: 1px;
    line-height: 30px;
}
/* create a border around the about us container */
.aboutUs {
    margin-top: 30px;
    border: #333 20px solid;
    margin-bottom: 30px;
}
/* center class to center anything */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.menupic {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    border: #333333 5px solid;
}

footer {
    background-color: #333333;
    text-align: center;
    color: white;
    border: black 5px solid;
}

.bx-wrapper img {
    margin: 0 auto;
}