* {
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
a {
  transition: color 1s;
  color: #58585A;
  text-decoration: none;
  cursor: pointer;
}
a:hover, #address:hover {
  color: #9F2929;
}
ul li ul li {
  font-size: 14px;
  padding-left: 10px;
}
li {
  list-style-type: none;
}
#theTop {
  position: absolute;
  height: 0px;
  width: 0px;
  top: 0px;
  left: 0px;
}
body {
  height: 100vh;
  width: 100vw;
  background-color: #000;
  font-size: 1.6vh;
  font-family: 'Abhaya Libre', serif;
  color: #4a4a4b;
}
h1, h2, h4 {
  font-family: 'Abhaya Libre', serif;
}
h2 {
  font-size: 100px;
}
h3, h5 {
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
  font-size: 18px;
}
h4, h4 a {
  color: #DECF7D;
  font-size: 4vw;
}
hr {
  overflow: visible;
  /* For IE */
  padding: 0;
  border: none;
  border-top: medium double #58585A;
  color: #333;
  text-align: center;
}
header, footer {
  visibility: hidden;
  height: 0px;
}
#topPage {
  font-size: 0px;
}
a#home:hover {
  color: white;
}
#logoLong {
  visibility: hidden;
  height: 0px;
}
#infoHead {
  height: 0;
  visibility: hidden;
}
.info {
  text-align: center;
  margin-top: 2vh;
  font-size: 1.2vw;
  margin-bottom: 6vh;
}
/* -- navigation -- */
#list1 {
  text-align: center;
  padding: 0 1vw;
}
#list1 li {
  border: 2px solid #fff;
  background: rgba(88, 88, 88, 0.9);
  font-size: 2.5vh;
  padding: 0.6vh 0;
  margin-bottom: 2vh;
  opacity: 0.8;
  width: 70%;
  margin-left: 15%;
}
#list1 a {
  color: #fff;
  display: block;
}
#list1 li.active {
  background: #fff;
  border-color: #585858;
}
#list1 li.active a {
  color: #585858;
}
#list1 li:hover {
  opacity: 1;
}
#list2, #menuList {
  width: 75vw;
  height: 100vh;
  position: absolute;
  left: 25vw;
  background: url(outside.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100vh;
}
#list2 li, #menuList li {
  height: 25%;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  text-align: center;
  text-transform: uppercase;
  box-sizing: border-box;
  opacity: 0.9;
}
#menuList li {
  height: 50%;
}
nav ul ul {
  margin-top: 0;
}
nav {
  position: fixed;
}
#list2 li a, #menuList li a {
  color: #fff;
  display: block;
  line-height: 6.5vh;
  border: 2px solid white;
  width: 33vh;
  height: 6.5vh;
  margin-top: 9.5vh;
  margin-left: calc(43.5vw - 24vh);
  font-size: 4vh;
  font-weight: 700;
}
#menuList li a {
  margin-top: 22vh;
}
#list2 li:hover, #menuList li:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}
.menu {
  color: #fff;
  text-transform: uppercase;
  width: 25vw;
  padding: 6vh 1vw;
  position: fixed;
  background: #000;
  z-index: 3;
  height: 100vh;
  box-sizing: border-box;
}
.menu h3 {
  font-size: 1.9vw;
}
.menu h5 {
  color: #9F2929;
  font-size: 1.35vw;
}
.menu ul ul {
  display: none;
}
.menu ul ul li:hover {
  color: #fff;
}
.menu ul li:hover ul {
  display: block;
}
.active a, .menu ul ul .active a {
  color: #9F2929;
}
/*Hamburgers*/
.menu-icon {
  visibility: hidden;
  cursor: pointer;
  position: fixed;
  width: 25px;
  height: 19px;
  z-index: 5;
  top: calc(4.5vh - 9.5px);
  right: calc(4.5vh - 12.5px);
  transition: transform 300ms ease-in-out;
}
.menu-icon:hover, nav:hover, #arrow:hover, #arrow {
  transition: background-color 0.5s linear;
}
.menu-icon:hover span {
  border: 1.5px solid #9F2929;
}
.menu-icon span {
  z-index: 1;
  height: 0px;
  border: 1.5px solid #f5f5f5;
  width: 22px;
  display: block;
  position: absolute;
}
.menu-icon span:nth-child(1) {
  top: 0px;
}
.menu-icon span:nth-child(2) {
  top: 8px;
}
.menu-icon span:nth-child(3) {
  top: 16px;
}
#menuToggle {
  display: none;
}
#menuToggle~.menu-icon span {
  transition: all 0.5s ease-in-out;
}
#menuToggle:checked~.menu-icon span:nth-child(1) {
  transform: rotate(44deg);
  transform-origin: top left;
}
#menuToggle:checked~.menu-icon span:nth-child(2) {
  opacity: 0;
}
#menuToggle:checked~.menu-icon span:nth-child(3) {
  transform-origin: bottom left;
  transform: rotate(-44deg);
}
/*------------------*/
.pageName {
  color: #fff;
  height: 50vh;
  text-align: center;
}
.aboutName {
  background: url(wakeUp.jpg);
  background-size: auto 100%;
  background-position: bottom;
}
.historyName {
  background: url(drawer.jpg);
  background-size: 100% auto;
  background-position: top;
}
.contactName {
  background: url(lights.jpg);
  background-size: 100% auto;
  background-position: bottom;
}
.giftName {
  background: url(bibbings.jpg);
  background-size: 100% auto;
  background-position: center;
}
.pageName h2 {
  font-size: 11vh;
  text-transform: uppercase;
  padding-top: 13vh;
  font-weight: 700;
}
#content {
  position: absolute;
  width: 75vw;
  left: 25vw;
}
#content h1 {
  text-align: center;
  margin: 30px 0;
  color: #58585A;
}
#intro {
  background: #fff;
  width: 100%;
  padding: 8vw 10vw 3vw 10vw;
  box-sizing: border-box;
  line-height: 2.6vw;
  font-size: 1.2vw;
}
#intro h4 {
  font-size: 5vw;
  border-bottom: 2px solid #DECF7D;
  line-height: 4vw;
  width: 24vw;
}
#intro h3 {
  text-align: left;
}
#intro img:nth-of-type(1) {
  height: 21vw;
  margin-left: 1vw;
}
#intro img:nth-of-type(2) {
  height: 15vw;
  margin-left: -2vw;
  margin-bottom: -1vw;
  transform: scaleY(1.1);
}
#intro img:nth-of-type(3) {
  height: 31vw;
  margin-bottom: -9vw;
  margin-left: 10vw;
}
#introduction p {
  font-size: 1.5vw;
  padding: 8vw 18vw;
  text-align: justify;
  color: #fff;
}
#introduction svg {
  width: 30vw;
  height: auto;
}
#front {
  width: 100%;
  height: 23vw;
  overflow: hidden;
}
#localSources {
  background: #000 url(steak.jpg);
  width: 100%;
  padding: 6vw 20vw;
  box-sizing: border-box;
  background-size: 100vw auto;
}
#localSources h4 {
  text-transform: uppercase;
  text-align: center;
}
#smaller {
  font-size: 1.8vw;
}
#sourcesText {
  background: rgba(0, 0, 0, 0.8);
  padding: 3vw 8vw;
  font-size: 1.5vw;
  color: #fff;
  text-align: center;
  margin-top: 5vw;
}
#historyContent {
  background: #fff;
}
#contentAbout {
  padding: 50px;
  column-rule: 1px solid #000;
  column-width: 20vw;
  text-align: justify;
  font-size: 2vh;
}
#contentAbout p {
  padding: 0 2vw;
}
iframe#map {
  width: 100%;
}
#content h3 {
  font-size: 2.2vw;
}
#historyContent h3 {
  font-size: 3.6vw;
  font-weight: 700;
  padding-top: 3vh;
}
#historyContent h4 {
  text-align: center;
  font-size: 2.5vw;
  text-transform: uppercase;
  padding-bottom: 4vh;
}
#historyContent svg {
  z-index: 0;
  position: fixed;
  top: 62vh;
  left: 37vw;
  width: 50vw;
  height: auto;
}
#menuContent {
  text-align: center;
}
.menu svg {
  width: auto;
  height: 35vh;
}
#bottomMenu {
  bottom: 5vh;
  text-align: center;
  width: 23vw;
}
#bottomMenu svg {
  width: 5vw;
  height: auto;
}
#buffer {
  height: 7vh;
}
#address {
  font-size: 1.2vw;
  color: #fff;
}
#bottomMenu svg, #bottomMenu img, footer svg {
  transition: all 0.7s ease-in-out;
}
#bottomMenu svg:hover, footer svg:hover {
  transform: scale(1.5);
}
footer svg {
  width: 13vw;
  height: auto;
}
#book {
  margin-top: 1vh;
  font-size: 2vw;
  line-height: 2.9vh;
}
#book a {
  font-size: 1.8vw;
}
#addressFoot {
  color: #fff;
}
#getInTouch {
  display: inline-block;
  width: 100%;
  background: #fff;
  padding: 4vw;
  box-sizing: border-box;
  font-size: 1.8vw;
}
#getInTouch p {
  margin-bottom: 2vh;
}
#getInTouch a {
  font-weight: 700;
  float: right;
}
#getInTouch h3 {
  text-align: left;
}
#TA_cdswritereviewlg761 {
  position: fixed;
  top: 50vh;
  right: 0px;
}
#giftVoucher {
  background: #fff;
  font-size: 2vh;
  text-align: right;
  overflow: hidden;
}
#bubbles {
  padding: 7vh;
  height: 12vh;
  width: 66vw;
}
#bubbles div {
  background: rgba(238, 238, 238, 0.5);
  border-radius: 100%;
  position: absolute;
  animation: fade 10s infinite;
}
@keyframes fade {
  from {
    bottom: -24px;
    opacity: 1;
    visibility: visible
  }
  to {
    bottom: 120%
  }
}
#greenSection {
  background: #233D23;
  height: 64vh;
}
#greenSection img {
  position: absolute;
}
#greenSection svg {
  position: absolute;
  height: 58vh;
  top: 50.3vh;
  left: 0vw;
}
#greenSection h2 {
  position: absolute;
  left: 26vw;
  top: 87vh;
  text-transform: uppercase;
  color: #fff;
  font-size: 4.5vh;
}
#champagne {
  height: 50vh;
  top: 54vh;
  left: 9vw;
}
#voucher {
  height: 13vw;
  top: 102vh;
  left: 40vw;
}
#voucherStack {
  height: 20vw;
  top: 102vh;
  left: 27vw;
}
#arrow {
  position: fixed;
  bottom: 10vh;
  right: 5vw;
  background-color: #100f0e;
  opacity: 0.96;
  border-radius: 5px;
  text-transform: uppercase;
  text-align: center;
  height: 4vw;
  width: 4vw;
  font-size: 1vw;
  line-height: 1.2vw;
  display: none;
}
a#arrow {
  color: white;
}
#arrow img {
  height: 1.5vw;
  margin-top: 0.6vw;
  margin-left: 0.25vw;
}
#introduction {
  display: inline-block;
}
@media screen and (max-width: 800px) and (min-height:500px), (orientation:portrait) {
  h2 {
    font-size: 60px;
  }
  header {
    visibility: visible;
    height: 9vh;
    background-color: black;
    width: 100vw;
    z-index: 1;
    top: 0;
    position: fixed;
  }
  #infoHead {
    overflow: hidden;
    position: relative;
    height: 3vh;
    background-color: #fff;
    margin-top: 9vh;
    visibility: visible;
  }
  #infoHead h3 {
    position: absolute;
    width: 100%;
    color: #000;
    font-size: 2.5vh;
    line-height: 3.3vh;
  }
  @keyframes infoHead {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-70%);
    }
  }
  body {
    background-color: #000;
    position: absolute;
  }
  #pLogo {
    visibility: hidden;
    height: 0px;
  }
  #logoLong {
    visibility: visible;
    position: absolute;
    left: calc(50vw - 16vh);
    display: inline-block;
    top: 1vh;
  }
  #home h3, #home h5, .info, #bottomMenu {
    visibility: hidden;
    height: 0px;
    margin: 0;
  }
  #list {
    margin-top: 0;
  }
  #list1 {
    margin-bottom: 0;
  }
  .menu {
    transition: top 1s ease-in-out;
    height: auto;
    width: 100vw;
    padding: 5px;
    box-sizing: border-box;
    left: 0;
    top: -47vh;
    z-index: 3;
  }
  .menu svg {
    visibility: hidden;
  }
  #list2 li a, #menuList li a {
    height: 5vh;
    width: 50vw;
    margin-left: 25vw;
    margin-top: 0.3vh;
    line-height: 5.2vh;
    font-size: 3.4vh;
    background: #000;
  }
  #menuList li a {
    width: 58vw;
    margin-left: 21vw;
  }
  #list2, #menuList {
    height: 44vh;
    left: 0;
    width: 100vw;
    padding-top: 17vh;
    position: relative;
  }
  #list2 li, #menuList li {
    height: 14%;
    background: none;
    border: none;
    opacity: 0.5;
  }
  #list2 li:hover, #menuList li:hover {
    background-color: initial;
  }
  #localSources h4 {
    font-size: 8vw;
  }
  #localSources {
    padding: 6vw 14vw;
    background-size: auto 100vw;
  }
  #smaller {
    font-size: 4vw;
  }
  iframe#map {
    height: 300px;
  }
  #menuToggle:checked~.menu {
    top: 9vh;
  }
  #menuToggle:checked~#content {
    filter: blur(3px);
    transition: 1s all linear;
  }
  .menu-icon {
    visibility: visible;
  }
  nav {
    text-align: center;
    position: relative;
  }
  #content {
    position: relative;
    width: 100vw;
    height: auto;
    left: 0;
    transition: 1s all linear;
  }
  #content p {
    font-size: 16px;
    margin: 5vh 0;
  }
  #content h3 {
    font-size: 3vh;
    margin-bottom: 3vh;
  }
  #contentAbout {
    padding: 8vw;
    column-width: initial;
  }
  #historyContent svg {
    top: 25vh;
    left: 5vw;
    width: 90vw;
  }
  #historyContent h4 {
    font-size: 4vw;
  }
  #getInTouch p {
    font-size: 2vh;
  }
  #getInTouch h3 {
    margin: 1vh;
    font-size: 2.4vh;
    color: #000;
  }
  #TA_cdswritereviewlg761 {
    visibility: hidden;
  }
  #front {
    height: 39vw;
    box-sizing: border-box;
    border: 5vw outset #000;
  }
  #introduction p {
    padding: 40px;
  }
  #introduction svg {
    width: 100vw;
  }
  .pageName {
    height: 16vh;
    background-size: 100% auto;
  }
  .pageName h2 {
    padding-top: 2.5vh;
    font-size: 5vh;
  }
  #intro {
    line-height: 2.2vh;
  }
  #intro h4 {
    font-size: 8vw;
    border-width: 1px;
    line-height: 6vw;
    width: 45vw;
  }
  #intro img:nth-of-type(1) {
    height: 69vw;
    margin-left: -5vw;
  }
  #intro img:nth-of-type(2) {
    height: 48vw;
    margin-left: 4vw;
    margin-bottom: -1vw;
  }
  #intro img:nth-of-type(3) {
    height: 62vw;
    margin-bottom: -2vw;
    margin-left: -60vw;
  }
  #bottomMenu {
    bottom: 14px;
    width: 70px;
  }
  #buffer {
    height: 0;
  }
  footer {
    position: relative;
    visibility: visible;
    height: 25vh;
    background-color: black;
    width: 96vw;
    text-transform: uppercase;
    bottom: 0px;
    text-align: center;
    padding: 2vh 2vw;
    color: #fff;
  }
  #bookFoot {
    margin-top: 1vh;
    font-size: 5.5vw;
  }
  #bookFoot a {
    font-size: 5vw;
    margin-top: 0.5vh;
  }
  #addressFoot {
    font-size: 3.4vw;
  }
  #arrow {
    height: 12vw;
    width: 12vw;
    font-size: 3.7vw;
    line-height: 3.7vw;
  }
  #arrow img {
    height: 7vw;
    margin-top: 0.6vw;
    margin-left: 0.45vw;
  }
  @media (orientation:landscape) {
    #TA_cdswritereviewlg761 {
      visibility: hidden;
    }
  }
  #bubbles {
    width: auto;
    padding: 3vh;
    height: 40vh;
  }
  #bubbles p {
    font-size: 2.6vh;
    padding-left: 20vw;
  }
  #greenSection svg {
    top: 30vh;
    opacity: 0.4;
  }
  #champagne {
    height: 40vh;
    top: 45vh;
  }
  #voucher {
    top: 65vh;
    left: 59vw;
    height: 16vw;
  }
  #voucherStack {
    left: 36vw;
    top: 65vh;
    height: 34vw;
  }
  #greenSection {
    height: 28vh;
  }
  #greenSection h2 {
    left: 15vw;
    top: 85vh;
    font-size: 7vw;
  }
}