/* Ballyhoo? Bally you! If you're reading this...why? */

/* Menu css for desktop and mobile */

/* Base menu styles */
.slide-menu {
  position: fixed;
  top: 0;
  right: -500px;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: #242321;
  z-index: 9999999999 !important;
  padding: 40px 30px;
  transition: right 0.35s ease;
  overflow-y: auto;
  font-family: 'Din Condensed' !important;
}

.slide-menu a{
color:#ffffff;
text-decoration:none;
}

a.whitegreen:link{color:#E7E7DC;text-decoration:none;}
a.whitegreen:visited{color:#E7E7DC;text-decoration:none;}
a.whitegreen:hover{color:#B5AF9F;text-decoration:none;}

/* Open state */
.slide-menu.active {
  right: 0;
}

/* Overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999 !important;
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Close button */
.menu-close {
  background: none;
  border: none;
  font-size: 50px;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
color:#ffffff;
}


/* ALL the regular css below */



        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }



html{
background-color:#342e2a;
scroll-behavior: smooth;
}

.slider{
width:100%;margin:0 auto;display:block;}

.skip-link {
position:relative;
top:-100px;
  transform: translateY(-100%);
height:0;
color:#ffffff;
font-family: "metallophile-sp8", sans-serif;
font-weight: 300;
font-style: normal;
}

.skip-link:focus-within {
position:absolute;
top:0px;
  transform: translateY(0%);
height:20px;
z-index:99999999999;
color:#ffffff;
font-family: "metallophile-sp8", sans-serif;
font-weight: 300;
font-style: normal;
        background: #ffc;
        border: 1px solid #990000;
}

.skip-link a:focus {
position:absolute;
top:0px;
  transform: translateY(0%);
height:20px;
z-index:99999999999;
color:#ffffff;
font-family: "metallophile-sp8", sans-serif;
font-weight: 300;
font-style: normal;
        background: #ffc;
        border: 1px solid #990000;
}

a:link{color:#bdbdbd;text-decoration:none;transition:.3s ease-out;}
a:visited{color:#bdbdbd;text-decoration:none;}
a:hover{color:#e0e0e0;text-decoration:none;}

a.w:link{color:#26352e;text-decoration:none;transition:.3s ease-out;}
a.w:visited{color:#26352e;text-decoration:none;}
a.w:hover{color:#394f45;text-decoration:none;}

a.white:link{color:#e4e2d0;text-decoration:none;transition:.3s ease-out;}
a.white:visited{color:#e4e2d0;text-decoration:none;}
a.white:hover{color:#e4e2d0;text-decoration:none;}

a.c:link{color:#e6e3d9;text-decoration:none;transition:.3s ease-out;}
a.c:visited{color:#e6e3d9;text-decoration:none;}
a.c:hover{color:#e6e3d9;text-decoration:none;}

a.dark:link{color:#000000;text-decoration:none;transition:.3s ease-out;}
a.dark:visited{color:#000000;text-decoration:none;}
a.dark:hover{color:#000000;text-decoration:none;}

a.br:link{color:#845b4a;text-decoration:none;transition:.3s ease-out;}
a.br:visited{color:#845b4a;text-decoration:none;}
a.br:hover{color:#845b4a;text-decoration:none;}


/* Smartphones (portrait and landscape) ----------- */
@media (min-width : 315px) and (max-width : 640px) {
/* Styles */

.head{
width:100vw;
display:flex;
} 

.subhead{
width:100vw;
height:70vh !important;
display:flex;
background:linear-gradient(270deg, rgba(0,0,0,0.3) 100%, rgba(0,0,0,0.3) 100%),url(/img/Zenzi_Website_LatticeBG4.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center;
} 

.headtitle{
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-size:4em;
font-family: 'Maaarka-Regular';
color:#ffffff;
}

.headingbreak{
height:20px;
}

.flex-container {
width:100%;
}

.left-column-flex {
  width:100%;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;

font-family: 'Maaarka-Regular';
font-size:1.5em;
padding:60px 0 40px 0;


  /* By default, flex items stretch to the height of the container. */
}

.right-container-flex {
  flex: 2; /* Takes up 2 parts of the width, for example */
  display: flex;
  flex-direction: column; /* Stacks children vertically */
}

.right-top-flex, .right-bottom-flex {
  flex: 1; /* Both rows take equal height within the right container */
  padding: 10px;
}

.right-top-flex {
padding:50px 0;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Maaarka-Regular';
font-size:1.5em;
background:url('/img/Reservationsbutton_mobile17.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
color:#ffffff;
}

.right-bottom-flex {
padding:50px 0;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Maaarka-Regular';
font-size:1.5em;
background:url('/img/sushibutton25mobile2.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
color:#ffffff;
}

.subheading{display:block;font-family: 'metallophile-sp8', sans-serif;font-weight:800;font-size:1em;opacity:0;transition:0.5s}

.right-top-flex:hover .subheading{opacity:1}

.right-bottom-flex:hover .subheading{opacity:1}

.menublock{
width:100%;
height:auto;
background:#e6e3d9;
background:url('/img/zenzitexture2.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
text-align:center;
padding:50px auto 0px auto;
}

.menuheading{
position:relative;
top:-40px;
font-size:4.5em;
width:95%;
padding-left:9%;
text-align:left;
font-family: 'Maaarka-Regular';
color:#8c5846;
z-index:0 !important;
}

.menusubheading{
width:80%;
margin:20px 10% 10px 10%;
font-size:2em;
text-align:left;
font-family: 'Maaarka-Regular';
color:#8c5846;
}

.menutitle{
font-family: 'veneer-three', sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.7em;
}

.menucolumn{
width:80%;
margin:0 10% 35px 10%;
display:inline-block;
vertical-align:top;
text-align:left;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1em;
}

.menubreak{
width:100%;
clear:both;
height:40px;
}

.fishwaves{
position:relative;
margin:-230px 0% 0 0%;
top:50px;
font-size:7em;
width:98%;
padding:50px 1% 0 1%;
text-align:left;
font-family: 'Maaarka-Regular';
color:#674A41;
}

.midphoto{
width:100%;
height:50vh;
background-image:url('/img/midphoto2.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.mapblock{
width:100%;
background:#e7e6de;
display:flex;
}

.mapcontent{
width:80%;
margin:30px 10%;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1.1em;
}

.bottomphoto1{
width:100%;
height:50vh;
background-image:url('/img/zdslider6.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.bottomphoto2{
display:none;width:50%;height:70vh;background-image:url('/img/bottom4.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;
}

.ebottomphoto1{
width:100%;
height:50vh;
background-image:url('/img/ebottom1.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.ebottomphoto2{
display:none;width:50%;height:70vh;background-image:url('/img/TatamiRoomWithArrow2.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;
}

.aboutblock{
width:100%;
background:#e6e3d9;
background:url('/img/zenzitexture2.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}

.aboutcontent{
width:100%;
max-width:1600px;
margin:0 auto;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1.1em;
}

.aboutcolumn{
width:80%;
margin:0 10% 30px 10%;
display:inline-block;
vertical-align:top;
}

.aboutcolumn2{
width:80%;
margin:0 10% 30px 10%;
display:inline-block;
vertical-align:top;
}

.aboutcolumn3{
width:80%;
margin:0 10% 30px 10%;
display:inline-block;
vertical-align:top;
}

.aboutcolumnfull{
width:80%;
margin:0 10% 30px 10%;
display:inline-block;
vertical-align:top;
}

.aboutbreak{
clear:both;
width:100%;
height:50px;
}

.foot{
width:100%;
background:#444444;
text-align:center;

justify-content: center;
align-items: center;
padding:50px 0 0 0;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1.1em;
}

.footcolumn{
width:100%;
margin:0 auto 30px auto;
display:inline-block;
color:#e6e3d9;
}

.footlogo{
width:50%;
margin:0 auto;
}

.footgraphic{
width:40%;
margin:0 auto;
}

.footno{
display:none;
}

.deskham{display:none;}

.mobham{}

.MenuButtonContainer{
width:80%;
margin:20px 10% 0 10%;
text-align:center;
}

.buttonb {
  /* Generic styles for a button */
display:inline-block;
width:100%;
border:2px solid #8c5846;
padding:10px 20px;
font-family: 'veneer-three', sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.5em;
color:#8c5846;
text-align:center;
margin-bottom:15px;
 
  background-color: transparent;
  
  position: relative;
  z-index: 1;
  overflow: hidden;

}

.buttonc {
  /* Generic styles for a button */
display:inline-block;
border:2px solid #e6e3d9;
padding:7px 15px;
font-family: 'veneer-three', sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.1em;
color:#e6e3d9;
text-align:center;
margin-bottom:15px;
 
  background-color: transparent;
  
  position: relative;
  z-index: 1;
  overflow: hidden;

}

}

/* iPads (portrait and landscape) ----------- */
@media (min-width : 640px) and (max-width : 1150px) {
/* Styles */

.head{
width:100vw;
height:100vh;
display:flex;
} 

.subhead{
width:100vw;
height:70vh !important;
display:flex;
background:linear-gradient(270deg, rgba(0,0,0,0.3) 100%, rgba(0,0,0,0.3) 100%),url(/img/Zenzi_Website_LatticeBG4.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center;
} 

.headtitle{
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-size:5em;
font-family: 'Maaarka-Regular';
color:#ffffff;
}

.headingbreak{
height:100px;
}

.flex-container {
  display: flex;
  height: 100vh; /* Make the main container full height */
width:100%;
}

.left-column-flex {
  flex: 1.5; /* Takes up 1 part of the width */
  
  padding: 10px;
font-family: 'Maaarka-Regular';
font-size:1.5em;
display:flex;
justify-content: center;
align-items: center;
  /* By default, flex items stretch to the height of the container. */
}

.right-container-flex {
  flex: 1; /* Takes up 2 parts of the width, for example */
  display: flex;
  flex-direction: column; /* Stacks children vertically */
}

.right-top-flex, .right-bottom-flex {
  flex: 1; /* Both rows take equal height within the right container */
  padding: 10px;
}

.right-top-flex {

display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Maaarka-Regular';
font-size:1.5em;
background:url('/img/Reservationsbutton17.png');
background-size:cover;
background-position:center left;
background-repeat:no-repeat;
color:#e6e3d9;
}

.right-bottom-flex {

display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Maaarka-Regular';
font-size:1.5em;
background:url('/img/Sushibutton25_2.png');
background-size:cover;
background-position:center left;
background-repeat:no-repeat;
color:#e6e3d9;
}

.subheading{display:block;font-family: 'metallophile-sp8', sans-serif;font-weight:800;font-size:1em;opacity:0;transition:0.5s}

.right-top-flex:hover .subheading{opacity:1}

.right-bottom-flex:hover .subheading{opacity:1}

.menublock{
width:100%;
height:auto;
background:#e6e3d9;
background:url('/img/zenzitexture2.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
text-align:center;
padding:50px auto;
}

.menuheading{
position:relative;
top:-60px;
font-size:7em;
width:95%;
padding-left:5%;
text-align:left;
font-family: 'Maaarka-Regular';
color:#8c5846;
}

.menusubheading{
width:90%;
margin:40px 5% 20px 5%;
font-size:2.5em;
text-align:left;
font-family: 'Maaarka-Regular';
color:#8c5846;
}

.menutitle{
font-family: 'veneer-three', sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.7em;
}

.menucolumn{
width:30%;
display:inline-block;
vertical-align:top;
text-align:left;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1em;
}

.menubreak{
width:100%;
clear:both;
height:100px;
}

.fishwaves{
position:relative;
margin:-230px 5% 0 5%;
top:150px;
font-size:7em;
width:90%;
padding:50px 5% 0 5%;
text-align:left;
font-family: 'Maaarka-Regular';
color:#674A41;
}

.midphoto{
width:100%;
height:70vh;
background-image:url('/img/midphoto2.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.mapblock{
width:100%;
background:#e7e6de;
background-image:url('/img/Zenzimap7.jpg');
background-repeat:no-repeat;
background-position:center right;
background-size:100vh;
display:flex;
}

.mapcontent{
padding:50px 0 50px 50px;
width:40vw;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1.1em;
}

.bottomphoto1{
display:inline-block;width:50%;height:70vh;background-image:url('/img/zdslider6.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;
}

.bottomphoto2{
display:inline-block;width:50%;height:70vh;background-image:url('/img/bottom4.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;
}

.ebottomphoto1{
display:inline-block;width:50%;height:70vh;background-image:url('/img/ebottom1.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;
}

.ebottomphoto2{
display:inline-block;width:50%;height:70vh;background-image:url('/img/TatamiRoomWithArrow2.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;
}

.aboutblock{
width:100%;
background:#e6e3d9;
background:url('/img/zenzitexture2.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}

.aboutcontent{
width:70%;
max-width:1600px;
margin:0 auto;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1.1em;
}

.aboutcolumn{
width:45%;
padding-right:5%;
display:inline-block;
vertical-align:top;
}

.aboutcolumn2{
width:29%;
margin-right:3%;
display:inline-block;
vertical-align:top;
}

.aboutcolumn3{
width:45%;
margin:2.2%;
display:inline-block;
vertical-align:top;
}

.aboutbreak{
clear:both;
width:100%;
height:50px;
}

.foot{
width:100%;
background:#444444;
text-align:center;
display:flex;
justify-content: top;
align-items: center;
padding:50px 0;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1.1em;
}

.footcolumn{
width:20%;
display:inline-block;
color:#e6e3d9;
}

.footlogo{
width:50%;
margin:0 auto;
}

.footgraphic{
width:40%;
margin:0 auto;
}

.none{
display:none;
}

.deskham{}

.mobham{display:none;}

.MenuButtonContainer{
width:90%;
margin:100px 5% 0 5%;
text-align:left;
}

.buttona {

  background: linear-gradient(to right, rgba(108,108,108,1) 50%, rgba(255,255,255,1) 50%);
  background-size: 0% 0%;
  background-position: bottom;
  transition: all .5s ease-out;
  color: #666666;

}

.buttona:hover {
  background-size: 100% 100%;
  background-position: top;
  color: #ffffff !important;  
}

.buttonb {
  /* Generic styles for a button */
display:inline-block;
border:2px solid #8c5846;
padding:10px 20px;
font-family: 'veneer-three', sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.5em;
color:#8c5846;
margin-right:20px;
 
  background-color: transparent;
  
  position: relative;
  z-index: 1;
  overflow: hidden;

}

.buttonb:hover {
  /* Generic Hover style for a button */
  color: #e6e3d9 !important;
}

.buttonb::after {
  /* Adds the overlay for creating slide effect */
  content: '';
  position: absolute;
  background-color: #8c5846;
  z-index: -1;
  padding: 0.25em 0.5em;
  display: block;
  transition: all 0.35s;
  color:#e6e3d9 !important;
}

.buttonb:hover::after {
  /* Hover effect for the overlay slide effect */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.35s;
}

.bottom-slide::after {
  top: 100%;
  bottom: -100%;
  left: 0;
  right: 0;
}

.buttonc {
  /* Generic styles for a button */
display:inline-block;
border:2px solid #e6e3d9;
padding:7px 15px;
font-family: 'veneer-three', sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.1em;
color:#e6e3d9;
 
  background-color: transparent;
  
  position: relative;
  z-index: 1;
  overflow: hidden;

}

.buttonc:hover {
  /* Generic Hover style for a button */
  color: #666666 !important;
}

.buttonc::after {
  /* Adds the overlay for creating slide effect */
  content: '';
  position: absolute;
  background-color: #e6e3d9;
  z-index: -1;
  padding: 0.25em 0.5em;
  display: block;
  transition: all 0.35s;
  color:#e6e3d9 !important;
}

.buttonc:hover::after {
  /* Hover effect for the overlay slide effect */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.35s;
}

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1150px) {
/* Styles */

.head{
width:100vw;
height:100vh;
display:flex;
} 

.subhead{
width:100vw;
height:70vh !important;
display:flex;
background:linear-gradient(270deg, rgba(0,0,0,0.3) 100%, rgba(0,0,0,0.3) 100%),url(/img/Zenzi_Website_LatticeBG4.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center;
} 

.headtitle{
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-size:5em;
font-family: 'Maaarka-Regular';
color:#ffffff;
}

.headingbreak{
height:100px;
}

.flex-container {
  display: flex;
  height: 100vh; /* Make the main container full height */
width:100%;
}

.left-column-flex {
  flex: 1.5; /* Takes up 1 part of the width */
  
  padding: 10px;
font-family: 'Maaarka-Regular';
font-size:1.5em;
display:flex;
justify-content: center;
align-items: center;
  /* By default, flex items stretch to the height of the container. */
}

.right-container-flex {
  flex: 1; /* Takes up 2 parts of the width, for example */
  display: flex;
  flex-direction: column; /* Stacks children vertically */
}

.right-top-flex, .right-bottom-flex {
  flex: 1; /* Both rows take equal height within the right container */
  padding: 10px;
}

.right-top-flex {

display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Maaarka-Regular';
font-size:1.5em;
background:url('/img/Reservationsbutton17.png');
background-size:cover;
background-position:center left;
background-repeat:no-repeat;
color:#e6e3d9;
}

.right-bottom-flex {

display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Maaarka-Regular';
font-size:1.5em;
background:url('/img/Sushibutton25_2.png');
background-size:cover;
background-position:center left;
background-repeat:no-repeat;
color:#e6e3d9;
}

.subheading{display:block;font-family: 'metallophile-sp8', sans-serif;font-weight:800;font-size:1em;opacity:0;transition:0.5s}

.right-top-flex:hover .subheading{opacity:1}

.right-bottom-flex:hover .subheading{opacity:1}

.menublock{
width:100%;
height:auto;
background:#e6e3d9;
background:url('/img/zenzitexture2.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
text-align:center;
padding:50px auto;
}

.menuheading{
position:relative;
top:-60px;
font-size:7em;
width:95%;
padding-left:5%;
text-align:left;
font-family: 'Maaarka-Regular';
color:#8c5846;
}

.menusubheading{
width:90%;
margin:40px 5% 20px 5%;
font-size:2.5em;
text-align:left;
font-family: 'Maaarka-Regular';
color:#8c5846;
}

.menutitle{
font-family: 'veneer-three', sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.7em;
}

.menucolumn{
width:30%;
display:inline-block;
vertical-align:top;
text-align:left;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1em;
}

.menubreak{
width:100%;
clear:both;
height:100px;
}

.fishwaves{
position:relative;
margin:-230px 5% 0 5%;
top:150px;
font-size:7em;
width:90%;
padding:50px 5% 0 5%;
text-align:left;
font-family: 'Maaarka-Regular';
color:#674A41;
}

.midphoto{
width:100%;
height:70vh;
background-image:url('/img/midphoto2.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.mapblock{
width:100%;
min-height:50vh !important;
background:#e7e6de;
background-image:url('/img/Zenzimap7.jpg');
background-repeat:no-repeat;
background-position:center right;
background-size:100vh;
display:flex;
}

.mapcontent{
padding:50px 0 50px 50px;
width:40vw;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1.1em;
}

.bottomphoto1{
display:inline-block;width:50%;height:70vh;background-image:url('/img/zdslider6.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;
}

.bottomphoto2{
display:inline-block;width:50%;height:70vh;background-image:url('/img/bottom4.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;
}

.ebottomphoto1{
display:inline-block;width:50%;height:70vh;background-image:url('/img/ebottom1.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;
}

.ebottomphoto2{
display:inline-block;width:50%;height:70vh;background-image:url('/img/TatamiRoomWithArrow2.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;
}

.aboutblock{
width:100%;
background:#e6e3d9;
background:url('/img/zenzitexture2.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}

.aboutcontent{
width:70%;
max-width:1600px;
margin:0 15%;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1.1em;
}

.aboutcolumn{
width:45%;
padding-right:5%;
display:inline-block;
vertical-align:top;
}

.aboutcolumn2{
width:30%;
margin-right:3%;
display:inline-block;
vertical-align:top;
}

.aboutcolumn3{
width:45%;
margin:2.2%;
display:inline-block;
vertical-align:top;
}

.aboutbreak{
clear:both;
width:100%;
height:50px;
}

.foot{
width:100%;
background:#444444;
text-align:center;
display:flex;
justify-content: center;
align-items: top;
padding:50px 0;
font-family: 'metallophile-sp8', sans-serif;
font-weight: 300;
font-style: normal;
font-size:1.1em;
}

.footcolumn{
width:20%;
display:inline-block;
color:#e6e3d9;
}

.footlogo{
width:50%;
margin:0 auto;
}

.footgraphic{
width:40%;
margin:0 auto;
}

.none{
display:none;
}

.deskham{}

.mobham{display:none;}

.MenuButtonContainer{
width:90%;
margin:100px 5% 0 5%;
text-align:left;
}

.buttona {

  background: linear-gradient(to right, rgba(108,108,108,1) 50%, rgba(255,255,255,1) 50%);
  background-size: 0% 0%;
  background-position: bottom;
  transition: all .5s ease-out;
  color: #666666;

}

.buttona:hover {
  background-size: 100% 100%;
  background-position: top;
  color: #ffffff !important;  
}

.buttonb {
  /* Generic styles for a button */
display:inline-block;
border:2px solid #8c5846;
padding:10px 20px;
font-family: 'veneer-three', sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.5em;
color:#8c5846;
margin-right:20px;
 
  background-color: transparent;
  
  position: relative;
  z-index: 1;
  overflow: hidden;

}

.buttonb:hover {
  /* Generic Hover style for a button */
  color: #e6e3d9 !important;
}

.buttonb::after {
  /* Adds the overlay for creating slide effect */
  content: '';
  position: absolute;
  background-color: #8c5846;
  z-index: -1;
  padding: 0.25em 0.5em;
  display: block;
  transition: all 0.35s;
  color:#e6e3d9 !important;
}

.buttonb:hover::after {
  /* Hover effect for the overlay slide effect */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.35s;
}

.bottom-slide::after {
  top: 100%;
  bottom: -100%;
  left: 0;
  right: 0;
}

.buttonc {
  /* Generic styles for a button */
display:inline-block;
border:2px solid #e6e3d9;
padding:7px 15px;
font-family: 'veneer-three', sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.1em;
color:#e6e3d9;
 
  background-color: transparent;
  
  position: relative;
  z-index: 1;
  overflow: hidden;

}

.buttonc:hover {
  /* Generic Hover style for a button */
  color: #666666 !important;
}

.buttonc::after {
  /* Adds the overlay for creating slide effect */
  content: '';
  position: absolute;
  background-color: #e6e3d9;
  z-index: -1;
  padding: 0.25em 0.5em;
  display: block;
  transition: all 0.35s;
  color:#e6e3d9 !important;
}

.buttonc:hover::after {
  /* Hover effect for the overlay slide effect */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.35s;
}

}