header {
	background: #3f51b5;
	color: #fff;
	padding: 150px 0;
}
header p {
	font-family: 'Allura';
	color: rgba(255, 255, 255, .2);
	margin-bottom: 0;
	font-size: 60px;
	margin-top: -30px;
}
.timeline {
   display: inline-block;
   z-index: 10;
   animation: Timelinemove 2s cubic-bezier(0, 0, 0.2, 1);

}

@keyframes Timelinemove {
   from{
	   opacity: 0;
   }
   to{
	   opacity: 1;
   }
}


#timelineid{
   display: none;
}


.timeline-item {
	width: 100%;
	margin-bottom: 70px;
}

.timeline-bar{
	display: inline-grid;
    position: fixed;
    z-index: 100;
    height: 75vh;
    left: 21%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    justify-items: center;
    align-content: space-evenly;
    justify-content: center;
    align-items: center;
}

#timeline-lineid{
	position: absolute;
    background-color: #856800;
    width: 3px;
    height: 100%;
    z-index: -1;
}

.timelineDot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
   border: solid #856800;
   
}

 

 .timelineDot .timelineDotText{
   visibility: hidden;
   width: 120px;
   background-color: #000000bf;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   left: 50%;
   margin-left: -60px;
   margin-top: -43px;
   opacity: 0;
   transition: opacity 0.3s;
   font-size: min(max(10px, 3vw),15px);
   box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 60%), inset 0 -2px 6px 0px rgb(0 0 0 / 60%);
}
 
 .timelineDot .timelineDotText::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
 
 }
 
 .timelineDot:hover .timelineDotText{
  visibility: visible;
  opacity: 1;
  
 }

.timelineIndot {
   cursor: pointer;
   height: 10px;
   width: 10px;
   background-color: black;
   border-radius: 50%;
   display: none;
   transition: background-color 0.6s ease;
   position: absolute;
}

#timelineIndot1 {
	display: block;
}


.sub-box{
   background-size: 300px;
   background-color: #503f00;
   color: white;
   width: 50vh;
   position: absolute;
   bottom: 50%;
   display: none;
   border-radius: 4px;
   grid-column: 6 / 1 span;
   text-align: center;
   padding: 10px;
   z-index: 100;
   right: 13%;
   bottom: 10%;
}


.sub-box-img {
   overflow: hidden;
   object-fit: cover;
   object-position: center;
   box-shadow: 0 0 13px 0px rgb(0 0 0 / 60%);
}

p2 {
   padding: 20px;
   background-color: rgb(0 0 0 / 60%);
}


#phase1{
   display: block;
   position: fixed;
   width: 100%;
   height: 106vh;
   grid-row: 2 / 1 span;
   
}
#phase2{
   display: none;
   position: fixed;
   width: 100%;
   height: 106vh;
   grid-row: 3 / 1 span;


}
#phase3{
   display: none;
   position: fixed;
   width: 100%;
   height: 106vh;
   grid-row: 4 / 1 span;

}
#phase4{
   display: none;
   position: fixed;
   width: 100%;
   height: 106vh;
   grid-row: 5 / 1 span;

}
#phase5{
   display: none;
   position: fixed;
   width: 100%;
   height: 106vh;
   grid-row: 6 / 1 span;

}
#phase6{
   display: none;
   position: fixed;
   width: 100%;
   height: 106vh;
   grid-row: 7 / 1 span;

}



.areaName{
   background-color: #5c0000;
   width: 100%;
   color: #f5f5f5;
   grid-column: 1 / 6 span;
   grid-row: 5 / 1 span;
   text-align: center;
   box-shadow: inset 3px 5px 12px 0px rgb(0 0 0 / 60%);
   display: flex;
   justify-content: center;
   cursor: pointer;
   align-items: center;
}

.areaName p{
   padding: 0 5px;
   text-shadow: 4px 3px 9px black;
}

.areaName p:hover{
   text-shadow: unset;
   color: #ffc800;
   padding: 3px 5px 0 5px;
}


.timeline-img {
	width: 30px;
	height: 30px;
	background: #3f51b5;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	margin-top: 25px;
	margin-left: -15px;
}

#infoENGid{
   display: block;
   
}
#infoCNid{
   display: none;
}

.gallery-btn{
   margin: 5px;
}

