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




body{
	background: url("../ramenImages/noodleBowl2.png") top center no-repeat, url("../ramenImages/edgyjapbg.jpg") ;
	background-size: 48%, auto;
}

/*** HEADER ***/

div.header{
	background: rgba(143,4,4,0.90);
	
}
div.header img{
	margin-bottom:5px;
	margin-top:5px;
}

div.header-content{
	
	text-align: center;
}

/*** SPLASH ***/


div.splash br{
	display:none;
}

div.splash{
	font-family: "Jockey One", serif;
	text-align: center;
	font-size: 50px;
	margin-top: 390px;
	color:white;
	text-shadow: 6px 6px 0px #203759;
}

div.splash span{
	font-size: 30px;
}

/*** Nav Buttons ***/
div.nav{
	
	align-content: center;
	position: relative;
	padding-top:30px;
	margin-bottom: 90px;
	
}

div.nav span{
	display:none;
}
div.nav img.tooltipImg{
	position: absolute;
	left: 20%;
	top: 0px;
	display:block;
	visibility: hidden;
	transition:0.3s;
	margin:0 auto;
}

img#contactTEXT{
	margin-left: 25px;
}

div.nav:hover img.tooltipImg{
	visibility:visible;
	transition:0.3s;
}

a.navbtn{
	display:block;
	height:50px;
	padding:40px 10px;
	border-radius: 60px;
	cursor:pointer;
	margin:0 auto;
	font-family: "Jockey One", serif;
	font-size: 30px;
	color:white;
	text-align: center;
	transition: 0.5s;
	
}
a#menuBtn{
	background:url("../ramenImages/menuBTN.png") center center no-repeat;
	background-size:contain;
}
a#contactBtn{
	background:url("../ramenImages/contactBTN.png") center center no-repeat;
	background-size:contain;
}
a#aboutBtn{
	background:url("../ramenImages/aboutBTN.png") center center no-repeat;
	background-size:contain;
}

/*** MENU ***/


div.menu{
	background:#be2831;
	border-radius: 50px;
	display:grid;
	grid-template-columns: auto auto auto ;
	gap: 15px;
	text-align: center;
	color:white;
	padding-bottom:30px;
}

div.menu h2{
	display:block;
	grid-column-start: 1;
	grid-column-end: 4;
	
	font-family: "Jockey One", serif;
	font-size: 60px;
	text-shadow: 4px 4px 0px #203759;
	
}

div.menu h3{
	display:block;
	grid-column-start: 1;
	grid-column-end: 4;
	
	font-family: "Jockey One", serif;
	font-size: 30px;
	text-shadow: 4px 4px 0px #203759;
	
}

div.menuItem{
	padding: 0 15px;
	justify-content: center;
	align-self: center;
}

div.menuItem img{
	width: 90%;
	border-radius: 20px;
}

div.menuItem h4{
	padding:10px 0px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: 800;
	text-shadow: 2px 2px 0px #203759;
}

div.menuItem p{
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding:0 20px;
}

/*** Contact ***/

div.contact{
	background: #203759;
	border-radius: 50px;
	margin:50px 0px;
	padding:30px 0;
}


div.contact iframe{
	float:left;
	padding-right: 30px;
	padding-left: 30px;
}

div.contact input, label{
	display:block;
}

div.contact input, textarea{
	background:rgba(250,151,153,1.00);
	width:38%;
}

div.contact input:hover, textarea:hover{
	cursor: text;
}

div.contact textarea{
	resize:none;
	height:70px;
	margin-bottom:10px;
}

div.contact h2, h3, h4, label, a{
	color:white;
	font-family: "Jockey One", serif;
}

div.contact h2{
	font-size: 60px;
	text-shadow: 4px 4px 0px #be2831; 
}

div.contact h3{
	font-size: 30px;
}
div.contact h4{
	font-size: 40px;
	text-shadow: 3px 3px 0px #be2831;
}

div.contact a{
	font-size: 30px;
	background: #be2831;
	padding:5px 25px;
	border-radius: 30px;
}

