/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

/*GENERAL*/

body {background:url("../images/background.jpg"); background-attachment: fixed; background-size: cover; font-family: nanum-gothic, sans-serif; color: white; font-size: 12pt;}
a:hover {transform:scale(1.05);transition: 0.3s;}
h1 {text-align: center; font-family: brushberry-script, sans-serif; font-size: 60px; font-weight: lighter; margin-top: 30px; margin-bottom: 30px;}
h2 {text-align: center; font-size: 20px; text-transform: uppercase; color:#ec8b1f; text-shadow: 0 0 5px #161d4a;}
h3 {color:#ec8b1f; line-height: 50px; text-transform: uppercase; text-shadow: 0 0 5px #161d4a;}

div.container.button a {font-family: nanum-gothic, sans-serif; font-size: 25px; font-weight: bold; color: white;  display: block; border: 2px solid #ec8b1f; border-radius: 15px; padding: 20px;text-align: center; width:45%; margin:0 auto; margin-top: 100px; margin-bottom: 100px; text-shadow: 0 0 5px #161d4a; box-shadow: 0 0 5px #161d4a;}
div.container.button a:hover {background-color: rgba(22,29,74,.5);}
div.container.button {background:rgba(0,0,0,.6); /*padding-top: 50px;*/}
div.container.button.contact {background:none;}
div.container.button.home {background:none; padding-bottom:50px;}

.container {position:relative; z-index:100;}

::-moz-selection {
  
  background: rgba(22,29,74,.8);
  color:#ec8b1f;
}

::selection {
  
  background: rgba(22,29,74,.8);
  color:#ec8b1f;
}


/*HEADER*/

div.header a {display: block; margin-top: 90px; color: #ec8b1f; font-size: 25px; font-weight: bold; text-align: center;}
div.header a.logo {margin-top: 65px;}
div.header a:hover {color: white;}
div.mobile {display:none;}

/*HOME CONTENT*/

div.content.home {font-family: komu-a, sans-serif; font-size: 200px; color: #ec8b1f; font-weight:400; margin-top: 120px;}
div.cta {padding-top:30px;text-align: center;}
div.content.home p {text-shadow: 0 0 10px #161d4a;}
div.content.home p.with {line-height: 15px; margin-top: 15px; margin-bottom: -10px; letter-spacing: -5px; color: white; font-family: brushberry-script, sans-serif; rotate:-10deg; font-size: 120px; padding-bottom: 50px;}

/*ABOUT CONTENT*/

body.aboutpage {background:black; background-size: cover;}
body.aboutpage div.header {background:rgba(0,0,0,.6); padding-bottom: 60px;}
div.container.about{background-color:rgba(22,29,74,.9);  text-align: left;}
div.container.about div.row {padding-bottom: 80px;}
div.container.owner{margin-top: 500px;}
div.about p {font-size: 18px; line-height: 22px; text-align: justify;}

blockquote {
  display: block;
  font-size: 21px;
  line-height: 22px;
  font-style: italic;
  margin-top: 10px;
  padding-top: 40px;
  padding-bottom: 45px;
  text-align: center;
  background: 
    url("../images/q1.png") top left no-repeat,
    url("../images/q2.png") bottom right no-repeat;
  background-position-y: 
    -3px, /* for the first image */
    50px; /* for the second image */
	background-size: 
    12%, 
    12%;
}

div.photo img {border-radius: 50%;}

/*MENU CONTENT*/

body.menupage {background:black; background-size: cover;}
body.menupage div.header {background:rgba(0,0,0,.6); padding-bottom: 60px;}
a {text-decoration: none;}
p.price {color: #ec8b1f; font-style: italic;}
div.menu p{font-size: 18px; line-height: 22px;}
div.menu h2{margin-top: 15px; line-height: 40px; text-align: left;}
div.container.menu{background-color:rgba(22,29,74,.9); padding-bottom: 80px;}
div.container.ramen{margin-top: 500px;}


/*CONTACT CONTENT*/

body.contactpage {background:url("../images/contact.jpg") top center no-repeat; background-size: cover; background-attachment: fixed;}

iframe {border-radius: 15px; box-shadow: 0 0 5px #161d4a; margin-bottom: 15px;}
div.map p {line-height: 22px; text-shadow: 0 0 5px #161d4a;}

form{background: rgba(22,29,74,.8); padding-bottom:20px; padding-top:20px; border-radius: 15px; box-shadow: 0 0 5px #161d4a; width: 100%;}
input,textarea {width: 85%; font-family: nanum-gothic, sans-serif; font-size: 15px; font-weight: bold; background: rgba(236,139,31,.7); border-radius: 10px; padding: 15px; color:white; margin: 13px auto 0 auto; border: none; display:block;}
textarea{resize: none; height: 100px;}
::placeholder{color: #161d4a;}

form a {font-family: nanum-gothic, sans-serif; font-size: 15px; font-weight: bold; color: #161d4a;  display: block; border-radius: 10px; padding: 15px; background-color: #ec8b1f; text-align: center; width:20%; margin:0 auto; margin-top: 40px; margin-bottom: 25px; box-shadow: 0 0 5px #161d4a; cursor:pointer;}


/* CHECKBOX - The container */
.checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
	margin: 13px 0 12px 34px;
	padding-top: 4px;
  cursor: pointer;
	
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: rgba(236,139,31,.7);
  border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
  background-color: white;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #161d4a;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background: rgba(22,29,74,.8);
  margin:200px auto 0 auto;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 0 5px #161d4a;
  width: 50%;
}

/* The Close Button */
.close {
  color: #ec8b1f;
  float: right;
  font-size: 30px;
  font-weight: bold;
	line-height: 20px;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
.modal-content p {font-size: 20px; text-align: center;}
.modal-content a {font-family: nanum-gothic, sans-serif; font-size: 15px; font-weight: bold; color: #161d4a;  display: block; border-radius: 10px; padding: 15px; background-color: #ec8b1f; text-align: center; width:20%; margin:0 auto; box-shadow: 0 0 5px #161d4a; cursor:pointer;}
.modal-content h3 {text-transform:inherit; font-size: 20px; line-height: 60px; text-align: center;}


/*FOOTER*/

div.footer { background:rgba(22,29,74,.8); padding-top:50px; padding-bottom:50px;}
div.footer p {font-weight: bold;line-height: 25px; font-size: 18px;}
div.footer span {color: #ec8b1f;}
div.footer a {display:block;}
div.hours {text-align: center;margin-top: 23px;}
div.social {margin-top: 23px;}
div.socialwrapper {display: none;}

/*Fixes floats breaking their parent div (row)*/

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

/*Hamburger*/

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  background-color: rgba(22,29,74,.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  line-height: 50px;
}
.mobile span {color:#ec8b1f; font-size: 45px;}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  font-weight: bold;
  color: white;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #ec8b1f;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 50px;
  color: #ec8b1f;
  margin-top: 15px;

}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {background:url("../images/mobile-home.jpg") /*top center no-repeat*/; background-attachment: fixed; background-size: cover;}
	h1 {font-size: 40px; line-height: 80px;}
	div.desktop {display:none;}
	div.home.desktop {display: none;}
	div.mobile {display: block;}
	div.mobile div.sixcol {float:left; width:40%; margin-top: -30px;}
	div.mobile div.sixcol.last {text-align:right; margin-top: 40px;}
	
	div.container.button a {font-size: 20px;}
	div.container.button.home {padding-bottom:0px;}
	div.container.button.home a {margin-top: 120px;}

	
	div.content.home {font-size:150px;}
	div.content.home p.with {font-size: 100px; line-height: 125px;margin-top: 25px}
	
	body.aboutpage h1 {margin-top:0; padding-top: 30px;}
	body.aboutpage div.header {padding-bottom: 30px;}
	body.aboutpage h3 {text-align: center;}
	body.aboutpage p {text-align: left;}
	blockquote {background-position-y: 5px, /* for the first image */ 75px; /* for the second image */}
	
	body.menupage h1 {margin-top:0; padding-top: 30px;}
	div.container.ramen{margin-top: 400px;}
	body.menupage div.container.button {padding-top: 0px; padding-bottom: 10px;}
	body.menupage div.header {padding-bottom: 30px;}
	body.menupage h2 {text-align: center;}

	
	

	form {margin:80px 0 0 0;}
	iframe {display:block; margin:0 auto; width:90%;}
	body.contactpage h3,p {text-align: center;}
	.modal-content {width: 80%;}

	div.footer div.onecol.social {float:left; width:34%;}
	
	div.social {display:none;}
	div.socialwrapper {display:block; width:190px; margin:0 auto;}
	div.socialwrapper a {margin-top: 25px; margin-right: 10px; margin-left: 10px; display:inline-block;}
	div.socialwrapper a img {width:70px;}
	div.footer p {text-align: center;}
	

	
	
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/
	
}