.gallery-btn-image {
   background-image: linear-gradient(to top right, #707070 , #707070e0);
	color: #fff;
	padding: 8px 20px;
	font-size: 14px;
	margin: 5px;
	display: inline-block;
	border-radius: 2px;
	box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .6);
}
.gallery-btn-image:hover, .gallery-btn-image:active, .gallery-btn-image:focus {
   background-image: linear-gradient(to right, #ff372f , #902602);
	color: #fff;
	text-decoration: none;
}
.gallery-btn-object {
   background-image: linear-gradient(to top right, #707070 , #707070e0);
	color: #fff;
	padding: 8px 20px;
	font-size: 14px;
	margin-top: 10px;
	display: inline-block;
	border-radius: 2px;
	box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .6);
}
.gallery-btn-object:hover, .gallery-btn-object:active, .gallery-btn-object:focus {
   background-image: linear-gradient(to right, #ff372f , #902602);
	color: #fff;
	text-decoration: none;
}
.gallery-btn-video {
   background-image: linear-gradient(to top right, #707070 , #707070e0);
	color: #fff;
	padding: 8px 20px;
	font-size: 14px;
	margin-top: 10px;
	display: inline-block;
	border-radius: 2px;
	box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .6);
}
.gallery-btn-video:hover, .gallery-btn-video:active, .gallery-btn-video:focus {
   background-image: linear-gradient(to right, #ff372f , #902602);
	color: #fff;
	text-decoration: none;
}

#galleryid{
   display: none;
   grid-template-rows: 70px auto auto;
   grid-template-columns: 50% auto;
}
.BtnGallerylevel{
   grid-row: 1 / 1 span;
   grid-column: 1 / 2 span;
   width: 20%;
   padding: 10px;
   z-index: 10;
}
.BtnGallerycontrol {
   float: left;
   overflow: hidden;
   min-width: 160px;
   background-color: #707070;
   border-radius: 5px;
   margin: 5px;
 }
 
 .BtnGallerycontrol .BtnGalleryFloor {
   font-size: 16px;
   border: none;
   outline: none;
   color: white;
   padding: 5px 5px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
   min-width: 160px;
 }
 
 .BtnGallerycontrol:hover .BtnGalleryFloor {
   background-color: #333;
   min-width: 160px;

 }
 
 .BtnGallery {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }
 
 .BtnGallery button {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
   border: none;
   width: 100%;
 }
 
 .BtnGallery button:hover {
   background-color: #ddd;
 }
 
 .BtnGallerycontrol:hover .BtnGallery{
   display: block;
 }
#BtnGallerycontrolGroundFloorid{
   display: none;
}
#BtnGallerycontrolFirstFloorid{
   display: none;
}
#BtnGallerycontrolRoofid{
   display: none;
}
#BtnGallerycontrolOutdoorid{
   display: none;
}
.BtnGalleryTextcontrol{
   width: 100%;
   padding-bottom: 85.29%;
   position: relative;
   display: block;
}

.BtnGalleryText{
   visibility: hidden;
   width: 120px;
   background-color: #000000e6;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   margin-left: -60px;
   opacity: 0;
   transition: opacity 0.3s;
   font-size: min(max(10px, 3vw),15px);
}

.BtnGalleryText::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #000000e6 transparent transparent transparent;
}
#btnKitchenRoof{
   top: 60%;
   Left: 70%;
}
#btnEnclosedCourtyardRoof{
   top: 16%;
   Left: 24%;
}
#btnCourtyardRoof{
   top: 27%;
   Left: 45%;
}
#btnOutdoorRoofCenter{
   top: 40%;
   Left: 32%;
}
#btnOutdoorRoofRight{
   top: 75%;
   Left: 65%;
}
#btnOutdoorGardenWestSide{
   top: 50%;
   Left: 87%;
}
#btnOutdoorGarden{
   top: 90%;
   Left: 75%;
}
#btnMainEntrance{
   top: 55%;
   Left: 18%;
}
#btnFrontdoor{
   top: 60%;
   Left: 34%;
}
#btnRightBedroom{
   top: 50%;
   Left: 50%;
}
#btnRightBedroom2{
   top: 24%;
   Left: 68%;
}
#btnRightLivingRoom{
   top: 35%;
   Left: 60%;
}
#btnEnclosedCourtyardRoof{
   top: 16%;
   Left: 24%;
}
#btnRightFunctionRoom{
   top: 16%;
   Left: 67%;
}
#btnLeftSideRoom{
   top: 35%;
   Left: 22%;
}
#RightBedroom2{
   top: 23%;
   Left: 70%;
}
#btnMainCorridor{
   top: 40%;
   Left: 70%;
}
#btnLavatory{
   top: 25%;
   Left: 87%;
}
#btnKitchen{
   top: 65%;
   Left: 70%;
}
#btnEntranceHall{
   top: 50%;
   Left: 38%;
}
#btnEnclosedCourtyard{
   top: 23%;
   Left: 27%;
}
#btnMainHall{
   top: 25%;
   Left: 55%;
}
#btnCourtyard{
   top: 38%;
   Left: 48%;
}

