@charset "utf-8";
/* CSS Document */
h2{font-family: "museomoderno", sans-serif; font-weight: 400; color:rgba(20,27,73,1.00);}
h1{font-family: "barlow", sans serif; font-style:normal; color:rgba(20,27,73,1.00); font-weight: 600;}
p{font-family: "barlow", sans serif; font-style:normal; color:rgba(20,27,73,1.00); font-weight: 400; font-size: 50px;}
a {color: white;}
img {width:100%;}
/*Header*/
div.row.header {background-color: rgba(20,27,73,1.00);}
div.row.header img{width:100%}
div.row.header div.container h1{color:#fffcf4}
div.row.header div.container a{text-decoration: none; font-size: 40px; display:block; width:100%; text-align:center; margin-top: 40px;}
div.row.header div.container div.col-2 div.mySidepanel.sidepanel {display:none}
div.row.header div.container button.openbtn {display:none}
div.photologo div.row img{width:100%}
div.body {background: url("images/bamboo-mat-2.png");}
div.body div.container div.row div.col-5-sm a {width:100%;}
div.body div.container div.row div.col-6-sm img {width:100%}



/*SIDE NAV*/
.sidepanel  {
  width: 0;
  position: fixed;
  z-index: 1;
  height: cover;
  top: 0;
  left: 0;
  background-color: rgba(20,27,73,0.70);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
 background:none;
  border: none;
}



/*MOBILE*/
@media only screen and (max-width: 700px) { 
	
	div.row.header div.container button.openbtn {display:block; padding-top:20px}
	div.row.header div.container div.col-2-sm img.desktop {display:none;}
	div.desktop img {display:none;}
	div.row.header div.container div.desktop a {display:none;}
}

/*ABOUT*/
div.about1 div.container div.row div.col-10 {background-color: rgba(20,27,73,1.00); height: 10px; width:100%}
div.about2 h1 {font-family: "barlow", sans-serif; font-weight: 600; font-style:normal; text-align: center;}
div.about3 div.container div.row div.col-7 h2 {font-family: "barlow", sans serif; color: rgba(20,27,73,1.00); font-size: 20px; border: none; margin:0; font-weight: 400;}
div.about4 div.container div.row div.col-10 h2{color:rgba(20,27,73,1.00);}
div.about4 h2 {font-family: "museomoderno", sans-serif; text-align: center;}
div.about4 div.container div.row div.col-10 p{font-weight:400; font-size: 25px;}
div.about {background: url("images/bamboo-mat-2.png");}

/*MENU*/
div.menu div.menu2 div.container div.row div.col-8 {background:url("images/ramenalet-inner-logo2-left.png") top left no-repeat, url("images/ramenalet-inner-logo2.png") top right no-repeat rgba(20,27,73,1.00); text-align: center;}
div.menu1 div.container div.row div.col-10 {background-color: rgba(20,27,73,1.00); height: 10px; width:100%}
div.menu2 div.container div.row div.col-8 {display:flex; align-content: center; text-align: center; padding:25px 0;}
div.menu2 h1 {font-family: "barlow", sans-serif; font-weight: 600; font-style: normal; color:white; text-align:center; width:100%;}
div.menu3 div.container div.row div.col-10 {background-color:rgba(20,27,73,0.75); margin:5px; }
div.menu3 p, div.menu3 h2 {padding-left:5%; padding-right:5%;}
div.menu3 p{color:white; font-size:20px;}
div.menu3 div.container div.row div.col-10 h2.headline {font-style:bold; font-size:50px;}
div.menu3 h2 {color: white;}
div.menu {background: url("images/bamboo-mat-2.png");}

/*CONTACT*/
div.contact1 div.container div.row div.col-10 {background-color: rgba(20,27,73,1.00); height: 10px; width:100%}

div.contact div.contact2 div.container div.row div.col-8 h1{margin:0; text-align: center;}
div.contact div.contact3 div.container div.row div.col-6 h2{font-size: 15px; margin-top: 0;}
div.contact {background: url("images/bamboo-mat-2.png");}
div.reservationform textarea{resize: none; display:block;}
div.contact div.row.form div.container div.col-10 div.reservationform input.size1 {width:45%; margin-right: 10px;}
div.contact div.row.form div.container div.col-10 div.reservationform input.size2 {width:45%; margin-left: 10px;}
div.contact div.row.form div.container div.col-10 div.reservationform div.party h2 {margin-bottom:0; font-size:20px}
div.contact div.row.form div.container div.col-10 div.reservationform div.party p {font-size: 15px;}
div.contact div.row.form div.container div.col-10 div.reservationform div.party {display:flex;}
div.contact div.row.form div.container div.col-10 button {font-family: "museomoderno", sans-serif; background-color:rgba(20,27,73,0.75); color:white;}

/*MY PROBLEMS*/
/*thicker line on bowl, photo logo's logo is fuzzy,*/