@charset "UTF-8";
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
hr {}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.containerform {
    border-radius: 5px;
    background-color: #f0f0f0;
    padding: 20px;
	margin: 50px;
max-width: 640px; margin-left: auto;margin-right: auto;
    
}
.menu{font-size: 18px; color: #D5BFD6; font-family: 'Helvetica Neue', sans-serif; text-align: center; padding-top: 20px;padding-bottom: 10px;}
.words{max-width: 1100px; margin-left: auto;margin-right: auto;}
.contact{font-size: 18px; color: #D5BFD6; font-family: 'Helvetica Neue', sans-serif; padding-top: 20px;padding-bottom: 10px;text-align: center;}
.location{font-size: 18px; color: #D5BFD6; font-family: 'Helvetica Neue', sans-serif; padding-top: 20px;padding-bottom: 10px;text-align: left;padding-left: 50px;padding-right: 50px;}
*{
  margin:0px;
  padding:0px;
  box-sizing: border-box;
}

li {padding-bottom: 10px; padding-top: 10px}
.photos img {
    position: absolute;
}

.photos img:nth-of-type(1) {
    left: 50px;
    top: 50px;
}
 
.photos img:nth-of-type(2) {
    left: 150px;
    top: 100px;
}
 
.photos img:nth-of-type(3) {
    left: 250px;
    top: 50px;
}
 
.photos img:nth-of-type(4) {
    left: 350px;
    top: 150px;
}
 
.photos img:nth-of-type(5) {
    left: 450px;
    top: 50px;
}

body{
  background:#252525; margin: 0 auto;
}

/* Reservation request and homepage booking additions */
.homepage-carousel {
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.homepage-carousel-track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    touch-action: pan-y;
}

.homepage-carousel-track::-webkit-scrollbar {
    display: none;
}

.homepage-carousel-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.homepage-carousel img {
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

.homepage-carousel .mySlides {
    display: block !important;
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.homepage-carousel .carousel-slide-active {
    animation: carouselFade 0.45s ease;
}

@keyframes carouselFade {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

.homepage-carousel:focus-visible {
    outline: 3px solid #D5BFD6;
    outline-offset: 3px;
}

.reservation-cta,
.reservation-section,
.reservation-result {
    width: calc(100% - 32px);
    max-width: 900px;
    margin: 36px auto;
    padding: 30px;
    color: #D5BFD6;
    background: #341935;
    border: 1px solid #6f5071;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}

.reservation-cta {
    text-align: center;
}

.reservation-cta h2,
.reservation-section h2,
.reservation-result h1 {
    margin: 0 0 12px;
    padding: 0;
    color: #D5BFD6;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.reservation-cta p,
.reservation-intro,
.reservation-result p {
    margin: 0 auto 22px;
    color: #D5BFD6;
    font: 17px/1.65 'Helvetica Neue', sans-serif;
}

.reservation-button,
.reservation-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 26px;
    color: #341935;
    background: #D5BFD6;
    border: 2px solid #D5BFD6;
    border-radius: 4px;
    font: 700 16px/1.2 'Helvetica Neue', sans-serif;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.reservation-button:hover,
.reservation-button:focus,
.reservation-submit:hover,
.reservation-submit:focus {
    color: #341935;
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-1px);
}

.reservation-button:focus-visible,
.reservation-submit:focus-visible {
    outline: 3px solid rgba(213, 191, 214, 0.45);
    outline-offset: 3px;
}

.reservation-form {
    margin-top: 24px;
    padding: 26px;
    color: #252525;
    background: #f0f0f0;
    border-radius: 5px;
    text-align: left;
}

.reservation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.reservation-field {
    margin-bottom: 18px;
}

.reservation-field-full {
    grid-column: 1 / -1;
}

.reservation-field label,
.reservation-consent {
    color: #341935;
    font: 600 15px/1.4 'Helvetica Neue', sans-serif;
}

.reservation-field input,
.reservation-field select,
.reservation-field textarea {
    width: 100%;
    margin: 7px 0 0;
    padding: 12px 13px;
    color: #252525;
    background: #ffffff;
    border: 1px solid #9e8d9f;
    border-radius: 4px;
    box-sizing: border-box;
    font: 16px/1.4 'Helvetica Neue', sans-serif;
}

.reservation-field textarea {
    min-height: 115px;
    resize: vertical;
}

.reservation-field input:focus,
.reservation-field select:focus,
.reservation-field textarea:focus {
    outline: 3px solid rgba(52, 25, 53, 0.16);
    border-color: #341935;
}

.reservation-field-hint {
    display: block;
    margin-top: 6px;
    color: #665768;
    font: 13px/1.45 'Helvetica Neue', sans-serif;
}

.reservation-validation-summary {
    margin: 0 0 20px;
    padding: 12px 14px;
    color: #6f1522;
    background: #fff2f3;
    border: 1px solid #c87882;
    border-radius: 4px;
    font: 600 14px/1.5 'Helvetica Neue', sans-serif;
}

.reservation-validation-summary[hidden] {
    display: none;
}

.reservation-field-message {
    display: block;
    margin-top: 6px;
    color: #8b1e2d;
    font: 600 13px/1.45 'Helvetica Neue', sans-serif;
}

.reservation-field input[aria-invalid="true"],
.reservation-field select[aria-invalid="true"],
.reservation-field textarea[aria-invalid="true"] {
    border-color: #8b1e2d;
    box-shadow: 0 0 0 2px rgba(139, 30, 45, 0.12);
}

.reservation-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 22px;
}

.reservation-consent input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.reservation-submit {
    width: 100%;
    color: #ffffff;
    background: #341935;
    border-color: #341935;
}

.reservation-submit:hover,
.reservation-submit:focus {
    color: #ffffff;
    background: #523054;
    border-color: #523054;
}

.reservation-notice {
    margin: 16px 0 0;
    color: #514452;
    font: 13px/1.6 'Helvetica Neue', sans-serif;
    text-align: center;
}

.reservation-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.reservation-result-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.reservation-result {
    max-width: 720px;
    margin: 0;
    text-align: center;
}

.reservation-result-logo {
    width: 100%;
    max-width: 320px;
    margin-bottom: 26px;
}

.reservation-errors {
    max-width: 540px;
    margin: 0 auto 24px;
    padding-left: 24px;
    color: #f4e9f5;
    font: 15px/1.6 'Helvetica Neue', sans-serif;
    text-align: left;
}

@media screen and (max-width: 640px) {
    .reservation-cta,
    .reservation-section,
    .reservation-result {
        width: calc(100% - 24px);
        margin: 24px auto;
        padding: 22px 16px;
    }

    .reservation-form {
        padding: 20px 16px;
    }

    .reservation-grid {
        grid-template-columns: 1fr;
    }

    .reservation-field-full {
        grid-column: auto;
    }

    .reservation-button {
        width: 100%;
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-carousel .carousel-slide-active {
        animation: none;
    }
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

h1 { color: #D5BFD6; font-family: 'Helvetica Neue', sans-serif; font-size: 75px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center; padding: 20px}
.para {font-size: 24px; color: #D5BFD6; font-family: "Georgia"; line-height: 1.2;letter-spacing: -0.5px; padding: 30px; max-width: 1100px; margin-left: auto; margin-right: auto;}
.copy{font-size: 12px; color: #D5BFD6; font-family: 'Helvetica Neue', sans-serif; text-align: center; padding:15px;float: left; position: relative;background-color: #341935;max-width: 1100px; 
    width:100%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.footer{position: absolute;
	bottom: 0;
    margin: 0 auto;}
.animateme {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}

.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: #353535;
  bottom: 60px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  opacity:0;
}

.bg-bubbles li:nth-child(1) {
  left: 3%;
  border-radius:50em;
  background:transparent;
  border:4px solid #353535;
}
.bg-bubbles li:nth-child(2) {
  left: 6%;
  width: 75px;
  height: 75px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 15%;
  width: 175px;
  height: 175px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 90px;
  height: 90px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
  background:transparent;
  border:4px solid #353535;
}
.bg-bubbles li:nth-child(6) {
  left: 90%;
  width: 90px;
  height: 90px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  border-radius:50em;
  background:transparent;
  border:4px solid #353535;
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 60px;
  height: 60px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
  background:transparent;
  border:4px solid #353535;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 50px;
  height: 50px;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 30%;
  width: 140px;
  height: 140px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  border-radius:50em;
  background:transparent;
  border:4px solid #353535;
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 60px;
  height: 60px;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
.bg-bubbles li:nth-child(11) {
  left: 10%;
  width: 40px;
  height: 40px;
  -webkit-animation-delay: 13s;
          animation-delay: 13s;
  border-radius:50em;
}
.bg-bubbles li:nth-child(12) {
  left: 55%;
  width: 175px;
  height: 175px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
  background:transparent;
  border:4px solid #353535;
}

.bg-bubbles li:nth-child(13) {
  left: 65%;
  width: 100px;
  height: 100px;
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
  border-radius:50em;
}

@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity:0;
  }
  50% {
    opacity:1;
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
    opacity:1;
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity:0;
  }
  50% {
    opacity:1;
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
    opacity:0;
  }
}

html, body
{
    margin: 0px;
}

header, footer
{
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    margin: 0 auto;
	padding: 5em 3em;
	text-align: center;
    background: #555;
}

header h1
{
    color: #AAA;
    font-size: 40px;
    font-weight: lighter;
    margin-bottom: 5px;
}

header span
{
    color: #222;
}

footer span
{
  color: #AAA;
}

div.container
{
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    margin: 0 auto;
	
	text-align: center;
	
}

div.logo {padding-bottom: 15px}

div.container a
{
    color: #D5BFD6;
    text-decoration: none;
    font: 20px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.red
{
    background: #f44336;
}

.purple
{
    background: #341935;
}

.indigo
{
    background: #3f51b5;
}

.blue
{
    background: #2196f3;
}

.cyan
{
    background: #00bcd4;
}

.teal
{
    background: #009688;
}

.green
{
    background: #4caf50;
}

.lightGreen
{
    background: #8bc34a;
}

.lime
{
    background: #c0ca33;
}

.yellow
{
    background: #fdd835;
}

.amber
{
    background: #ffc107;
}

.orange
{
    background: #ff9800
}

.deepOrange
{
    background: #ff5722;
}

.brown
{
    background: #795548;
}

.gray
{
    background: #9e9e9e;
}

/* Top and Bottom borders go out */
div.topBotomBordersOut a:before, div.topBotomBordersOut a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #D5BFD6;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

div.topBotomBordersOut a:before
{
    top: 0px;
    transform: translateY(10px);
}

div.topBotomBordersOut a:after
{
    bottom: 0px;
    transform: translateY(-10px);
}

div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}

/* Top and Bottom borders come in */
div.topBotomBordersIn a:before, div.topBotomBordersIn a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #D5BFD6;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

div.topBotomBordersIn a:before
{
    top: 0px;
    transform: translateY(-10px);
}

div.topBotomBordersIn a:after
{
    bottom: 0px;
    transform: translateY(10px);
}

div.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}

/* Top border go down and Left border appears */
div.topLeftBorders a:before
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 2px;
    height: 0px;
    background: #FFF;
    content: "";
    opacity: 1;
    transition: all 0.3s;
}

div.topLeftBorders a:after
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 1;
    transition: all 0.3s;
}

div.topLeftBorders a:hover:before
{
    height: 100%;
}

div.topLeftBorders a:hover:after
{
    opacity: 0;
    top: 100%;
}

/* Circle behind */
div.circleBehind a:before, div.circleBehind a:after
{
    position: absolute;
    top: 22px;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 4px solid #0277bd;
    transform: translateX(-50%) translateY(-50%) scale(0.8);
    border-radius: 50%;
    background: transparent;
    content: "";
    opacity: 0;
    transition: all 0.3s;
    z-index: -1;
}

div.circleBehind a:after
{
    border-width: 2px;
    transition: all 0.4s;
}

div.circleBehind a:hover:before
{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

div.circleBehind a:hover:after
{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1.3);
}

/* Brackets go out */
div.brackets a:before, div.brackets a:after
{
    position: absolute;
    opacity: 0;
    font-size: 35px;
    top: 0px;
    transition: all 0.3s;
}

div.brackets a:before
{
    content: '(';
    left: 0px;
    transform: translateX(10px);
}

div.brackets a:after
{
    content: ')';
    right: 0px;
    transform: translateX(-10px);
}

div.brackets a:hover:before, div.brackets a:hover:after
{
    opacity: 1;
    transform: translateX(0px);
}


/* Border from Y to X  */
div.borderYtoX a:before, div.borderYtoX a:after
{
    position: absolute;
    opacity: 0.5;
    height: 100%;
    width: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

div.borderYtoX a:before
{
    left: 0px;
    top: 0px;
}

div.borderYtoX a:after
{
    right: 0px;
    bottom: 0px;
}

div.borderYtoX a:hover:before, div.borderYtoX a:hover:after
{
    opacity: 1;
    height: 2px;
    width: 100%;
}

/* Border X get width  */
div.borderXwidth a:before, div.borderXwidth a:after
{
    position: absolute;
    opacity: 0;
    width: 0%;
    height: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

div.borderXwidth a:before
{
    left: 0px;
    top: 0px;
}

div.borderXwidth a:after
{
    right: 0px;
    bottom: 0px;
}

div.borderXwidth a:hover:before, div.borderXwidth a:hover:after
{
    opacity: 1;
    width: 100%;
}

/* Pull down  */
div.pullDown a:before
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullDown a:hover:before
{
    height: 100%;
}

/* Pull up  */
div.pullUp a:before
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    bottom: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullUp a:hover:before
{
    height: 100%;
}

/* Pull right  */
div.pullRight a:before
{
    position: absolute;
    width: 2px;
    height: 100%;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullRight a:hover:before
{
    width: 100%;
}

/* Pull left  */
div.pullLeft a:before
{
    position: absolute;
    width: 2px;
    height: 100%;
    right: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullLeft a:hover:before
{
    width: 100%;
}

/* Pull up and down  */
div.pullUpDown a:before, div.pullUpDown a:after
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullUpDown a:before
{
    top: 0px;
} 

div.pullUpDown a:after
{
    bottom: 0px;
}

div.pullUpDown a:hover:before, div.pullUpDown a:hover:after
{
    height: 100%;
}

/* Pull right and left  */
div.pullRightLeft a:before, div.pullRightLeft a:after
{
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullRightLeft a:before
{
    left: 0px;
} 

div.pullRightLeft a:after
{
    right: 0px;
}

div.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after
{
    width: 100%;
}

/* Highlight text out  */
div.highlightTextOut a
{
    color: rgba(255, 255, 255, 0.3); 
}

div.highlightTextOut a:before, div.highlightTextIn a:before
{
    position: absolute;
    color: #FFF;
    top: 0px;
    left: 0px;
    padding: 10px;
    overflow: hidden;
    content: attr(alt);
    transition: all 0.3s;
    transform: scale(0.8);
    opacity: 0;
} 

div.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before
{
    transform: scale(1);
    opacity: 1;
}

/* Highlight text in  */
div.highlightTextIn a
{
    color: rgba(0, 0, 0, 0.4); 
}

div.highlightTextIn a:before
{
    transform: scale(1.2);
} 

.container {
    display: inline-block;
    cursor: pointer;
    width: 100%;
    padding: 15px;
}

.map{
    padding: 30px; text-align: center; max-width: 1000px; margin-left: auto; margin-right: auto}

.item1 { grid-area: logo; }
.item2 { grid-area: name; }

.item3 { grid-area: name2; }
.item4 { grid-area: chinese; }
.item4 h1{text-align: center; padding: 0;font-size: 300%; margin: 0;  margin-top: 5px;}
.item5 { grid-area: fullname; }
.item6 { grid-area: navbar; }

.grid-container {
    max-width: 1100px;
    margin-left: auto; margin-right: auto;
  display: grid;
  grid-template-areas:
    'logo name name chinese chinese chinese chinese chinese'
    'logo name name chinese chinese chinese chinese chinese'
    'fullname fullname fullname fullname fullname fullname fullname fullname'
    'navbar navbar navbar navbar navbar navbar navbar navbar';
   grid-gap: 2px;
  background-color: #D5BFD6;
    margin: 0 auto;
    }

.grid-container > div {
  background-color: #341935;
  text-align: center;
  padding: 10px 0;
  font-size: 30px;
}