#galleryCardid{
   grid-row: 3 / 1 span;
   grid-column: 2 / 1 span;
}
.levelimage {
   display: block;
 }
#levelimageid{
   grid-row: 1 / 1 span;
   grid-column: 1 / 2 span;
   width: 100%;
}
.levelimagecontrol{
   overflow: hidden;
   object-fit: cover;
   object-position: center;
   position: absolute;
   z-index: -1;
}
#galleryMapCloseid{
   display: none;
}
.gallery {
   box-sizing: border-box;
   max-width: 100%;
}
.galleryMap{
   background-color: white;
   width: 50%;
   position: fixed;
   display: grid;
   grid-template-columns: 50% 50%;
   grid-template-rows: auto auto;
   top: 69px;
}

.row {
 margin: 10px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
 padding: 8px;
}

/* Create three equal gallery_column that floats next to each other */
.column {
 float: left;
 width: 50%;
 height: 100%;
 display: none; /* Hide gallery_column by default */
}

/* Clear floats after gallery_rows */
.rows:after {
 content: "";
 display: table;
 clear: both;
}

/* gallery_content */
.gallery_content {
 background-color: #75757514;
 padding: 10px;
 box-shadow: 0 20px 25px -15px rgb(0 0 0 / 30%);
 margin: 10px;
 border-radius: 4px
}


.gallerybox {
   height: 50vh;
   overflow: hidden;
   object-fit: cover;
   object-position: center;
}

.gallet-textbox{
   overflow: auto;
   height: 150px;
   background-color: white;
   padding: 0px 20px 0px 20px;
}

/* The "show" class is added to the filtered elements */
.show {
 display: block;
}



.bnt-more {
   background-image: linear-gradient(to top right, #707070 , #707070e0);
	color: #fff;
	padding: 8px 20px;
	font-size: 14px;
	display: inline-block;
	border-radius: 2px;
	text-align: center;
	height: 30px;
	min-width: 40px;
	max-width: 100px;
	width: auto;
	box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .6);
}
.bnt-box{
   width: 100%;
   grid-column: 1 / 1 span;
   grid-row: 4 / 1 span;
   background-color: #f5f5f5;
}
.bnt-more:hover, .bnt-more:active, .bnt-more:focus {
   background-image: linear-gradient(to right, #ff372f , #902602);
	color: #fff;
	text-decoration: none;
}
.timeline-card {
	position: relative;
	padding: 10px 30px;
	border-radius: 4px;
	box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);
	padding: 0 !important;
	height: 100vh;
	display: grid;
	grid-template-columns: 20% 2% 1% 2% auto 28%;
	grid-template-rows: 70px 15% auto auto 70px;
}


.timeline-card a {
   margin-left: 2.5px;
   margin-right: 2.5px;
   margin-bottom: 10px;
}
.timeline-item #timeline-img-header-P1 {
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)), url('https://wsp360kin.blob.core.windows.net/tai-fu-tai-mansion/skin/P1/1865-1898s-P1.png') center center no-repeat;
	background-size: cover;
}
.timeline-item #timeline-img-header-P2 {
   background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)), url('https://wsp360kin.blob.core.windows.net/tai-fu-tai-mansion/skin/P2/1899-1940s-P2.png') center center no-repeat;
   background-size: cover;
}
.timeline-item #timeline-img-header-P3 {
   background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)), url('https://wsp360kin.blob.core.windows.net/tai-fu-tai-mansion/skin/P3/1940-1945-P3.png') center center no-repeat;
   background-size: cover;
}
.timeline-item #timeline-img-header-P4 {
   background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)), url('https://wsp360kin.blob.core.windows.net/tai-fu-tai-mansion/skin/P4/1945-1988s-P4.png') center center no-repeat;
   background-size: cover;
}
.timeline-item #timeline-img-header-P5 {
   background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)), url('https://wsp360kin.blob.core.windows.net/tai-fu-tai-mansion/skin/P5/1960s-P5.png') center center no-repeat;
   background-size: cover;
}
.timeline-item #timeline-img-header-P6 {
   background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)), url('https://wsp360kin.blob.core.windows.net/tai-fu-tai-mansion/skin/P6/1970s-P6.png') center center no-repeat;
   background-size: cover;
}
.timeline-img-header {
   height: auto;
   min-height: 71px;
   position: relative;
   grid-column: 1 / 1 span;
   grid-row: 2 / 1 span;
   box-shadow: inset 0 -10px 9px 0px rgb(0 0 0 / 60%);
}
.timeline-img-header h2 {
   color: #fff;
   position: absolute;
   bottom: 5px;
   left: 20px;
}
blockquote {
	margin-top: 30px;
	color: #757575;
	border-left-color: #3f51b5;
	padding: 0 20px;
}
.date {
	background: #5c0000;
	display: inline-block;
	color: #fff;
	padding: 10px;
	position: absolute;
	top: 0;
	right: 0;
	grid-column: 1 / 1 span;
	grid-row: 2 / 1 span;
}
.timelineInfo{
   background-color: #f5f5f5;
   grid-column: 1 / 1 span;
   grid-row: 3 / 1 span;
   overflow: auto;
}
.timelineInfo p {
	padding: 0 20px;
	overflow: auto;
}
.box0{
   display: none;
}
.galleryBox0{
   display: none;
}

