html
{
	margin-top:0px !important;
	margin-bottom:0px !important;
	margin-left:0px !important;
	margin-right:0px !important;
/*	scroll-behavior: smooth;*/
}

:root {
  --orange: #E64300;
  --orange10: rgba(230, 67, 0, 0.1);
  --orange25: rgba(230, 67, 0, 0.25);
  --orange75: rgba(230, 67, 0, 0.75);
  --panelBG: #1D444B;
  --blue: #275E67;
  --blue25: rgba(39, 94, 103, 0.25);
  --indigo: #2A333C;
  --fontSansSerif:'Montserrat', 'Arial', sans-serif;
  --fontSerif:'Lora', 'Times New Roman', serif;
  --fontSerifTitle:'Playfair Display', 'Times New Roman', serif;
}

body
{

	margin:0px;
	padding:0px;
	font-family: var(--fontSerif);
	font-weight: 400;
	font-style: normal;
	font-size:14px;
	color:var(--indigo);
	background-color:#EEEDE3;
	/*background-image:url(../img/bg.jpg);*/
	
	webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;
	  background-repeat: no-repeat;
	  background-attachment: fixed;
	  overflow:hidden;
	
}

div, ul, input, button, textarea
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/*.hide{display:block !important;}*/
.container, 
.col-md-12, 
.col-md-11, 
.col-md-10, 
.col-md-9, 
.col-md-8, 
.col-md-7, 
.col-md-6, 
.col-md-5, 
.col-md-4, 
.col-md-3, 
.col-md-2, 
.col-md-1 {
     padding-right: 0px; 
     padding-left: 0px; 
}
b, strong, bold
{
	font-weight: 600;
	font-stretch: normal;
}
h1
{
	font-family:'Lora', 'Times New Roman', serif;
	margin-bottom:0px;
	margin-top:0px;
	font-size:32px;
	font-weight:400;
}
h2
{
	font-family:'Lora', 'Times New Roman', serif;
	margin-bottom:0px;
	margin-top:0px;
	font-size:28px;
	font-weight:400;
}
h3
{
	font-family:'Lora', 'Times New Roman', serif;
	margin-bottom:0px;
	margin-top:0px;
	font-size:32px;
	font-weight:400;
}
h5
{
	    margin-top: 20px;
    font-size: 17px;
}
h4
{
	
	
}
h6
{
	margin-top: 20px;
    font-size: 14px;
    font-weight: bold;
}

a, a:hover, a:visited
{
	color:var(--blue);
}

.en{display:none;}
::selection {
	background:  var(--blue); 
	color:#FFFFFF;
	}
::-moz-selection {
	background:  var(--blue);
	color:#FFFFFF;
}

button:focus,
.slick-slide
{outline:0;}

