/*
        WebSite Name: Keyspot
        Author      : Melissa Harris
        Student ID  : 20035958
        Created Date: November 2023
        Last Updated: February 2024
        Description : This is Keyspot website. Keyspot is a family run giftware shop in Karratha in northern Western 
                      Australia. 
                      This website will provide an online presence where customers may be able to order
                      and view certain products online.   
*/
 
#wrapper {
  margin-right: auto;
  margin-left: auto;

  grid-template-rows: minmax(190px, auto) minmax(44px, auto) minmax(1350px, auto) 100px;
  grid-template-columns: 100%;
  grid-template-areas:  "header"
                        "menu"
                        "main"
                        "footer";
  row-gap: 0.5em;
  padding: 0.5rem;
}

body {
  font-family: 'Lexend Deca', Verdana, Georgia, Times, 'Times New Roman', sans-serif;
}

/*** start of header ***/

header {
  grid-area: header;
  display: grid;
  
  grid-template-rows: minmax(25px, auto) 80px 30px 55px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "alert alert alert"
                       "logo banner banner"
                       ". established established"
                       "symbols symbols symbols";
}

.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 1em;
}

.skip:focus {
  position: static;
  width: auto;
  height: auto;
  color: black;
  text-decoration: none;
  top:5px;
  left: 5px;
  border-color:white;
  border-style:groove;
  background-color: #CD171A;
}

.vcard {
  display: none;
}

#alertmessage   {
  grid-area: alert;
  width: 100%;
  max-width: 100%;
  height: auto;
 }

#alertmessage p  {
  color: white;
  background-color: black;
  text-align: center;
  font-size: 20px;
  line-height: 25px;
  margin-top: 0em;
}

#logo   {
  grid-area: logo;
  display: grid;
  height: 80px;
  width: 100%;
  align-items: center;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

#logo img   {
  align-items: center;
  max-width: 100%;
  height: auto;
  padding-right: 0.5em;
}

#banner   {
  grid-area: banner;
  display: grid;
  height: 80px;
  width: 100%;
  align-items: center;
}

#banner  img {
  max-width: 100%;
  height: auto;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

#establish {
  grid-area: established;
  display: grid;
  height: 30px;
}

#establish img {
  padding-left: 60%;
}

#symbols    {
  grid-area: symbols;
  padding: 0.5em;
  
  display: inline-flex;
  height: 55px;
  flex-direction: row;

  grid-template-rows: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "contact selectpage cart";
  margin-top: -5px;
}

#symbols h3   {
  display: none;
}

#contact {
  grid-area: contact;
  width: 100%;
  float: left;
}

#selectpage {
  grid-area: pageselect;
  margin-left: 20%;
  margin-right: auto;
  width: 100%;
}

#selectpage img {
  display: none;
}

#cart {
  grid-area: cart;
  width: 100%;
  float: right;
}

#cart img {
  float: right;
}

/*** end of header ***/

/*** start of nav ***/

nav {
  grid-area: menu;
  display: flex;
  grid-template-columns: 100%;
  grid-template-rows: minmax(400px, auto);
  grid-template-areas: "menulist";
}

#menunav {
  grid-area: menulist;
  height: 3.6em;
  display: flex;
  width: 100%;
  position: relative;
  background-color:#DFABB2;
}

nav a {
  display: flex;
  flex-direction: row;
  font-size: 20px;
  font-weight: 500;
  color: #872345;
  text-align: center;
  padding: 10px;
  padding-right: 0.5em;
  text-decoration: none;
}

#menumobile  {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 500;
  color: #872345;
  background-color: #DFABB2;
  text-align: center;
  padding-right: 0.5em;
  text-decoration: none;
  width: 100%;
  }

.listentry p
{
  margin: auto;
}

#menumobile li {
  text-align: center;
}

nav h3 {
  display: none;
}

nav p {
  margin-top: -10px; 
  line-height: 1em;
}

nav li {
  margin-top: -7px;
  line-height: 1em;
}

.dropdownlist li {
  line-height: 1em;
}

.submenulist{
  padding-top: 0.7em;
}

#menunav ul {
  text-decoration: none;
  list-style: none; 
  display: flex;
  flex-direction: row;
}

