@charset "utf-8";
/* CSS Document */
/* Fonts – the individual font files are loaded into a folder and can be referenced in the following css*/
@font-face {font-family: 'Hikurangi';
	src: url("Fonts/Hikurangi_2023.ttf") }
@font-face {font-family: 'Canela';
src: url("Fonts/CanelaText-Medium-Trial.otf")}
@font-face {font-family: 'Sansation';
src: url("Fonts/Sansation-Regular.ttf")}
@font-face {font-family: 'Opensans';
src: url("Fonts/OpenSans-Regular.ttf")}
.Banner {font-size: 50px; color:#4B4B4D; text-align:  center; font-family: 'Hikurangi'; background-image: url("Weave pattern background2.png")}/* specifies the font size in pixels for the text contained in the banner, the font colour, text is centered in the banner, and the display font “Hikurangi” is used, background image is the weave pattern*/

h1 {font-size: 2em}
/*colours Red Ochre #913831
Charcoal Grey #4B4B4D
Fern Green#4F7942
Paua Blue #007791
Linen #faf0e6 */
body {background-color: #faf0e6}
#Menu {background-color: #913831; text-align: center}
.Banner img , .logo a {float: left; width: 155px; height: auto} /* specifies the image and its link are ‘floated’ to the left of the parent container with a width of 155px, height:auto will mean the logo image maintains its original aspect ratio*/

/*order-item is the div created by the javascript*/
.order-item {border-style: solid; font-family: "Opensans"; color: #4F7942; font-size: 12px; padding: 5px;border-radius: 10px} /* specifies style of the contents of the order-item, a solid borader is placed around each item, the text has a gap of 5pixels from the edge of the border, and the border has a curved corner of 10px radius, font is opensans fern green*/

.Order {font-family: "Sansation"; color: #007791; font-size: 22px}
.Patiki {height: 50px;background-image: url("PatikiSection.svg")}/* the patiki pattern*/

.Tokomaru {width: 100%; min-height: 120vh;background-size: cover; background-image: url("Tokomaru bay- background.jpg")}/* the background pattern for webpages, 120vh means the image covers 1.2 x the whole viewport height 100% width*/
#name, #email, #message {width: 80%; align-content: center} /* the size of the items in the email contact form 80% of the width of the parent container*/
/* This is the sub menu*/
ul {list-style: none;margin: 0;padding: 0}
/*Animation for subtitle to fly in*/
@keyframes flyIn {
0% { transform: translate(-50%, -100%);
opacity: 0}
30% {opacity: 1}
/*50vw = 50% of the screen width, final position is calculated from 50% of screen width -300px, and 70px down*/
100% {transform: translate(calc(50vw - 300px), 70px);  opacity: 1}
}
.subtitle {
font-family: "Canela";
font-size: 32px;
color: #4F7942;
position: absolute; /* the subtitle can be positioned accurately within a parent element using the top and left parameters*/
top: 0;
left: 50%;
transform: translateX(-50%);/* centers the subtitle contents*/
animation: flyIn 3s ease-in-out 1s forwards; /* Duration: 3s, Delay: 1s */
opacity: 0; /* Start with opacity 0 for the initial state */
}
@keyframes flyInsmall {
0% { transform: translate(-50%, -100%);
opacity: 0}
30% {opacity: 1}
/*50vw = 50% of the screen width*/
100% {transform: translate(calc(50vw - 200px), 30px);  opacity: 1}
}/* the final position is less to the right (290 vs 300) due to smaller screen widths*/
@media (max-width: 1170px){ /* special condition for smaller screen sizes*/
.subtitle {
font-family: "Canela";
font-size: 24px;
color: #4F7942;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
animation: flyInsmall 3s ease-in-out 1s forwards; 
opacity: 0; /* Start with opacity 0 for the initial state */
}
}
/*Menu CSS controls – these can apply to any website using even quite complicated menus and submenus*/
li {display: inline-block; /*the controls are next to eachother in a line across the screen*/
background-color: #913831;
position: relative;
font-size: 25px}
ul li ul {display: none; /*hides submenu items initially*/
position: absolute;
background-color: #fff;
z-index: 2;
opacity: 1}
ul li:hover ul {display: block;} /*when the menu item is hovered over, the underlying submenu appears*/
ul li ul li {display: block; /*stacks the submenu items vertically – this feature does not apply to the current website project*/
white-space: nowrap}
ul li ul li a {
display: block;
padding: 10px 20px;
color: #080705;
transition: background-color 0.3s;
}
#Menu a {background-color: #913831}
#Menu a:hover{background-color: #4B4B4D}
#Menu {
background-color: #913831;
}
#Menu a {
font-family: "Sansation"; 
background-color:#913831; 
color: #faf0E6;
font-size: 18px}
#Menutoggle input {
position: absolute;
width: 40px;
cursor: pointer;
opacity: 0; /*in full screen mode, the hamburger menu is not visible*/
z-index: 2; /*in order to place the checkbox over the hamburger*/
-webkit-touch-callout: none;
}
#buttontext {font-size: 14px; 
color: #913831;
background-color:#913831 }
.Banner {height: 182px;
color: #4B4B4D;
padding: 10px}
/* Setup for items on index page*/
.Container {width: 15%;float: left;position: relative;}
.indexslideshow1, .indexslideshow2, .emailcontainer {
width: 100%;
height: auto;
font-family: "Sansation";
text-align: center;
border-width: medium;
border-style: solid;
border-radius: 10px;
}
.emailcontainer {color: #007791; font-family: "Opensans"}
.indextext1 {width: 15%; max-height:400px; padding: 0px 5px; overflow: scroll;float: right;border-width: medium;font-family:"Opensans";/*width:15% means the width of the index text element will be 15% of the screen width, overflow allows scroll bars to appear for when text exceeds the size of a container, float:right means the element will go to the right side of the screen*/

border-style: solid;
border-radius: 10px; background-color: #faf0e6; padding: 3px; text-align: justify}
.indexvideo {display: flex; justify-content: center; width: 60%; margin-left: 2%; margin-right: 2%; height: auto; float: left;} /* display: flex; enables the element to be a flex container allows a responsive layout and makes it easy to align items. justify-content: center; centers the items horizontally. width: 60%;means the container takes up 60% of the screen width, height: auto; means the height will adjust automatically to maintain the aspect ratio of the video */

#Sunrisevideo { width: 80%;height: auto;border-width: medium;
border-style: solid;
border-radius: 10px;border-color: #faf0e6}
#TokomaruBayvideo { width: 100%;height: auto;border-width: medium;
border-style: solid;
border-radius: 10px;border-color: #faf0e6}
.indexvideo img {width: 100%}
.indextext2 {font-family:"Opensans";background-color: #faf0e6;
width: 100%;
max-height: 300px; overflow: scroll; /* the maximum height for the element is 300px, after this hidden text can be viewed by scrolling */

border-width: medium;
border-style: solid;
border-radius: 10px;text-align: center;
clear: both; /* Ensures the element starts below the floated elements */
}
.indexcopy {font-family:"Opensans";font-weight: bold;
width: 100%;
text-align: center;
clear: both; /* Ensures the element starts below the floated elements */
}
.title {
position: sticky; /* keeps the title in view when scrolling*/
font-family: "Sansation";
top: 0;
background-color:#913831;
padding: 10px;
font-size: 18px;
color: #faf0e6;
z-index: 2;
text-align: center;
}
.prev, .next {
cursor: pointer;
top: 90%;
width: auto;
margin-top: 0px;
padding: 16px;
color: #007791;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Setup for items on AboutUs page*/
.AboutContainer {width: 35.5%;  margin: 1%; float: left;font-family: "Opensans"; text-align: center; background-color:#faf0e6 }
.AboutContainer2 {width: 60.5%;  margin: 1%; float: left; font-family: "Opensans"}
.AboutSlideshow1 {width: 58%; margin: 1%; float: left;text-align: center}
.Abouttext {width: 100%; max-height: 500px; float: left; font-family: "Opensans"; background-color: #faf0e6; overflow: scroll}/*note % because these are contained in Aboutcontainer2*/
.Abouttext img {width:50%; border-width: medium;
border-style: solid;
border-radius: 10px;border-color: #913831}
.Aboutvideo img {width: 100%}
#Aboutusvideo {width: 100%}
.AboutSlideshow2 {width: 58%; margin: 1%; float: left;text-align: center; background-color:#faf0e6}
.Abouthours {width: 38%; margin: 1%; float: left; background-color: #faf0e6; text-align: center;font-weight: bold}
.Abouthours img {width: 100%}
.float-image {
float: left; /* or "right" if you prefer the image on the right side */
margin: 10px; /* Adds some space around the image */
}
.clear {
clear: both; /*produces a clear separation between div elements */
}
/* Setup for items on Gallery page*/
.Menuitem {
font-family: "Sansation";
font-size: 16px;
}
.GalleryContainer {
width: 35.5%;
margin: 1%;
float: left;
font-family: "Opensans";
text-align: center;
background-color: #faf0e6;
position: relative;
}
/* Slideshow container see slideshow.css */
.Ingredients {width: 100%}
.Galleryslideshow1 img {width: 100%; height: auto}
.GalleryContainerRight {width:62.5%; height: 100vh; float: left}
.GalleryMenuitem img {width: 100%}
.Galleryvideo {width: 38%; margin: 1%; float: left}
.Galleryvideo img {width: 100%}
.GallerySlideshow, .GallerySlideContainer {width: 58%; margin: 1%; float: left}
.GallerySlideshow img {width: 100%}
.GallerySlideshow {
display: none;
position: relative;
}
.GalleryMenuitem {position: relative}
.slidetext {font-family:"Opensans";font-weight: bold;color:#007791; text-align: center}
/*Contact Page*/
.ContactContainer {width:57.5%; float: left; text-align: center; margin-right: 2.5%}
.ContactContainer p {align-content: center;
position: relative;

padding: 20px;
font-family: "Opensans";
font-size: 18px;
font-weight: bold;
color: #007791;
}
.ContactMap {width: 37.5%; float: left}
.ContactMap img {width: 100%; height: auto}
.ContactMap iframe {width: 100%; height: auto}
@media (max-width: 1000px){
	.Banner {height: 290px}
.subtitle {
font-family: "Canela";
font-size: 2em;
position: relative;
text-align: center;
top: initial;
left: initial;
transform: none; /*remove any animation or transformation, just display plain text*/
animation: none;
opacity: 1;
color: #4F7942;
}
}
@media (max-width: 850px){ /*New conditions for all items when the screen size is less than 850pixels wide*/
.Banner {height: 290px}
.subtitle {
font-family: "Canela";
font-size: 2em;
position: relative;
text-align: center;
top: initial;
left: initial;
transform: none; /*remove any animation or transformation, just display plain text*/
animation: none;
opacity: 1;
color: #4F7942;
}
h1 {font-size: 1.7em}
.bento-item1:hover, .bento-item2:hover, .bento-item3:hover, .bento-item4:hover {
transform: none; /*remove any animation or transformation, just display plain text*/
}
.RH2, .LH2, .Container, .indextext1 { width:45%; height: auto; overflow: auto; padding: 0px; margin-left: 0px; margin-right: 0px
}
#Sunrisevideo {width: 100%}
.indexvideo {float: left; width: 45%; margin: 2%}
.indextext1 {float: left; align-content: center; padding: 0px 5px; margin: 2%}
.title {
position: sticky;
font-family: "Sansation";
top: 0;
background-color:#913831; 
padding: 10px;
font-size: 18px;
color: #faf0e6;
z-index: 0;
text-align: center;
width: 100%
}
.content {
position: relative;
z-index:0;
padding: 20px;
font-family: "Opensans";
font-size: 16px;
color: #4B4B4D;
width: 100%;
height: 100%; /* Ensure the content fills the bento item */
overflow-y: auto; /* Enable vertical scrolling of contents within the bento box */
}
.Order {height: auto}
/*MENUTOGGLE Hamburger menu controls */
#Menutoggle {position: relative;
z-index:1;} /*hamburger menu now visible*/
#Menutoggle input {left:1px; 
width:30px;
height:30px;
cursor:pointer;
opacity:0;
z-index:5; /*in order to place the checkbox over the hamburger*/
-webkit-touch-callout:none;
}
 /*This decides how the bars of the hamburger menu appear*/
#Menutoggle span {display:block; /*to ensure that each span element occupies its own line*/
width:33px;
height: 4px;
margin-bottom: 5px;/* create some space bnetween span eelments*/
position: relative;/*allow for posiiton changes relative to the parent div*/
background:#cdcdcd;
border-radius: 3px;
z-index:4; /*ensure that the span element s under the checkbox*/
}
#buttontext {text-align:left;
opacity:1;color: #faf0E6;
font-size:16px;
}
#Menutoggle span:first-child {transform-origin: 0% 0%; }
#Menutoggle input:checked-span {opacity:1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#Menu {position:absolute;
display: block;
align-content: center;
left:-300px;
top:80px;
width: 200px;
margin:-100px 0 0 -50px;
padding:50px;
padding-top: 50px;
background:#913831;
font-size: 10px;
}
#Menu li {
padding: 10px 0;
font-size: 16px;
display:block;
/*border-radius: 10px;*/
background:#913831;
}
#Menutoggle input:checked ~ ul {left:30px;
}
/* move the submenu to the right*/
#Menutoggle input:checked ~ ul li ul {left: 150px}
	#Menu, #Menutoggle {z-index: 3}
	.ContactContainer, .title {z-index: 1}
/* container settings */
.container, #form1, #name, #email, #Delivery {
flex-direction: column;
width:100%
}
.emailcontainer, .ContactContainer, .ContactMap {width: 100%}
#name, #email, #message {width: 80%}
.emailcontainer, #contactForm {border:none; border-radius:0px}
	.Ingredients {width: 100%}
.Galleryslideshow1 img {width: 100%; height: auto}
.GalleryContainerRight {width:100%}
.GalleryContainer {width:100%}
.GalleryMenuitem img {width: 100%}
.Galleryvideo {width: 100%; margin: 0px}
.Galleryvideo img {width: 100%}
.GallerySlideshow, .GallerySlideContainer {width: 100%; margin: 0px}
.GallerySlideshow img, .GallerySlideContainer img {width: 100%}
.GallerySlideshow {
display: none;
position: relative;
}
	/* Setup for items on AboutUs page – when screen width less than 620px*/
.AboutContainer {width: 100%; margin: 0px; font-family: "Opensans"; text-align: center; background-color:#faf0e6 }
.AboutContainer2 {width: 100%; margin: 0px; font-family: "Opensans"}
.AboutSlideshow1 {width: 100%; margin: 0px;text-align: center}
.Abouttext {width: 100%; max-height: 500px; margin: 0px; font-family: "Opensans"; overflow-x: hidden; overflow-y: scroll; background-color: #faf0e6}/*note % because these are contained in Aboutcontainer2*/
.Abouttext img {width:50%; border-width: medium;
border-style: solid;
border-radius: 10px;border-color: #913831}
.Aboutvideo img {width: 100%}
.AboutSlideshow2 {width:100%; margin: 0px;;text-align: center; background-color:#faf0e6}
.Abouthours {width: 100%; height: auto; margin: 0px; background-color: #faf0e6; text-align: center;font-weight: bold}
.Abouthours img {width: 100%}
.float-image {
float: left; /* or "right" if you prefer the image on the right side */
margin: 10px; /* Adds some space around the image */
}
}
@media (max-width: 620px) { /*New conditions for all items when the screen size is less than 620pixels wide – now most items set to fill 100% of screen width font sizes reduced, contrast increased*/
.subtitle {
font-family: "Canela";
position: relative;
font-size: 1.5em;
color: #4F7942;
transform: none;
animation: none
}
h1 {font-size: 1.5em}
.RH, .LH, .RH2, .LH2, .Order, .indexslideshow1, .indexslideshow2, .Container, .ContactContainer, .indexvideo, .title {width:100%; height: auto; padding: 0px; margin-left: 0px; margin-right: 0px
}
.Banner {vertical-align: middle; height: 290px; 
}
.title {position: sticky; z-index: 1;
text-align: center; height: 40px}
/* Setup for items on Gallery page*/
.Menuitem {
font-family: "Sansation";
font-size: 16px;
}
	#Menu, #Menutoggle {z-index: 3}
	.ContactContainer, .title {z-index: 1}
.GalleryContainer {
width: 100%;
margin: 0px;
font-family: "Opensans";
text-align: center;
background-color: #faf0e6;
}
	.indextext1{width: 98%; padding: 0px 5px; margin: 5px 0px }
/* Slideshow container see slideshow.css */
.Ingredients {width: 100%}
.Galleryslideshow1 img {width: 100%; height: auto}
.GalleryContainerRight {width:100%}
.GalleryContainer {width:100%}
.GalleryMenuitem img {width: 100%}
.Galleryvideo {width: 100%; margin: 0px}
.Galleryvideo img {width: 100%}
.GallerySlideshow, .GallerySlideContainer {width: 100%; margin: 0px}
.GallerySlideshow img, .GallerySlideContainer img {width: 100%}
.GallerySlideshow {
display: none;
position: relative;
}
.slidetext {font-family:"Opensans";font-weight: bold;color:#007791; text-align: center}
#Menutoggle input {
position: absolute;
width: 40px;
cursor: pointer;
opacity: 0;
z-index: 6; /*in order to place the checkbox over the hamburger*/
-webkit-touch-callout: none
}
/* Setup for items on AboutUs page – when screen width less than 620px*/
.AboutContainer {width: 100%; margin: 0px; font-family: "Opensans"; text-align: center; background-color:#faf0e6 }
.AboutContainer2 {width: 100%; margin: 0px; font-family: "Opensans"}
.AboutSlideshow1 {width: 100%; margin: 0px;text-align: center}
.Abouttext {width: 100%; max-height: 500px; margin: 0px; font-family: "Opensans"; overflow-x: hidden; overflow-y: scroll; background-color: #faf0e6}/*note % because these are contained in Aboutcontainer2*/
.Abouttext img {width:50%; border-width: medium;
border-style: solid;
border-radius: 10px;border-color: #913831}
.Aboutvideo img {width: 100%}
.AboutSlideshow2 {width:100%; margin: 0px;;text-align: center; background-color:#faf0e6}
.Abouthours {width: 100%; height: auto; margin: 0px; background-color: #faf0e6; text-align: center;font-weight: bold}
.Abouthours img {width: 100%}
.float-image {
float: left; /* or "right" if you prefer the image on the right side */
margin: 10px; /* Adds some space around the image */
}
.clear {
clear: both;
}
}