blockquote
{
    font-size: 14px;
    border-left: 2px solid #CCC;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
#map
{
	position:fixed;
	left:0px;
    height: calc(100vh);
    top: 0px;
    width: 100%;
}
#lines
{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:calc(100vh);
	pointer-events:none;
	z-index:1;
	
}
.flexcol
{
	display:flex;
	flex-direction: column;
}
img,
.noselect
{
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body.noScroll
{
	overflow:hidden;
}

#viewHeader
{
	font-family:var(--fontSansSerif);
	font-weight:600;
	position:fixed;
	
	pointer-events:none;
	width:100%;
	top:20px;
	display:flex;
	justify-content: center;
}
#viewHeader #menuTop
{
	display:flex;
	justify-content: center;
	align-items: center;
}
#viewHeader a
{
	text-decoration:none;
	color:var(--blue);
	pointer-events:auto;
	transition: all 0.3s ease;
}
#viewHeader .col	
{
	display:flex;
	align-items: center;
}
#viewHeader .separator
{
	margin:0px 30px;
	position:	relative;
}
#viewHeader .separator:before
{
	content:'';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
    width: 10px;
    height: 10px;
    border: 3px solid var(--orange);
    position: absolute;
    top: -8px;
    left: -6px;
}
#viewHeader .logo
{
	background-image:url(../img/logo_orange.svg);
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
	width:300px;
	height:120px;
}
.buttonRound,
.slick-arrow
{
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	width:56px;
	height:56px;
	    background-color: var(--orange75);
	color:white;
	cursor:pointer;
	
	text-decoration:none;
	display:flex;
	justify-content: center;
	align-items: center;
	font-size:20px;
	transition: all 0.3s ease; 
}
.slick-arrow
{
	color:transparent;
	top:130px;
}
.slick-prev
{
	left:20px;
	z-index:9999;
}
.slick-next
{
	right:20px;
	z-index:9999;
}
.slick-prev:before
{
	font-family: 'icomoon' !important;
	content: "\e902";
	color:white;
	opacity:1;
}
.slick-next:before
{
	font-family: 'icomoon' !important;
	content: "\e903";
	color:white;
	opacity:1;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus
{
	background:var(--orange75);
}
.slick-dots
{
	top:220px;
}
.slick-dots li button:before
{
	font-size:16px;
	color:white;
	opacity:1;
}
.slick-dots li.slick-active button:before
{
	opacity:1;
	color:var(--orange);
}
a.buttonRound:hover
{
	text-decoration:none;
	
}
.buttonRound:hover
{
	
	background-color: rgb(230 67 0 / 100%);
}
#viewStory
{
	
}
.panel
{
	position:fixed;
	width:450px;
	height:calc(100vh - 80px);
	top:40px;
	right:40px;
	color:white;
	display:flex;
	flex-direction:column;
	background-color:transparent;
	
	opacity:0;
	pointer-events:none;
	transition: all 0.5s ease;
}
.panel.slideIn
{
	opacity:1;
	pointer-events:all;
}
.panel .galleryContainer
{
	overflow:hidden;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	height:260px;
	background-color:#e4cfc1;
	transition: all 1s ease;
}
.panel .galleryContainer.noMedia
{
	height:10px;
	background-color:var(--panelBG);
}
.panel .gallery
{
	
}
.panel .gallery .item
{
	background-image:url(../img/img0.jpg);
	background-position:50% 100%;
	background-repeat:no-repeat;
	background-size:contain;	
	height:260px;
	width:450px;
}
.panel .article
{
	position:relative;
	overflow:hidden;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	background-color:var(--panelBG);
	flex-grow:1;
	
		    padding: 20px 20px 45px 20px;
	font-family:var(--fontSerif);
	display:flex;
	flex-direction:column;
	height:200px;
}
.panel .buttonClose
{
	    position: absolute;
    right: -25px;
    top: -25px;
	z-index:1;
}
.panel .buttonFullscreen
{
	position:absolute;
    left: 20px;
    top: 20px;
	z-index:1;
	    width: 45px;
    height: 45px;
    font-size: 18px;
}

.panel .article .title
{
	font-family:var(--fontSerifTitle);
	font-size:26px;
	margin-bottom:8px;
}
.panel .article .title.sm
{
	font-size:21px;
}
.panel .article .contentContainer
{
	flex-grow:1;
	overflow:hidden !important;
}
.panel .article .date
{
	font-size:12px;
	font-style:italic;
	margin-bottom:10px;
}
.panel .action
{
	display:flex;
	position:absolute;
	width:100%;
	justify-content: center;
	bottom:-28px;
}
.panel .action .item
{
	margin:0px 10px;
}

.panel .relatedItems
{
	position:absolute;
	bottom:0px;
	display:flex;
	flex-direction:column;
	align-items: flex-end;
	    left: -280px;
		width:250px;
}
.panel .relatedItems .title
{
	font-family:var(--fontSansSerif);
	font-weight:600;
	font-size:14px;
	color:var(--panelBG);
	text-align:right;
}
.panel .relatedItems .item
{
	display:flex;
	align-items: center;
	margin-top:8px;
}
.panel .relatedItems .item:hover
{
	text-decoration:none;
}
.panel .relatedItems .item .thumb
{
	background-image:url(../img/person0.jpg);
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;	
	border:1px solid var(--orange);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	min-width:56px;
	height:56px;
	position:relative;
	overflow:hidden;
}
.panel .relatedItems .item.small .thumb
{
	min-width:36px;
	height:36px;	
}
.panel .relatedItems .item.person .thumb
{
	background-position:50% 0%;
}
.panel .relatedItems .item .thumb:before
{
	content:'';
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:var(--orange25);
	 mix-blend-mode: multiply;
}
.panel .relatedItems .item .label
{
	color:var(--blue);
	font-family:var(--fontSansSerif);
	font-weight:600;
	font-size:14px;
	background-color:var(--orange10);
	padding:0px;
	white-space:pre-wrap;
	border:none;
	margin-right:8px;
	text-align:right;
}
.panel .panelType
{
	position:absolute;
	display:flex;
	justify-content: center;
    align-items: center;

width: 120px;
    height: 25px;
    
    font-size: 12px;
    top: 308px;
    left: -70px;
	
	
	
	background-color:var(--panelBG);
	color:white;
	font-family:var(--fontSansSerif);
	font-weight:600;
	
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;

	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

#viewRoute
{
	position:fixed;
	font-family:var(--fontSansSerif);
	color:var(--blue);
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
	height:calc(100vh);
	overflow:hidden;
	width:300px;
	background: linear-gradient(to right, rgba(233, 233, 233, 1) 0%, rgba(233, 233, 233, 1) 10%, rgba(233, 233, 233, 0) 100%);
}
#viewRoute .stickyBg
{
	width:100%;
	height:200px;
	position:sticky;
	top:0px;
	background-color:red;
}
#viewRoute .viewTitle
{
	font-weight:600;
	font-size:20px;
	padding-left:67px;
	cursor:pointer;
	position:sticky;
	top:0px;
	line-height:35px;
	/*background: linear-gradient(to right, rgba(233, 233, 233, 1) 0%, rgba(233, 233, 233, 1) 10%, rgba(233, 233, 233, 0) 100%);*/
}
#viewRoute .viewTitle:nth-of-type(3)
{
	top:35px;
}
#viewRoute .viewTitle:nth-of-type(5)
{
	top:70px;
}
#viewRoute .viewTitle:nth-of-type(7)
{
	top:105px;
}
#viewRoute .cont
{
	display:flex;
	transition:all 1s ease;
	max-height:0px;
	overflow:hidden;
}
#viewRoute .cont.opened
{
	max-height:1400px;
}
#viewRoute .timeline:before
{
	content:'';
	width:1px;
	border-right:1px dotted var(--orange);
	position:absolute;
	top:-8px;
	height:calc( 100% + 16px );
	left:43px;
	
}
#viewRoute .timeline
{
	position:relative;
	color:var(--orange);
	font-weight:bold;
	margin-top:10px;
	margin-bottom:10px;
}
#viewRoute .timeline .yearList,
#viewRoute .timeline .dotList
{
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	height:100%;
	font-size:12px;
	padding-right:8px;
}
#viewRoute .timeline .dotList
{
	position:absolute;
	left:44px;
}
#viewRoute .timeline .yearList .item .year
{
    top: -6px;
    position: absolute;
    right: 0px;
}

#viewRoute .timeline .yearList .item
{
	width:36px;
	text-align:right;
	position:relative;
}
#viewRoute .timeline .yearList .item:after
{
    content: '';
    width: 10px;
    height: 1px;
    position: absolute;
    border-bottom: 1px solid red;
    right: -14px;
    top: 0px;
}

#viewRoute .timeline .dotList .item
{
	position:absolute;
	width:4px;
	height:4px;
	min-height:4px;
	background-color:var(--orange);
	margin-left:-2px;
	margin-top:-2px;
	
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
#viewRoute .routeList
{
	font-weight:500;
	display:flex;
	flex-direction:column;
	padding-left:24px;
}
#viewRoute .routeList .route
{
	margin-bottom:6px;
	    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#viewRoute .routeList .route a.routeTitle
{
	font-weight:600;
	background-color:var(--orange10);
	color:var(--blue25);
	
	transition: all 0.3s ease; 
	padding:0px 4px;
	pointer-events:auto;

}
#viewRoute .routeList .route.selected .routeTitle
{
		margin-bottom:10px;
		display:inline-block;
}
#viewRoute .routeList .route .routeTitle:hover
{
	text-decoration:none;
	background-color:var(--orange25);
	color:var(--blue);
}
#viewRoute .routeList .route.selected .routeTitle,
#viewRoute .routeList .route.active .routeTitle
{
	color:var(--blue);
}

#viewRoute .routeList .route .storyList
{
	position:relative;
	transition: all 1s ease; 
	max-height:0px;
	overflow:hidden;
	display:flex;
	    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
#viewRoute .routeList .route.selected .storyList
{
	max-height:1800px;
}
#viewRoute .routeList .route .storyList:before
{
	content:'';
	position:absolute;
	width:35px;
	height:1px;
	border-bottom:1px solid var(--orange);
	top:0px;
	
	transition: all 0.3s ease; 
	opacity:0;
}
#viewRoute .routeList .route .storyList:after
{
	content:'';
	position:absolute;
	width:35px;
	height:1px;
	border-top:1px solid var(--orange);
	bottom:0px;
	transition: all 0.3s ease; 
	opacity:0;
}
#viewRoute .routeList .route.selected .storyList:before,
#viewRoute .routeList .route.selected .storyList:after
{
	opacity:1;
}
#viewRoute a
{
	background-color:var(--orange10);
	transition: all 0.3s ease; 
	border-left:1px solid var(--orange);
	font-size:13px;
	font-weight:500;
	display:flex;
	margin-bottom:6px;
	color:var(--blue25);
	padding:0px 4px;
	pointer-events:auto;
	max-width:300px;
	
	
    overflow: hidden;
    text-overflow: ellipsis;
   /* display: -webkit-box;*/
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
#viewRoute .routeList .route .storyList .story:first-child
{
	margin-top:10px;
}
#viewRoute .routeList .route .storyList .story:last-child
{
	margin-bottom:10px;
}
#viewRoute .scrollCont
{
	padding-bottom:40px;
	padding-top:40px;
	
	    min-height: calc(100vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#viewRoute a:hover
{
	text-decoration:none;
	background-color:var(--orange25);
	color:var(--blue);
}
#viewRoute a.active,
#viewRoute a.selected
{
	color:var(--blue);
}
#viewRoute .routeList .route .storyList .story .date
{
	font-weight:600;
}
#viewRoute .routeList .route .storyList .story .date:after
{
	/*content:', ';*/
}
#viewRoute .routeList .route .storyList .story .location
{
	font-weight:600;
}
#viewRoute .routeList .route .storyList .story .location:after
{
	content:', ';
}
#viewRoute .routeList .route .storyList .story .title
{
	font-weight:500;
	display:inline-block;
}
.mCSB_dragger_bar
{
	background-color:var(--orange) !important;
}
#viewStory.dim
{
	    filter: contrast(20%);
	pointer-events:none;
	
	-moz-transform: scale(0.95);
    -webkit-transform: scale(0.95); 
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    transform-origin: 100% 50%;
}
#viewStory.dim .relatedItems
{
	opacity:0;
}
#viewPerson,
#viewLocation
{
	right:60px;
}
.marker
{
	transition: opacity 0.3s ease;
	opacity:0 !important;
	pointer-events:none !important;
}
.marker.hover
{
	z-index:1;
}
.marker .popup
{
	position:absolute;
	bottom:20px;
	width:200px;
	left:-100px;
	background-color:var(--panelBG);
	color:white;
	transition: all 0.5s ease;
	pointer-events:none;
	opacity:0;
}
.marker .popup.fadeIn
{
	opacity:1;
}
.marker .popup .img
{
	height:150px;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 0%;
}
.marker .popup .title
{
	text-align:center;
	    padding: 8px 0px 6px 0px;
	font-size:14px;
	left:-100px;
}
.marker.show
{
	opacity:1 !important;
	pointer-events:auto !important;
}
.marker.location .dot:before
{
	content:'';
	position:absolute;
	width:56px;
	height:56px;
	left:-28px;
	top:-28px;
	background-image:url(../img/icon_location.svg);
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
	transition: all 0.3s ease;
	    

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
	
	    border: 1px solid transparent;
		
		
}

.marker.location .dot .label
{
    font-family: var(--fontSansSerif);
    background-color: var(--orange10);
    font-weight: 500;
    transition: all 0.3s ease;
    
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--blue25);
    padding: 0px 0px !important;
   
    max-width: 300px;
    color: var(--blue);
    width: 126px;
    position: absolute;
    text-align: right;
    white-space: normal;
    right: 35px;
    top: -20px;
	pointer-events:none;
}
body[data-view=route]>#map>.mapboxgl-canvas-container>.marker.location>.dot:before,
body[data-view=theme]>#map>.mapboxgl-canvas-container>.marker.location>.dot:before,
body[data-view=story]>#map>.mapboxgl-canvas-container>.marker.location>.dot:before,
#map.zoomOut .marker.location .dot:before
{
    background-color: #e64300;	
	    border: 1px solid white;
		
		-moz-transform: scale(0.3);
    -webkit-transform: scale(0.3);
    -o-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
}
body[data-view=route]>#map>.mapboxgl-canvas-container>.marker.location>.dot>.label,
body[data-view=theme]>#map>.mapboxgl-canvas-container>.marker.location>.dot>.label,
body[data-view=story]>#map>.mapboxgl-canvas-container>.marker.location>.dot>.label,
#map.zoomOut .marker.location .dot .label
{
	    right: 16px;
		opacity:0;
}
#map.zoomOut .marker.location:hover .dot .label
{
	opacity:1;
}
#map.zoomOut .marker.location:hover 
{
	z-index:1;
}
.marker.route .dot
{
	position:absolute;
    width: 60px;
    height: 60px;
    left: -66px;
    top: -66px;
	background-color:var(--orange);
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    justify-content: center;
    align-items: center;
}
.marker.route .dot .label
{
color: white;
    text-align: center;
    max-width: 100%;
    padding: 0px;
    font-weight: 500;
    white-space: normal;
    font-size: 10px;
    display: flex;
    height: 100%;
    align-items: center;
	line-height:12px;
	    justify-content: center;
}

.marker.route .dot:before
{
    content: '';
    width: 24px;
    height: 1px;
    border-bottom: 1px solid var(--orange);
    position: absolute;
    right: -13px;
    bottom: 9px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: 0% 0%;
	
}
.marker a.dot:hover
{
	text-decoration:none;
}
#viewMedia
{
	position:fixed;
	top:0px;
	left:0px;
	width:calc(100vw);
	height:calc(100vh);
	transition: all 0.5s ease;
	
	opacity:0;
	pointer-events:none;
}
#viewMedia.fadeIn
{
	opacity:1;
	pointer-events:all;
}
#viewMedia .bg
{
	position:fixed;
	top:0px;
	left:0px;
	width:calc(100vw);
	height:calc(100vh);
	background-color:rgba(0,0,0,0.8);
}

#viewMedia .gallery
{
	position:fixed;
	top:0px;
	left:0px;
	width:calc(100vw);
	height:calc(100vh);
}
#viewMedia .gallery .item .img
{
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
}
#viewMedia .gallery .item
{
	top:0px;
	left:0px;
	width:calc(100vw);
	height:calc(100vh);
	padding:20px;
	position:relative;
}
#viewMedia .buttonClose
{
    position: absolute;
    z-index: 1;
    right: 25px;
    top: 25px;
}
#viewMedia .slick-arrow
{
	top:auto;
	bottom:0px;
}
#viewMedia .slick-dots
{
	top:auto;
	bottom:45px;
}
.slick-arrow:before
{
	position:absolute;
	
}
.slick-arrow.slick-disabled
{
	pointer-events:none;
	opacity:0;
}

#viewMedia .content
{
    color: white;
    font-size: 15px;
    bottom: 110px;
    position: absolute;
    pointer-events: none;
    text-align: center;
        width: calc(100% - 40px);
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	padding:0px 30px;
}
#viewMedia .content .caption
{
	margin-bottom:10px;
	background-color:rgba(0,0,0,0.45);
	font-size:16px;
}
#viewMedia .content .source
{
	font-style:italic;
	background-color:rgba(0,0,0,0.45);
	font-size:12px;
}
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail
{
	background-color:white;
}
#mapOverlay
{
	position:fixed;
	left:0px;
	top:0px;
	width:calc(100vw);
	height:calc(100vh);
	background-image:url(../img/bg_overlay.jpg);
	background-position:50% 0%;
	background-repeat:no-repeat;
	background-size:cover;
	mix-blend-mode: multiply;
	pointer-events:none;
}
.buttonListen
{
	pointer-events:none;
	opacity:0;
}
.panel .action .item.dim
{
	    background-color: rgb(114 114 114 / 30%);
		pointer-events:none;
}
body[data-view=story]>#viewHeader>#menuTop>.col>a.item,
body[data-view=location]>#viewHeader>#menuTop>.col>a.item,
body[data-view=person]>#viewHeader>#menuTop>.col>a.item
{
	opacity:0.5;
}

#viewIntro
{
	position:fixed;
	left:0px;
	top:0px;
	width:calc(100vw);
	height:calc(100vh);
	background-image:url(../img/bg_overlay.jpg);
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	/*mix-blend-mode: multiply;*/

	display:flex;
	justify-content: center;
	color:var(--blue);
	text-align:center;
	padding:30px 0px;
	overflow:auto;
}
#viewIntro .col
{
	display:flex;
	flex-direction:column;
}
#viewIntro .col.center
{
	align-items: center;
	width:40%;
	padding:0px 20px;
}
#viewIntro .col.left
{
	padding-right:10px;
	text-align:right;
}
#viewIntro .col.left .caption
{
	padding-right:10px;
}
#viewIntro .col.right
{
	padding-left:10px;
	text-align:left;
}
#viewIntro .col.right .caption
{
	padding-left:10px;
}
#viewIntro .col.imageList
{
	width:25%;
}
#viewIntro .col.imageList .item
{
	display:flex;
	align-items: center;
}
#viewIntro .col.imageList .item .img
{
	background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 300px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
	
	box-shadow: 0px 24px 30px 0px rgba(230,67,0,0.55);
	-webkit-box-shadow: 0px 24px 30px 0px rgba(230,67,0,0.55);
	-moz-box-shadow: 0px 24px 30px 0px rgba(230,67,0,0.55);
	
	margin-bottom:20px;

}
#viewIntro .col.imageList .item .caption
{
	color:var(--indigo);
	font-size:12px;
	width:50%;
}
#viewIntro .logo
{
		background-image:url(../img/logo_orange.svg);
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
    width: 300px;
    height: 120px;
    margin-bottom: 20px;
}
#viewIntro .line0
{
	font-family:var(--fontSerifTitle);
	font-size:32px;
		
}
#viewIntro .line1
{
	font-family:var(--fontSerifTitle);
	font-size:32px;
	font-weight:bold;
	margin-bottom:20px;
}
#viewIntro .button
{
	border:3px solid var(--orange);
	color:var(--orange);
	width:84px;
	height:84px;
	display:flex;
	justify-content: center;
	align-items: center;
	cursor:pointer;
	font-family:var(--fontSerifTitle);
	font-size:18px;
	font-weight:bold;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	    min-width: 84px;
    min-height: 84px;
	
	
}
#viewIntro .content
{
	margin-bottom:20px;
	font-size:13px;
}
#viewIntro .separator
{
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
	height:10px;
}

#viewIntro .col.center .separator
{
	background-image:url(../img/icon_separator_intro_center.svg);
	    width: 100%;
    margin-bottom: 16px;
}

#viewIntro .col.imageList .separator
{
	background-image:url(../img/icon_separator_intro_side.svg);
}

#viewPage .page .line0
{
	font-family:var(--fontSerifTitle);
	font-size:32px;
	text-align:center;	
}

#viewPage .page .line1
{
	font-family:var(--fontSerifTitle);
	font-size:32px;
	font-weight:bold;
	margin-bottom:20px;
	text-align:center;
}
#viewPage .page .title
{
	margin-top:30px;
}
#viewPage .separator
{
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
	height:10px;
		background-image:url(../img/icon_separator_intro_center.svg);
	    width: 100%;
    margin-bottom: 16px;
}
#viewPage
{
	position:fixed;
	left:0px;
	top:0px;
	width:calc(100vw);
	height:calc(100vh);
	background-image:url(../img/bg_overlay.jpg);
	background-position:50% 0%;
	background-repeat:no-repeat;
	background-size:cover;
	/*mix-blend-mode: multiply;*/

	display:flex;
	flex-direction:column;
	
	color:var(--blue);
	text-align:justify;
	padding: 180px 10% 60px 10%;
	overflow:auto;
	transition: all 0.5s ease;
	pointer-events:none;
	opacity:0;
}
#viewPage:before
{
	content:'';
	width:calc(100vw);
	height:200px;
	/*background-image:url(../img/bg_overlay.jpg);*/
	background-position:50% 0%;
	background-repeat:no-repeat;
	background-size:cover;
	position:fixed;
	top:0px;
	left:0px;
	
	    background: linear-gradient(to bottom, rgba(233, 233, 233, 1) 50%, rgba(233, 233, 233, 0) 100%);
    z-index: 1;
}

#viewPage.fadeIn
{
	pointer-events:auto;
	opacity:1;
}
#pageAbout .content
{
	    column-count: 2;
		    column-gap: 20px;
}
#viewPage .page
{
	width:100%;
}
#pageIndex .line2
{
	font-size: 24px;
    margin: 30px 0px 10px 0px;
}
#pageIndex .content
{
	
}
#pageIndex .content .list
{
	    column-count: 2;
		    column-gap: 20px;
	
}
#pageIndex .content .list .item
{
	display:flex;
	align-items: center;
	margin-bottom:8px;
}
#pageIndex .content .list .item .thumb
{
background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--orange);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    min-width: 36px;
    min-height: 36px;
    position: relative;
    overflow: hidden;
	margin-right:10px;
}
#pageIndex .content .list .item .thumb:before
{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--orange25);
    mix-blend-mode: multiply;	
}
#pageIndex .content .list .item .label
{
    color: var(--blue);
    font-family: var(--fontSansSerif);
    font-weight: 600;
    font-size: 14px;
    background-color: var(--orange10);
    padding: 0px;
    white-space: pre-wrap;
    border: none;
    margin-right: 8px;
    text-align: left;	
}
body[data-view='page']>#viewHeader
{
	z-index:1;
}

#viewRoute .personList,
#viewRoute .locationList
{
	display:flex;
	flex-direction:column;
	align-items: flex-start;
	
}
#viewRoute .personList a
{

	
}

#viewRoute .contLocation,
#viewRoute .contPerson
{
	padding-left:68px;
		flex-direction:column;
}
#viewRoute .contTheme
{
	padding-left:0px;
}
#viewRoute .locationList .city
{
	margin-top:10px;
	margin-bottom:4px;
	font-size:16px;
}

#viewRoute .viewTitle:before
{
	content: "\e904";
	font-family:'icomoon';
	transition:all 0.5s ease;
	position:absolute;
    left: 38px;
    top: 8px;
    font-size: 12px;
	line-height:20px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#viewRoute .viewTitle.opened:before
{

-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
#viewRoute .contPerson.opened
{
	max-height:3000px;
}
#viewRoute .contLocation.opened
{
	max-height:4000px;
}
#viewRoute .mCSB_scrollTools 
{
	    left: -7px;
    right: auto;
}
#viewRoute .mCSB_container
{
	overflow:visible;
}

#qrCont
{
    position: fixed;
    bottom: 40px;
    display: flex;
    justify-content: center;
    width: calc(100vw);
    /* flex-direction: column; */
    align-items: flex-end;
    text-align: left;
    justify-content: flex-start;
    padding-left: 280px;
    pointer-events: none;

}
#qr
{
	  width:120px;
  height:120px;
  
}
#qrCont .text
{
width: 150px;
    margin-left: 10px;
    font-style: italic;
    font-weight: 500;

}