#menumobile ul {
  text-decoration: none;
  list-style: none;
  display: none;
  flex-direction: column;
}

.dropdownbuttons ul {
  display: flex;
  list-style: none;
  flex-direction: column;
  text-decoration: none;
}
  
.dropdownlist ul {
  display: flex;
  flex-direction: column;
}

.dropdownlist .dropdown {
  font-size: 20px;  
  border: none;
  outline: none;
  color:white;
  padding: 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

nav a:hover, .dropdownlist:hover .dropdown {
  color: #486A15;
  display: block;
}

nav a:hover {
  color: darkslategray;
  display: block;
}
 
#menumobile a:hover, .dropdownlist:hover .dropdown {
  margin-left:-30px;
} 

#menumobile p:hover {
  margin-left: 30px;
}

.dropdownbuttons, .submenulist {
  display: none;  
  position: absolute;   
  background-color: white;
  color: darkslategrey;  
  min-width: 160px; 
  box-shadow: 0px 8px 16px 0px rgb(61 170 0); 
  z-index: 1;
}

.dropdownbuttons a {
  float: none;
  color: darkslategrey;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
  
.dropdownbuttons a:hover {
  background-color: #ddd;
}
  
.dropdownlist:hover .dropdownbuttons {
  display: block;
}

#selectpage {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*** end of nav ***/

/*** start of main/index ***/

main {
  grid-area: main;
    
  display: block;
  grid-template-columns: 1fr;
  grid-template-areas: "companymessage"
                       "maininterests"
                       "minorinterests";
  grid-template-rows: 50px minmax(450px, auto) minmax(900px, auto);
  padding: 0.5em;
}

main p {
  font-size: 1.5em;
  color: darkslategray;
}

#companymessage {
  grid-area: companymessage;
  font-size: 1.1em;
  font-family: 'Lexend Deca', Verdana, Georgia, Times, 'Times New Roman', sans-serif;
  font-weight: 400;
}

#maintop {
  grid-area: majorinterests;
  display: flex;
  flex-direction: row;  
  flex-wrap: wrap;
  justify-content: space-around; 
  padding: 0.5em;
  padding-bottom: 2.0em;
  column-gap: 1.0em;
  row-gap: 2.0em;
}

.featurecard img {
  /*border-radius: 40px; */
}

#footer {
  padding: 1em;
  position: sticky;
  bottom: 0;
}

#mainbottom {
  grid-area: minorinterests;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 1fr);  
  row-gap: 2.0em;
  margin-bottom: 1.5em;
 }
 
.productscard img {
  /*border-radius: 40px; */
  grid-auto-columns: auto;  
}

#companymessage a {
  text-decoration: none;
  color:darkslategray;
}

 /*** end index/home ***/

 /*** start aboutus ***/

 #titlepage {
  width: 100%;
}

#titlepage h2 {
  font-size: 3em;
  line-height: 0em;
  color: #872345;
  font-weight: 400;
  display: block;
}

#aboutusmain h4 {
  font-size: 2em;
  line-height: 1em;
  color:#486A15;
  font-weight: 400;
}

#profiles {
  grid-area:main;
  height: 2750px;
  padding: 0.5em;
}

#profiles p {
  font-size: 1.2em;
}

.profileimage img {
  height: auto;
  width: auto;
}

.profiletext {
  padding: 0.5em;
}

#profile1 {
  display: flex;
  flex-direction: row;
}

#profile2 {
  display: flex;
  flex-direction: row;
}

#profile3 {
  display: flex;
  flex-direction: row;
}

#profile4 {
  display: flex;
  flex-direction: row;
}

/*** end aboutus ***/


 /*** start services ***/

 
 #servicesmain h4 {
  margin-top: -0.4em;
  margin-bottom: 0.2em;
  font-size: 2em;
  line-height: 1em;
  color:#486A15;
  font-weight: 400;
}

 
#servicesmain h5 {
  margin-top: -0.4em;
  margin-bottom: -0.2em;
  font-size: 1.2em;
  line-height: 1.2em;
  color:#486A15;
  font-weight: 300;
}


#servicesmain #titlepage h2 {
  line-height: 1em;
}


#services {
  grid-area:main;
  height: 2750px;
  padding: 0.5em;
}

#services p {
  font-size: 1.2em;
  margin-top: -0.5em;
}