div.contact a:hover{
	box-shadow: 0px 0px 10px 5px rgba(1,8,31,1.00);
	transition:0.3s;
	cursor: pointer;
	
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* 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.4); /* Black w/ opacity */
}

.modal-content {
 	background-color: #be2831;
	text-align: center;
	width:30%;
	margin: 0 auto;
	font-size: 50px;
	font-family: "Jockey One", serif;
	border-radius: 50px;
	padding:10px;
	color:white;
}

.modal-content span{
	font-size: 15px;
}


/*** ABOUT SECTION ***/


div.about .fivecol img{
	border-radius: 200px;	
}
div.about .fivecol{
	padding:30px 0 30px 30px;
}

div.about{
	background:#be2831;
	border-radius: 50px;
	margin-bottom: 20px;
}

div.about h1{
	font-family: "Jockey One", serif;
	font-size: 60px;
	text-shadow: 4px 4px 0px #203759;
	color:white;
}

div.about h2{
	font-family: "Jockey One", serif;
	color:#203759;
	text-shadow: 2px 2px 0px white;
	font-size: 90px;
	margin-top:-30px;
	margin-bottom:-15px;
}

div.about h3{
	font-size: 30px;
	margin-bottom: 0px;
}

div.about p{
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color:white;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*** up button ***/

div.upbtn img{
	display:none;
}

div.upbtn {
	background: #203759;
	text-align: center;
	margin-bottom:30px;
	margin-top:10px;
	padding-top:10px;
	padding-bottom:10px;
	border-radius: 25px;
	transition:0.3s;
}

div.upbtn:hover{
	background:#be2831;
	cursor: pointer;
}



/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

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

	body {
		background: url("../ramenImages/noodleBowl2.png") top center no-repeat, url("../ramenImages/edgyjapbg.jpg") ;
		background-size: 158%, auto;
	}
	
	/*** mobile splash***/
	
	div.splash{
		font-size:35px;
		margin-top:100px;
	}
	
	div.splash span{
		font-size: 20px;
	}
	
	div.nav span{
		display:block;
		text-decoration: none;
		font-size:40px;
		padding: 10px 5px;
}
	
	
	/*** mobile nav***/
	
	a.navbtn{
		width:50%;
	}
	a#menuBtn{
	background:#203759;
}
	a#contactBtn{
	background:#203759;
}
	a#aboutBtn{
	background:#203759;
}
	
	div.nav{
		margin-bottom:5px;
	}
	div.nav:hover img.tooltipImg{
	visibility:hidden;
}
	
	/*** mobile menu***/
	
	
	div.menu{
		grid-template-columns: auto auto;
	}
	div.menu h3{
	display:block;
	grid-column-start: 1;
	grid-column-end: 3;
	font-size: 30px;
	margin-top:20px;
}
	div.menu h2{
	display:block;
	grid-column-start: 1;
	grid-column-end: 3;
	font-size: 60px;
	margin-top:20px;
}
/*
	div.menuItem img{
		display:none;
	}
*/
	
	/*** mobile contact***/
	
	div.contact{
		text-align: center;
	}
	
	div.contact iframe{
		width:84%;
		height:50%;
		margin-bottom: 20px;
	}
	
	div.contact h2, h3, h4, label{
	margin-bottom:5px;
	}	
	
	div.contact h2{
		margin-bottom: 20px;
	}
	div.contact h3{
		margin-top:10px;
		margin-bottom: 30px;
	}
	
	div.contact h4{
		margin-bottom: 30px;
	}
	
	div.contact fourm, textarea, input{
		width:80%;
		margin:0 auto;
	}
	
	div.contact a{
		width:200px;
		display:block;
		margin:0 auto;
	}
	
	/*** about mobile***/
	
	div.about h1{
		margin-bottom:35px;
	}
	div.about h2{
		margin-bottom:35px;
	}
	div.about h3{
		margin-bottom:55px;
	}
	
}


/* ========================================== */
/* ! 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;
	}*/

}