.photoNumber{
   grid-column: 1 / 6 span;
   grid-row: 2 / 4 span;
   position: absolute;
   cursor: pointer;
}
.photoPoint{
   position: absolute;
   text-align: center;
   font-weight: bold;
}
.photoPointdot{
   font-size: min(max(14px, 3vw),35px);
   text-shadow: 0 0 4px white;
   position: absolute;
   color: #ffffff;
   font-weight: bold;
   left: -17px;
}
.photoPointNb{
   font-size: min(max(14px, 3vw),35px);
   position: absolute;
   color: #a7a7a7;
   left: -17px;

}

.translate{
   display: inline-flex;
   align-items: flex-start;
   justify-content: center;
   position: absolute;
   right: 15px;
   top: 80px;
}
.btntranslate{
   width: 50px;
   height: 25px;
   margin: 5px;
}
.photoPoint .photoText{
   visibility: hidden;
   width: 120px;
   background-color: #9f7d00;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 50%;
   margin-left: -60px;
   opacity: 0;
   transition: opacity 0.3s;
   font-size: min(max(10px, 3vw),15px);
}

.photoPoint .photoText::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #9f7d00 transparent transparent transparent;
}



#P1_1{
   top: 10vw;
   left: 47vw;
}
#P1_2{
   top: 10vw;
   left: 40vw;
}
#P1_3{
   top: 11vw;
   left: 33vw;
}
#P1_4{
   top: 14vw;
   left: 30vw;
}
#P1_5{
   top: 17vw;
   left: 33vw
}
#P1_6{
   top: 26vw;
   left: 55vw;
}
#P1_7{
   top: 30vw;
   left: 74vw
}
#P1_8{
   top: 19vw;
   left: 50vw;
}
#P1_9{
   top: 15vw;
   left: 44vw;
}
#P1_10{
   top: 5vw;
   left: 55vw;
}

#P2_1{
   top: 10vw;
   left: 47vw;
}
#P2_2{
   top: 10vw;
   left: 41.5vw;
}
#P2_3{
   top: 9.5vw;
   left: 38.5vw;
}
#P2_4{
   top: 11vw;
   left: 33vw;
}
#P2_5{
   top: 14vw;
   left: 30vw;
}
#P2_6{
   top: 20vw;
   left: 34vw;
}
#P2_7{
   top: 30vw;
   left: 74vw
}
#P2_8{
   top: 19vw;
   left: 50vw;
}
#P2_9{
   top: 14vw;
   left: 44vw;
}
#P2_10{
   top: 5vw;
   left: 55vw;
}