.servicesimage img {
  height: auto;
  width: auto;
}

.servicestext {
  padding: 0.5em;
}

.servicestext p {
  font-size: 1em;
}

.servicestext li {
  font-size: 0.8em;
}


.servicestext ul {
  margin-top: -0.5em;
}

#serviceskeys, #servicesengraving, #servicesshoes, #serviceswatches, #serviceshighesttemp {
  display: flex;
  flex-direction: row;
}

#serviceshighesttemp h4 {
  color:orangered;
}

#servicestemptable, #servicestemptable th, #servicestemptable td {
  border:1px solid darkslategray;
  color: #103486;
  font-weight: 600;
  width:300px
}

#servicestemptable th, #servicestemptable td {
    text-align: left;
    font-size: 0.8em;
    line-height: 1.7em;
}

#servicestemptable th {
  color: #000000;
  font-weight: 600;
}

#servicestemptable caption {
  display: none;
}

summary {
  display: none;
}

#servicestempheader1 {
  text-align: center;
}

#servicestemptable {
  background: url("../images/firebackground.gif");
}

.serviceshighesttemptable tr {
  line-height: 0.1em;
}

/*** end services ***/

/*** start products pages ***/

/*** handbags.html ***/
/*** Currently the site does not have a products page ***/
/*** This code will be kept in until it is decided that it is required or no longer required ***/

#productsmain {
  grid-area: main;
  width: 100%;
}

#productsmain h1, #productsmain h2 {
  display: none;
}

#productsmain h3 {
  font-size: 3em;
  line-height: 0em;
  color: #1892d7;
  font-weight: 400;
}

.productcard h4, .productcard h5 {
  display: none;
}

#displayproducts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;

  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(3, 1fr);
  row-gap: 40px;
  padding-bottom: 5%;
}

.productcard {
  grid-template-columns: 200px;
  grid-template-areas: "productpicture"
                       "productdetails"
                       "productaddtocart";
  grid-template-rows: 200px 80px 30px;
  align-items: center;
  height:310px;
  width: 200px;
  padding: 5px;
  margin: 1px;
}

.carddetails {
  grid-area: productdetails;
  height: 80px;
  width: 200px;
}
 
.carddetails h6 {
  color: #CD171A;
  font-size: 1.2rem;
  margin-top: 0%;
  margin-left: 70px;
  font-weight: 400;
  margin-bottom: 6%;
}
  
.productimage {
  grid-area: productpicture; 

  overflow: hidden;
  height: 200px; 
  width: 200px; 
}

.productimage img {
  max-width: 100%;
  height: auto;
}

.carddetails p {
  color: #7F7F7F;
  font-size: 1rem;
  line-height: 1rem;
  margin-top: -7%;
  align-items: center;
}

.addcart {
  grid-area: productaddtocart;
  height: 30px;
  width: 200px;
  align-items: center;
}

.addcart img {
  margin-left: 25%;
}
  
.addcart p {
  margin-left: auto;
  margin-right: auto;
  color: #7F7F7F;
}  

/*** end handbags page ***/

/*** end products pages ***/

/*** start contact page ***/

#contactmain h3 {
  font-size: 3em;
  line-height: 0em;
  color: #872345;
  font-weight: 400;
}

#contactmain h4 {
  font-size: 2em;
  line-height: 0em;
  color:#486A15;
  font-weight: 400;
}

#contactmain p {
  font-size: 1.2em;
  line-height: 0.6em;
  color:#7F7F7F;
  font-weight: 300;
}

#contactmain ul {
  display: flex;  
  flex-wrap: nowrap;
  justify-content: space-around; 
  list-style: none;                      
  margin-right: 95%;
}
  
#companycontacts {
  flex-direction: row;
  display: flex;
  column-gap: 1em;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "contactdetails contactcomments";
  grid-template-rows: 100%;
}

#displaycontacts {
  grid-area: contactdetails;
  /*height: 70em;*/
  width: 100%;
}

#displaycontacts p {
  font-size: 1.7em;
  line-height: 1.0em;
  word-break: normal;
}

#displaycontacts a {
  text-decoration: none;
  color:#7F7F7F;
}

#displaycomment {
  grid-area: contactcomments;
  width: auto;
  height: 62em;
  width: 100%;
}
 
