@charset "UTF-8";
/* CSS Document */

/*Background Image*/
html {scroll-behavior:smooth;}
body{background:url("images/ramenbgimage.jpg") top center no-repeat; padding-bottom:170px; background-size:100% }
img {width:100%;}

/*Navigation*/
.header {background:url("images/navigation.bar.png") top center no-repeat; background-size: cover;}
.header a {color:rgba(246,247,250,1.00); text-decoration:none; font-size: 25px; display:block; margin-top:75px;}
.header .logo a {margin-top:0}
.header a:hover {color:rgba(196,167,66,1.00)}
.header img {margin-top:40px;}
.header .social a {margin-top: 35px;}
.header span {display:none}


/*Content*/
div.col-5.homelink {/*background:url("images/bluecircle.png") top center no-repeat; background-size:100%;*/ margin-top:200px;}
.homelink a {color:rgba(213,110,19,1.00); font-size: 8vw;text-decoration:none; font-family: "houschka-pro", sans-serif; font-weight: 700; font-style: normal; background:rgba(20,27,73,.88); border-radius:50%; display:block; height:0; padding-top:20%; padding-bottom:80%; padding-left:15%; line-height:115px;}
.homelink a:hover {color:rgba(196,167,66,1.00)}

/*(MENU)*/
body {background-color:rgba(20,27,73,1.00)}
.menu h1 {font-size:85px; margin-top:120px; text-align:center; color:rgba(246,247,250,1.00)}
.starters h1 , .ramen h2 {color:rgba(246,247,250,1.00);}
.starters p, .ramen p {color:rgba(246,247,250,1.00);}

/**(ABOUT)**/
.about p {color:rgba(246,247,250,1.00); }
.about img {float:right; width:30%;}

/**(CONTACT)**/
.contact iframe {margin-left:30px; height:300px; width:350px;}
.contact p {color:rgba(246,247,250,1.00); margin-left:75px; margin-top:70px; line-height:1px}
.hours p {color:rgba(246,247,250,1.00); font-family: "houschka-pro", sans-serif; font-size:19px; margin-left:75px;}
.hours li {color:rgba(246,247,250,1.00); font-family: "houschka-pro", sans-serif; font-size:19px; margin-left:75px;}
.hours {margin-bottom:30px;}



/*MODAL?*/
.modal-window {
  position: fixed;
  background-color: rgba(0,0,0, 0.65);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  &:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  & > div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: rgba(20,27,73,.88);
	  border-radius: 11px;
		  border:6px solid #c4a742; 
  }
  header {
    font-weight: bold;
  }
  h1 {
    font-size: 150%;
    margin: 0 0 15px;
  }
}
.modal-window p {color:rgba(196,167,66,1.00);}
.modal-window h1 {color:rgba(213,110,19,1.00);}
.modal-close {
  color: #d56e13;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
  &:hover {
    color: #f6f7fa;
  }
}

/**(RESERVATION FORM)**/
.Reservation {margin-top:150px}
.text h1 {display:block; margin-top:140px}
.text h1, p {color:rgba(246,247,250,1.00);}
form.Reservation input {border:6px solid #c4a742; width:40%; border-radius:11px; padding:10px; font-family: "houschka-pro", sans-serif; font-weight: 700; margin-bottom:28px; margin-left:30px; }
form.Reservation textarea {resize:none; width:88%; border:6px solid #c4a742; border-radius:11px; padding:10px; font-family: "houschka-pro", sans-serif; font-weight: 700; margin-bottom:28px; margin-left:30px; height:200px;}
.Reservation a {text-decoration:none; background-color:rgba(213,110,19,1.00); color:rgba(246,247,250,1.00); font-family: "houschka-pro", sans-serif; font-weight:700; padding: 15px 20px; text-align:center; width:80px; border-radius:100px; margin-left:30px;}

/***(HAMBURGER STYLES)***/

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(20,27,73,.88);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: rgba(246,247,250,1.00);
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color:rgba(196,167,66,1.00);
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

/****(MOBILE STYLE)****/

@media only screen and (max-width: 600px) {
	
	.header span {display:block; color:white; font-size:100px; margin-right:50px; line-height:80px; }
	.header span:hover {color:rgba(196,167,66,1.00)}
	.header a {display:none; }
	.header .logo a {display:block;}
	body {background:url("images/mobile.background.jpg")top center no-repeat;background-size:cover;}
	.homelink a {font-size: 11vw; padding-top:10%; padding-bottom:50%; width:50%; line-height:65px;}
	div.col-5.homelink {margin-top:355px;}
	body {background-color:rgba(20,27,73,1.00)}
	.row.contactInfo {width:70%; margin:0 auto}
	.text h1, p {margin-left: 30px; margin-top: 30px}
	.about img {float:right; width:50%;}
	.logo img {margin-left:30px;margin-top:20px}
	form.Reservation textarea {resize:none; width:80%; border:6px solid #c4a742; border-radius:11px; padding:10px; font-family: "houschka-pro", sans-serif; font-weight: 700; margin-bottom:28px; margin-left:30px; height:200px;}
}