#P3_1{
   top: 10vw;
   left: 47vw;
}
#P3_2{
   top: 10vw;
   left: 41.5vw;
}
#P3_3{
   top: 9.5vw;
   left: 38.5vw;
}
#P3_4{
   top: 11vw;
   left: 33vw;
}
#P3_5{
   top: 14vw;
   left: 30vw;
}
#P3_6{
   top: 17vw;
   left: 33vw
}
#P3_7{
   top: 22vw;
   left: 35vw;
}
#P3_8{
   top: 30vw;
   left: 74vw
}
#P3_9{
   top: 26vw;
   left: 55vw;
}
#P3_10{
   top: 19vw;
   left: 53vw;
}
#P3_11{
   top: 14vw;
   left: 47vw;
}
#P3_12{
   top: 17vw;
   left: 39vw;
}
#P3_13{
   top: 5vw;
   left: 55vw;
}
#P4_10{
   top: 3vw;
   left: 55vw;
}
#P4_1{
   top: 10vw;
   left: 47vw;
}
#P4_2{
   top: 8vw;
   left: 41.5vw;
}
#P4_3{
   top: 9.5vw;
   left: 37.5vw;
}
#P4_4{
   top: 9vw;
   left: 33vw;
}
#P4_5{
   top: 14vw;
   left: 30vw;
}
#P4_6{
   top: 17vw;
   left: 33vw
}
#P4_7{
   top: 30vw;
   left: 74vw
}
#P4_8{
   top: 26vw;
   left: 55vw;
}
#P4_9{
   top: 24vw;
   left: 44vw;
}
#P4_10{
   top: 18vw;
   left: 64vw;
}
#P4_11{
   top: 18vw;
   left: 44vw;
}
#P4_12{
   top: 17vw;
   left: 39vw;
}
#P4_13{
   top: 5vw;
   left: 55vw;
}

#P5_1{
   top: 10vw;
   left: 47vw;
}
#P5_2{
   top: 10vw;
   left: 38vw;
}
#P5_3{
   top: 20vw;
   left: 52vw;
}
#P5_4{
   top: 5vw;
   left: 55vw;
}
#P5_5{
   top: 17vw;
   left: 38vw;
}
#P5_6{
   top: 25vw;
   left: 44vw;
}

#P6_1{
   top: 10vw;
   left: 47vw;
}
#P6_2{
   top: 17vw;
   left: 41vw;
}
#P6_3{
   top: 14vw;
   left: 30vw;
}
.mapshow{
   display: block;
}