#displaycomment p {
  font-size: 1.2em;
  line-height: 1.2em;
}

#displaycomment img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  max-width: 100%;
  height: auto;
  background-color: #61aa01;
}

#googleMap {
  height: 400;
  width: 300;
  margin: 0;
  padding: 0;
 }
/*
#map {
  height: 400;
  width: 300;
  margin: 0;
  padding: 0;
  background-color: yellow;
}
*/

/*style="width:100%;height:400px;"

/*** end contact page ***/

/*** start enquiries page ***/

#enquiriesmain {
  min-width: 32em;
}

footer.enquiriesfooter {
  min-width: 32em;
}


#displayForm {
  grid-area: contactcomments;
  height: 52em;
  margin-right: auto;
  margin-left: auto;
}

.dateCheck input {
  border: none;
  width: 100%;
}

.input-container input {
  width: 100%;
}
 
::-webkit-calendar-picker-indicator {
  filter: invert(90%)
  brightness(99%)       
  sepia(16%)          
  saturate(498%)
  hue-rotate(302deg)
  contrast(87%); 
}

#theForm, #contactmessage p { 
  padding: 0;
  margin: 0;
  outline: none;
  font-size: 16px;
  color:#872345;
}

::placeholder {
  margin: 0;
  outline: none;
  /*font-family: Roboto, Arial, sans-serif;*/
  font-size: 16px;
  color:#872345;
  opacity: 1;
}

.form input, textarea {
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  color:#872345;
}

.forminfo, #reqDate, #custPhone, #custMessage {
  background-color: #DFABB2;
  font-weight: 200;
  resize: none;
  font-size: 16px;
  /*font-family: Roboto, Arial, sans-serif;*/
  margin-left: -5px;
  overflow: hidden;
  color: #872345;
}

#reqDateLabel, #custMessageLabel {
  margin-left: 5px;
}

#custPhone {
  margin-top: -20px;
  margin-left: 5px;
}

#custMessage {
  margin-top: -10px;
  margin-left: 5px;
}

#custMessage:focus{
  overflow: hidden;
  outline:none; 
}

#custMessageLabel {
  margin-top: 0px; 
}

.phonetext {
  margin-left: 10px;
  color:#872345;
  margin-top: -20px;
}

#custEmail {
  margin-bottom: -20px;
  width: 20em;
}

.info {
  border: 0 none #FFF;
  overflow: hidden;
  outline:none;
  outline-width: 0;
}

.formInfo:focus{
  border: 0 none #FFF;
  overflow: hidden;
  outline:none;
  outline-width: 0;
}
  
#displayForm h2 {
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 0 8px;        
}
 
#displayForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40em;
  padding-top: 5px;
  padding-bottom: 15px;
}

.title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.info {
  display: flex;
  flex-direction: column;
}
                

.info textarea, textarea:focus{
  /*
  position: static;
  outline: none;
  resize: none;
  overflow: auto; */
  border-width: 2px;
  align-items:flex-start;
  vertical-align: text-top;
}

.info textarea:focus{
  
  position: static;
  outline: none;
  resize: none;
  overflow: auto;
  border-width: 2px;
}

.dateCheck {
  font-family: Roboto, Arial, sans-serif;
}

#customerMessage {
  border: 2em;
}
                
#displayForm p {   
  font-size: 1em;
  line-height: 1em;
  color:#872345;
  padding: 5px;
}
                
#displayForm label  {   
   opacity: 0.5;
}

#reqDate, #custMessage {
  margin-left: 0em;
  margin-top: -15px;
}   
  

#custMessage {
  margin-top: 0px;
  margin-left: 5px;
}   
  
#reqDate {
  color:#872345;
  margin-top: 0px;

}   

input[type="date"] {
  color:#872345;
}

input, select {
  padding: 5px;
  margin-bottom: 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #eee;
}

input::placeholder {
  color:#872345;
  opacity: 1;
}

.btn-item, button {
  padding: 10px 5px;
  margin-top: 20px;
  border-radius: 5px; 
  border: none;
  background: #486A15;
  text-decoration: none;
  font-weight: 400;
  color:#872345;
  opacity: 1;
}

#displayForm {
  width: 30em;
}

