body{
	
	background-color: #D9F1F1;
	height: fit-content;
}

.header h1{
	display: inline;
	font-family: Castellar;
	font-size: 70pt;
}
.header{
	
}
#title{
	position: relative;
	display: inline;
	color: #6E6E6E;
	left: 210px;
	top: -70px;
  	margin: 0 auto;
}
#logo{
	position: relative;
	display: inline;
	left: 210px;
	top: 10px;
}
#logo img{
	width: 200px;
	height: 200px;
	
}
.navigation{
	position: relative;
	display: flex;
	justify-content: center;
	top: -70px;
}
.navigation ul{
      
      text-align: center;
      }

.navigation li{
      display: inline-block;
      
      }
.menu a:link, a:visited{
      display: block;
      text-decoration: none;
      color: white;
      padding: 4px;
      width: 110px;
      background-color: #6E6E6E;
      }
.navigation a:hover, a:active{
      background-color: #6c2b65;
      }

.homepage{
	display: flex;
	justify-content: center;
 	position: relative;
	width: 75%;
	height: 420px;
	left: 190px;
	top: -40px;
	background-color: #70A589;
}
#intro{
	text-align: center;
	font-family: Castellar;
	font-size: 30pt;
	color: #FFFF;
	padding-top: 60px;
}
#quote{
	font-family: Agency FB;
	font-size: 30pt;
	color: #FFFF;
	padding-top: 80px;
}
.homepage a{
	font-family: initial;
	font-size:20pt ;
	border-radius: 2px;
}
.homepage a:link, a:visited{
      text-decoration: none;
      color: white;
      padding-left: 30px;
      padding-right: 30px;
      padding-top: 4px;
      padding-bottom: 4px;
      width: 110px;
      background-color: #3E3E3E;
      }
.homepage a:hover, a:active{
      background-color: #6c2b65;
      }

.m-homepage{
	border-radius: 22px;
	display: flex;
	justify-content: center;
 	position: relative;
	width: 75%;
	height: 490px;
	left: 190px;
	top: -40px;
	background-color: #70A589;
}
#m-title{
	position: relative;
	left: 90px;
	text-align: center;
	font-family: Castellar;
	font-size: 30pt;
	color: #FFFF;
	padding-top: 0px;
}
.listt{
	display: inline;
	height: 490px;
}
div.listt>div{
	display: inline;
	position: relative;
 	height: 123px;
  
  

}
.LaTrinidad{
	left: -593px;
	top: 98px;
	display: inline;
}
.Itogon{
	left: -370px;
	top: -2px;
	
}
.Sablan{
	left: -161px;
	top: -342px;
	
}
.Tuba{
	left: 50px;
	top: -442px;
}
.Tublay{
	left: 250px;
	top: -782px;
}
.listt img{
	width: 170px;
	height: 170px;
	
}
.bts{
	text-align: center;
}
.bts a{
	font-family: initial;
	font-size:20pt ;
	border-radius: 2px;
}
.bts a:link, a:visited{
      text-decoration: underline;
      color: white;
      padding: 0px;
      width: 110px;
      background-color: transparent;
      }
.bts a:hover, a:active{
	color: darkgreen;
      background-color: transparent;
      }

.ltb-homepage{
	border-radius: 22px;
 	position: relative;
	width: 85%;
	height: 900px;
	left: 110px;
	top: -40px;
	background-color: #70A589;
}
.itogon-homepage{
	border-radius: 22px;
 	position: relative;
	width: 85%;
	height: 2840px;
	left: 110px;
	top: -40px;
	background-color: #70A589;
}
.vibes-homepage{
	border-radius: 22px;
 	position: relative;
	width: 85%;
	height: 1550px;
	left: 110px;
	top: -40px;
	background-color: #70A589;
}
#individual-title{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-evenly;
	gap: 10px;
	position: relative;
	font-family: Bodoni MT Poster Compressed;
	font-size: 48px;
  	color: #30569E;
  	top: 20px;

}
#individual-title img{
	width: 100px;
	height: 100px;
}
.cafe{
	display: flex;
	flex-wrap: wrap;
	height: 490px;
	position: relative;
	top: 60px;
	left: 10px;
	background-color: #508569;
	border-radius: 20px;
	width: 98%;
	height: auto;
}

.addedcafe{
	display: flex;
	flex-wrap: wrap;
	height: 490px;
	position: relative;
	top: 60px;
	left: 10px;
	border-radius: 20px;
	width: 98%;
	height: auto;
}

.cafename{
	font-family: Bell MT;
	font-size: 30px;
	text-decoration: underline;
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	padding: 20px;
}
.menu img{
	width: 413px;
	height: 640px;
	border-radius: 10px;
	
}
.e-menu{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 40px;
	padding: 8px;
	width: 1266.15px;

}
.e-menu img{
	width: 453px;
	height: 640.7px;
	border-radius: 20px;
	
}
.menu{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 5px;
	padding: 8px;
	width: 1266.15px;

}


.m-header{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	height: 25px;
}
.m-navigation{
	position: relative;
	display: flex;
	justify-content: space-between;
	top: 10px;
	font-family: Times New Roman;
	font-size: 15pt;
}
.m-navigation ul{
      
      text-align: center;
      }

.m-navigation li{
      display: inline-block;
      }
    
.m-navigation a:link, a:visited{
      display: block;
      text-decoration: none;
      color: white;
      padding: 8px;
      width: auto;
      background-color: #6E6E6E;
      border-radius: 10px;
      }
.m-navigation a:hover, a:active{
      background-color: #6c2b65;
      }

.about{
	display: flex;
 	position: relative;
	width: 75%;
	height: 420px;
	left: 190px;
	top: -40px;
	background-color: #70A589;
}
#details{
	width: 80%;
	display: inline;
	position: relative;
	top: 70px;
	left: 110px;
	text-align: justify;
	font-family: Times New Roman;
	font-size: 22px;
	color: #ffff;
}
#about_us{
	position: absolute;
	text-align: center;
	font-family: Castellar;
	font-size: 30pt;
	color: #FFFF;
	 top: -10px;
  	left: 450px;
  }