@media screen and (max-width: 1368px) {

   .photoNumber{
	   grid-column: 1 / 3 span;
      transform: scale(0.9);
      left: 10%;
   }

   .timeline-card {
	   padding: 0;
	   height: 100vh;
	   display: grid;
	   grid-template-columns: 20% auto 25%;
	   grid-template-rows: 70px 80px auto auto auto;
	 }

   .sub-box{
	   grid-column: 1 / 3 span;
	   grid-row: 3 / 2 span;
	   left: unset;
	   right: 5%;
	   bottom: 5%;
	   width: 45vh;
	   box-shadow: 0 1px 20px 1px rgb(0 0 0 / 60%);
	   text-align: center;
	   padding: 10px;
	   z-index: 100;
   }
   .areaName{
      grid-column: 1 / 1 span;
      grid-row: 3 / 1 span;
      box-shadow: inset 3px 5px 12px 0px rgb(0 0 0 / 60%);
      display: flex;
      align-items: unset;
      padding: 5%;
      text-align: left;
      flex-direction: column;
      justify-content: unset;
      font-size: 11px;
	}

   .areaName p{
      padding: 0 5px;
      text-shadow: 4px 3px 9px black;
      margin-block-start: 2px;
      margin-block-end: 2px;
   }
   
   .areaName p:hover{
      text-shadow: unset;
      color: #ffc800;
      padding: 0 5px 0 8px;
   }

   .timelineInfo{
	   background-color: #f5f5f5;
	   grid-column: 1 / 3 span;
	   grid-row: 4 / 1 span;
	   overflow: auto;
	   box-shadow: 0px -10px 20px 0px rgb(0 0 0 / 60%);
	  }

   .bnt-box{
	   width: 100%;
	   grid-column: 1 / 3 span;
	   grid-row: 5 / 1 span;
	   background-color: #f5f5f5;
	   z-index: 1;
	  }

   .box0{
	   display: block;
	   width: 60%;
	   grid-column: 1 / 3 span;
	   grid-row: 2 / 2 span;
	   opacity: 0;
	  }
   .date{
      grid-column: 1 / 1 span;
      grid-row: 2 / 1 span;
      font-size: 13px;
   }
   .timeline-img-header{
	   grid-column: 1 / 1 span;
	   grid-row: 2 / 1 span;
	   box-shadow: inset 0 0 20px 10px rgb(0 0 0 / 60%);
      font-size: 13px;
	  }
   .column {
	   width: 100%;
	}

   .timeline-bar{
      height: 29vw;
      top: 33vw;
      -webkit-transform: translateY(-85%);
      -ms-transform: translateY(-85%);
      transform: translateY(-85%);
   }

   .timeline-img-header h2 {
      color: #fff;
      position: absolute;
      bottom: -10px;
      left: 20px;
   }
}
@media screen and (max-width: 850px) {

   .photoNumber{
	   grid-column: 1 / 3 span;
      transform: unset;
      left: unset;
   }


   .timeline-card {
	   padding: 0 ;
	   height: 100vh;
	   display: grid;
	   grid-template-columns: 25% auto 25%;
	   grid-template-rows: 70px auto auto auto auto;
  }

   .timelineInfo{
      background-color: #f5f5f5;
      grid-column: 1 / 3 span;
      grid-row: 3 / 1 span;
      overflow: auto;
   }

   .bnt-box{
	   width: 100%;
	   grid-column: 1 / 3 span;
	   grid-row: 4 / 1 span;
	   background-color: #f5f5f5;
   }
   .date{
      grid-column: 1 / 1 span;
      width: 100%;
      text-align: center;
      top: unset;
      bottom: 0;

   }
   .areaName{
      grid-column: 1 / 3 span;
      grid-row: 5 / 1 span;
      box-shadow: inset 3px 5px 12px 0px rgb(0 0 0 / 60%);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: flex-end;
      justify-content: center;
      padding: 2%;

   }
   .areaName p:hover{
      text-shadow: unset;
      color: #ffc800;
      padding: 1px 5px 0 5px;
   }
   
   .box0{
      grid-row: 2 / 1 span;
      width: 70%;
   }
   .galleryBox0{
      display: block;
      width: 10vw;
      opacity: 0;
	  }
   .timeline-img-header{
	   grid-column: 1 / 1 span;
   }
   .timeline-img-header h2 {
      color: #fff;
      position: absolute;
      bottom: unset;
      top: 5px;
      left: 20px;
  }

   .sub-box{
	   grid-column: 1 / 3 span;
	   grid-row: 1 / 5 span;
	   left: unset;
	   right: unset;
	   bottom: unset;
	   width: 40vh;
	   box-shadow: 0 1px 20px 1px rgb(0 0 0 / 60%);
	   text-align: center;
	   padding: 10px;
	   z-index: 100;
	   align-self:  center;
	   justify-self: center;
   }
   .column {
	   width: 100%;
	 }

   .timeline-bar{
      display: none;
   }
   .photoPoint{
      box-shadow: 0 1px 4px 0px rgb(0 0 0 / 60%), inset -5px -5px 10px 4px rgb(0 0 0 / 18%)
   }
   .BtnGallerylevel{
      grid-row: 2 / 1 span;
      grid-column: 1 / 2 span;
      left: unset;
      top: unset;
      position: relative;
      align-content: center;
      padding: 10px;
      height: unset;
      background-image: unset;
      background-color: white;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      z-index: 4;
      width: 100%;
   }
   .BtnGallery{
      display: none;
   }

   .BtnGallerycontrol:hover .BtnGallery{
      display: block;
    }
   #galleryMapCloseid{
      align-items: center;
      background-color: unset;
      width: 100%;
      color: Black;
      grid-column: 1 / 2 span;
      grid-row: 3 / 1 span;
      text-align: center;
      border-style: solid none none none;
      border-color: #9f7d00;
      display: block;
      text-align: -webkit-center;
      padding: 0pc;
      z-index: 2;
      position:relative;
  }
   
   #galleryMapCloseBox{
      background-color: #9f7d00;
      width: 50px;
      height: 25px;
      color: white;
      border-radius: 0 0 50% 50%;
      cursor: pointer;

  }
   
   #galleryCardid{
      grid-row: 4 / 2 span;
      grid-column: 1 / 2 span;
   }
   .levelimage {
      display: none;
   }
   #levelimageid{
      top: unset;
      z-index: 1;
      background-color: white;
      position: relative;
   }

   .levelimagecontrol {
      width: 100%;
   }
   #galleryid {
      display: none;
      grid-template-rows: 70px auto auto;
      grid-template-columns: 50% auto;
   }

  .galleryMap{
      background-color: unset;
      width: 100%;
      position: fixed;
      display: grid;
      grid-template-columns: 50% 50%;
      top: 69px;
  }

  .gallerybox{
   height: 90vw;
   overflow: hidden;
   object-fit: cover;
   object-position: center;
  }
  .gallet-textbox{
   overflow: auto;
   height: auto;
   max-height: 80vw;
   background-color: white;
   padding: 0px 20px 0px 20px;
  }

   .mapshow{
      display: block;
   }
.Maptext{
   top: 81vw;
}
}