#main-block {
  margin-left: auto;
  margin-right: auto;
}

#displayForm  h2 {
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 0 8px;
  display: none;
}

.btn-block {
  margin-top: 10px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


button {
  width: 150px;
  padding: 10px;
  border: none;
  border-radius: 5px; 
  font-size: 16px;
  color:#872345;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

button:hover {
  background:  hsl(180, 20%, 70%);
}

button:disabled {
  background:  hsl(180, 20%, 70%);
}

#displayForm {
  background-color:#DFABB2;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  flex-direction: row;
  height: calc(100% - 50px);
  margin-left: auto; 
}

.formTitle h3 {
  padding-bottom: 0px;
  display: block;
  font-size: 1.5em;
}

.formTitle {
  display: flex;
  align-items: center;
  margin-top: -4em;
  margin-bottom: -2em;
}

.fa-pencil-alt {
  font-size: 20px;
  color:#872345;
  background-color: #DFABB2; 
}

.fa-solid fa-calendar-days {
  font-size: 16px;
  /*font-family: Roboto, Arial, sans-serif;*/
  background-color: #DFABB2;
  font-weight: 200;
  /*color: #872345; */
}
       
.fa-calendar-days {
  font-size: 16px;    
  font-size: 16px;
  /*font-family: 'Roboto', 'Lexend Deca', Verdana, Georgia, Times, 'Times New Roman', 'sans-serif';*/
  background-color: #DFABB2;
  font-weight: 200;
  /* color: #872345; */
}
 
#contactmain label {
  margin-top: -10px;
}

/*
.info label p {
  opacity: 1;
}
*/

.checkboxInfo {
  padding-left: 2em;
  margin-right: auto;
  margin-top: 0em;
}

.checkboxInfo #privacyTerms {
  opacity: 1;
}
 
#legendDesc {
  color:#872345;
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 1em;
  padding-top: 1em;
}

#whereSiteFound {
  border: none;
  margin-top: -1em;

  color:#872345;
  background-color: #DFABB2;
  margin-left: -5px;

}

option {
  color:#872345;
  background-color: #DFABB2;
}

#newCustomer {
  margin-top: 0em;
  border: none;
  margin-left: -5px;
  opacity: 1;
}

#newCustomer label {
  opacity: 1;
}

#findWebsite {
  color:#872345;
  font-size: 16px;
  background: transparent;
}

#whereSiteFound label {
  opacity: 1;
}
/*
#findWebsite option {
  background-color:transparent;
  }

  */
  
  
#findWebsite select {
  background-color:#DFABB2;
  }

  #whereSiteFound:hover #findWebsite  {
    background-color:#CFE2A4;
  }
  
/*
  option:checked, option:hover  {background-color:black;
  }

  */
  
  /** end enquiries page ***/

/*** start privacy page ***/
  
#privacyinformation {
  display: grid;
  column-gap: 1em;
  grid-template-columns: 1fr 5fr;
  grid-template-areas: 'privacyimages privacytext';
  grid-template-rows: 100%;
}

#privacyimages {
  grid-area: privacyimages;
  height: 100%;
  width: 100%;
}

#privacytext {
  grid-area: privacytext;
  height: 100%;
  width: 100%;
}

#privacyimages {
  width: 100%;
  height: 100%;
 }

#privacyimages img {
  display: block;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

main.privacypolicymain p {
  font-size: 1.0em;
}

main.privacypolicymain h3 {
  font-size: 1.5em;
  line-height: 1.5em;
  color:#486A15;
  font-weight: 400;
  display: block;
}
  
main.privacypolicymain #titlepage h2 {
  font-size: 3em;
  line-height: 1em;
  color:#872345;
  font-weight: 400;
  display: block;
}

/*** end privacy page ***/

/*** start trophies page ***/
  
#trophiesinformation {
  display: grid;
  column-gap: 1em;
  grid-template-columns: 1fr 5fr;
  grid-template-areas: 'trophiesimages trophiestext';
  grid-template-rows: 100%;
}

#trophiesimages {
  grid-area: trophiesimages;
  height: 100%;
  width: 100%;
}

#trophiestext {
  grid-area: trophiestext;
  height: 100%;
  width: 100%;
}

#trophiesimages {
  width: 100%;
  height: 100%;
 }

