.image_div {
    margin: 0 auto;		
}

#content-overlay {
	z-index: 50;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	display: grid;
	margin: auto;
    align-items: center;    	
}

#content-shadow.shadow {
	background-color: rgba(5, 4, 4, 0.7);
}

#content-shadow.no-shadow {
	background-color: transparent;
}


#content-overlay>div {
	margin-top: 50px auto 50px;
	margin-bottom: 50px auto 50px;
}

#gallery {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(64,75,88,.9);
	z-index: 100;
	transition: all .24s;
}

#commenting {
	z-index: 100;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	display: grid;
	margin-left: auto;
	margin-right: auto; 
	margin-top: auto; 
	margin-bottom: auto;
	align-items: center;	
	background-color: rgba(255,255,255,0.9);
}


.gallery-div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:324px;
	height: 324px;
	overflow: hidden;
	margin: 24px;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.20);
	cursor: pointer;
}

.gallery-div span{
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: flex-end;
	font-size: 12px;
}

.gallery-div img{
}



a, a:focus {
	outline: none;
}

.hidden {
	display: none !important;
}

.hotspots-off {
	pointer-events: none;
}


/*NAVIGATION*/

body {    
	font-size: 14px;
	line-height: 20px;
	color: #404B58;
	margin: 0px;
  	padding: 0px;
	font-family: -apple-system, BlinkMacSystemFont,
				 "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 
				 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.containerSVG {
	display: none;
}

svg {
	width: 24px;
	height: 24px;
}

.nav {
    position: fixed;
    left: 0;
    bottom: 0;
    width: calc(100% - 24px);
    display: flex;
    justify-content: space-between;
    margin: 12px;
    user-select: none;
    pointer-events: none;
    z-index: 60;
}

.navLeft, .navRight {
    display: flex;
}

.navLeft{
    pointer-events: all;
}


.navRight{
    width: 132px;
}

.navCenter{
    display: flex;
    justify-content: center;
}

.btnMenu, .navPreviewNext, .pageName {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 36px;
	background: #fff;
	border-radius: 36px;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.20);
	align-self: center;
	opacity: .9;
}

.btnMenu, .navPreviewNext {
	margin-right: 12px;
}

.btnMenu, .btnPreview, .btnNext{
	cursor: pointer;
}

.navPreviewNext svg, .btnMenu svg, .navPreviewNext svg{
	padding: 6px; 
}

.navPreviewNext{
	overflow: hidden;
}

.navPreviewNext div{ 
	height: 36px;
}

.pageName{
	padding: 0 12px;
}

.btnMenu:hover, .btnPreview:hover, .btnNext:hover{
	background: #e6e6e6;
	transition: background .2s;
	opacity: 1;
}

.btnMenu:active, .btnPreview:active, .btnNext:active {
	background: #d2d2d2;
	transform: scale(.9);
	transition: transform .24s;
	opacity: 1;
}

.btnPreview:active, .btnNext:active{
	border-radius: 50%;
}

.nav .disabled {
	opacity: .5;
}


/*** MENU ***/

.menu {
	position: absolute;
	bottom: 48px;
	display: flex;
	flex-direction: column;
	width: 240px;
	padding: 16px 0;
	background: #fff;
	border: 1px solid rgba(73,84,96,0.06);
	box-shadow: 0 0 1px 0 rgba(0,0,0,0.10), 0 2px 8px 0 rgba(0,0,0,0.10);
	border-radius: 3px;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: all .12s;
}

.menu.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
	transition: all .12s;
}

.item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	height: 44px;
	cursor: pointer;
	background: #fff;
}

.item:hover{
    background: rgba(73,84,96,0.06);
}

.item:active{
	background: rgba(73,84,96,0.10);
	transition: background .12s;
}

.item svg {
	margin-right: 16px;
}

.item span{
	flex-grow: 1;
	text-align: start;
}

.item .tips {
	font-size: 12px;
	opacity: .54;
}

hr {
	display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid rgba(213,219,225,0.50);;
    margin: 16px 0 16px 20px;
    padding: 0;
}


area {
    cursor: hand;
}

/*** MAPS ***/

.map {
    z-index: 9;	
    position: absolute;
}
.fixedMapDiv{
	pointer-events: auto;
}

/*** FIXED PANELS ***/

.fixedPanel{
	position: fixed;
	z-index: 12;
	overflow: hidden;
	/*background: rgba(100,100,100,255);*/
	color: #f1f1f1;
	text-align: center;
	margin: 0 auto;		
	pointer-events: none; user-select: none;
}
.fixedPanelTop{
	z-index: 14;
}

.fixedPanelFloat{
	position: fixed;
	z-index: 13;
	overflow: hidden;
	/*background: rgba(100,100,100,255);*/
	color: #f1f1f1;
	text-align: center;
}


.fixed_back{
	z-index: 6;
	background: rgba(100,100,100,255);
	color: #f1f1f1;
	text-align: center;
	margin: 0 auto;	
	position: absolute;
}
/*

#fixed_left{
	position: fixed;
	z-index: 10;
	background: rgba(100,100,100,255);
	color: #f1f1f1;
	overflow: hidden;
	text-align: center;
	margin: 0 auto;		
}

#fixed_left_back{
	z-index: 5;
	background: rgba(100,100,100,255);
	color: #f1f1f1;
	text-align: center;
	margin: 0 auto;	
	position: absolute;
}
**/


/*** LOADING INDICATOR ***/
#loading{
    position:fixed;
    text-align:right;    
    right: 0px;
    bottom: 20px;
	width: 80px;
	height: 10px;
}
#loading>div{
	float: left;
	width: 6px;
	height: 6px;
	border-radius: 100%;
	margin:10px 1px 10px 1px;
	background-color: #ffffff;
	-webkit-animation:loading 1s ease-in-out infinite;
	animation:loading 1s ease-in-out infinite;
}
#loading .shaft1{
	-webkit-animation-delay:0.1s;
}
#loading .shaft2{
	-webkit-animation-delay:0.2s;
}
#loading .shaft3{
	-webkit-animation-delay:0.3s;
}
#loading .shaft4{
	-webkit-animation-delay:0.4s;
}
#loading .shaft5{
	-webkit-animation-delay:0.5s;
}
#loading .shaft6{
	-webkit-animation-delay:0.6s;
}
#loading .shaft7{
	-webkit-animation-delay:0.7s;
}

/*loading*/
@-webkit-keyframes loading{
	0%{
		-webkit-transform:translateX(-6px);
		background-color: #ffffff;
	}
	50%{
		-webkit-transform:translateX(6px);
		background-color: #2F75BB;
	}
	100%{
		-webkit-transform:translateX(-6px);
		background-color: #ffffff;

	}
}