#trophiesimages img {
  display: block;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

#trophiesmain p {
  font-size: 1.5em;
}

#trophiesmain h3 {
  font-size: 2em;
  line-height: 2em;
  color:#486A15;
  font-weight: 400;
  display: block;
}
  
#trophiesmain #titlepage h2 {
  font-size: 3em;
  line-height: 1em;
  color:#872345;
  font-weight: 400;
  display: block;
}

.trophiestooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

#trophiesinformation a {
  text-decoration: none;
}

.trophiestooltip .trophiestooltiptext {
  visibility: hidden;
  width: 10em;
  background-color:#DFABB2;
  color:#872345;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.trophiestooltip:hover .trophiestooltiptext {
  visibility: visible;
}

.trophieslinks {
  color: #486A15;
  font-weight: 600;
}

.trophiestel {
  color:#872345;
}

.trophiesemail {
  color:#872345;
  font-weight: 600;
}

#selecttrophiesvideo {
  color: red;
  font-weight: 600;
  font-size: 2em;
}


#selecttrophiesvideo a {
  color: #872345;
  font-size: 0.8em;
  font-weight: 400;
}

.trophiesvideo {
  width: 448px;
  height: 254px;
}

/*** end trophies page ***/


/*** start giftware page ***/
  
#giftwareinformation {
  display: grid;
  column-gap: 1em;
  grid-template-columns: 1fr 5fr;
  grid-template-areas: 'giftimage gifttext';
  grid-template-rows: 100%;
}

#giftwareimages {
  grid-area: giftimage;
  height: 100%;
  width: 100%;
}

#giftwaretext {
  grid-area: gifttext;
  height: 100%;
  width: 100%;
}

#giftwareimages {
  width: 100%;
  height: 100%;
}

#giftwareimages img {
  display: block;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

#giftwaretext p {
  font-size: 1.5em;
}

#giftwaretext h2, h3 {
  display: none;
}

#giftwaretext h4 {
  font-size: 2em;
  line-height: 0em;
  color:#486A15;
  font-weight: 400;
}

#giftwaremain #titlepage h2 {
  font-size: 3em;
  line-height: 0em;
  color:#872345;
  font-weight: 400;
  display: block;
}

/*** end giftware page ***/

/*** start of 404 main page **/

#main404lefttop {
  grid-area: topleft404;
  height: 11em;
}

#main404lefttop h4 {
    font-family:Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 10em;
    font-weight: 300;
    margin-top: -0.2em;
    text-align:center;
}

#main404lefttop p {
    font-family:Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 2em;
    font-weight: 500;
    text-align:center;
    margin-top: -7.0em;
}
    
#main404leftbottom {
    grid-area: bottomleft404;
    height: 20em;
}
  
#main404leftbottom p {
    font-weight: 500;
    color: #486A15;
    font-size: 1.3em;
    text-align:left;
    margin-top: 0.95em;
}
    
#main404middlebottom {
    grid-area: bottommiddle404;
    height: 20em;
}
   
#main404middlebottom p {
    font-size: 1.3em;
    font-weight: 500;
    margin-top: 0.95em;
    text-align:left;
    color:#CD171A;
}
    
#main404right {
    grid-area: main404right;
    display: block;
    width: 16.5em;
}

#main404right img {
    margin-top: 0em;  
}
 
#main404grid {
    display: grid;
    grid-area: main;
    grid-template-areas:'topleft404 topleft404  main404right main404right'
                        'bottomleft404 bottommiddle404 main404right main404right'
                        'bottomleft404 bottommiddle404 main404right main404right';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

    height: 31em;
    width: 62em;
    margin-right: auto;
    margin-left: auto;
}
    

/*** end 404 main page ***/


/*** end of main ***/

/*** start of footer **/

footer {
  background-color:#CFE2A4;
  grid-area: footer;
  display: grid;
  height: 140px;
  width: 100%;
  grid-template-rows: 100%;
  grid-template-columns: 39% 22% 39%;
  grid-template-areas: "footerleft footermiddle footerright";
  padding-top: 0.5em; 
  padding-right: 0.5em;
}

footer a {
  text-decoration: none;
}

#footerleftcolumn   {
  grid-area: footerleft;
  height: 100%;
  width: 100%;
  display: block;
  margin-bottom: 0.5em;
}

#footerleftcolumn p {
  font-size: 1em;
  line-height: 1.05em;
  padding-top: 0;
  margin: 0;
  color: #486A15;
}

#footerleftcolumn a {
  color: #486A15;
}

#footermiddlecolumn   {
  grid-area: footermiddle;
  display: grid;
  height: 100%;
  width: 100%;
  margin: 0 auto; 
  overflow: auto; 
  max-width: 100%;
  height: auto;
}
  
#footermiddlecolumn ul {
  display: flex;           
  flex-direction: row;    
  flex-wrap: nowrap;       
  justify-content: space-around; 
  list-style: none;                      
  margin-left: 0;
  margin-right: 0; 
  max-width: 100%;
  height: auto;
  /*
  margin-left: 30%;
  margin-right: 50%;
  padding-right: 30%;
  padding-left: 20%;
  */
}

#footermiddlecolumn img {
  padding: 0.1em;
}

#footerrightcolumn   {
  grid-area: footerright;
  height: 100%;
  width: 100%;
  display: block;
  height: auto;
}

#footerrightcolumn  h4 {
  font-size: 1em;
  line-height: 1em;
  color: #872345;
  font-weight: 500;
  margin-top: -0.3em;
}

#footerrightcolumn  p {
  font-size: 0.8em;
  line-height: 0.9em;
  color: #486A15;
}

h1, h2 {
  display: none;
}  

#enquiriesfooter {
  min-width: 32em;
}

/*** Media Query ***/

/* Mobile web pages < 900 wide */
@media only screen and (min-width: 1001px) and (max-width: 2000px) {

#profiles {
  height: 1200px;
}

#inhouseservices {
  height: 1650px;
}

#menumobile {
  display: inline-flex;
}

}


/* Mobile web pages < 1000 wide */
@media only screen and (max-width:1000px) {

#profiles {
  height: 2300px;
}

#inhouseservices {
  height: 2050px;
}

#selectpage img {
  display: block;
}

#menunav {
  display: none;
}

#menumobile ul {
  display: inline-flex;
}

#companycontacts {
  flex-direction: column;
  height: 78em;
}

#companycomments {
  display: none;
}

#main404right {
  display: none;
}

/* Mobile web pages < 600 wide */
@media only screen and (max-width:600px) {
   
#menunav {
  display: none;
}
#menumobile ul {
  display: inline-flex;
}

#privacyimages{
  display:none;
  width:0;
}

#privacytext {
  width: 120%;
}

#privacyinformation {
  display: grid;
  column-gap: 1em;
  grid-template-columns: 6fr;
  grid-template-areas: 'privacytext';
  grid-template-rows: 100%;
}

#giftwareimages{
  display:none;
  width:0;
}

#giftwareinformation {
  display: grid;
  column-gap: 1em;
  grid-template-columns: 6fr;
  grid-template-areas: 'gifttext';
  grid-template-rows: 100%;
}

#selectpage img {
  display: block;
}
  
#profile1 {
  flex-direction: column;
  align-items: center;
}
 
#profile2 {
  flex-direction: column;
  align-items: center;
}
 
#profile3 {
  flex-direction: column;
  align-items: center;
}
 
#profile4 {
  flex-direction: column;
  align-items: center;
}

#profiles {
  height: 2850px;
}
  
#serviceskeys, #servicesengraving, #servicesshoes, #serviceswatches, #serviceshighesttemp {
  flex-direction: column;
  align-items: center;
}
 

#inhouseservices {
  height: 2800px;
}

#companycontacts {
  flex-direction: column;
  height: 78em;
}

#companycomments {
  display: none;
}

footer {
  padding: 0.8em;
}

#productsfooter {
  padding: 0em;
}

#contactfooter {
  padding-right: 0.4em;
  padding-left: 0.4em;
}

#footerrightcolumn {
  height: auto;
  width: 125px;
}

#footerrightcolumn  h4 {
  font-size: 0.9em;
  line-height: 0.9em;
}

#footerrightcolumn  p {
  font-size: 0.8em;
  line-height: 0.8em;
}

#contactbody {
  min-width: 500px;
}

#selectpage img {
  display: block;
}

}