html {
	font-size:10px;
	color: rgb(0,0,0);
	scroll-behavior: smooth;
}
body {
	background-image:url(../img/bg_Mountain.jpg);
	background-position:center 8rem;
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-size: cover;
	overflow: hidden scroll;
}

html,body,header,main,footer,div,h1,h2,h3,span,a,input,textarea,figure,figcaption,img { margin:0; padding:0; box-sizing: border-box;}

header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:11rem;
	padding: 3rem 0 0 4rem;
	font-size: 5rem;
	background-color: white;
	text-align:center;
	font-family: 'Head','Times New Roman',Times,serif;
	background-position:1rem 1.5rem;
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-size: 7.2rem;
	z-index:1;
}
header h1 { font-size: 5rem; }
main {
	position: relative;
	margin: 14rem 2rem auto 40%;
	max-width:80rem;
	z-index:0;
}
footer {
	position: relative;
	top:6rem;
	padding: 2rem 0 3rem 0;
	font-size: 1.6rem;
	text-align: center;
	color: rgb(255,255,255);
}
footer a, footer a:hover { color: rgb(255,255,255); }


/*########## Select Time ##########*/
.selectTime {
	position: absolute;
	right: 5rem;
	top:2.5rem;
}
.selectTime > select {
	background-color: rgb(255,255,255);
	border:0;
}


/*########## ToTop ##########*/
div.totop {
	position: fixed;
	right: 2rem;
	bottom: 1rem;
	top: auto;
	left: auto;
	width: 4rem;
	height: 8.6rem;
}
div.totop a, div.totop a:hover { 
	position: relative;
	display: inline-block;
	top:0;
	right:0;
	width: 4rem;
	height: 4rem;
	text-align: center;
	color:rgb(255,255,255); 
	margin: .1rem 0;
	text-align: l;
	background-color: rgb(68, 118, 167);
	box-shadow: 1px 2px 3px rgba(0,0,0,.5);
	transition:all .3s ease;
	cursor:pointer;
}
div.totop a:nth-of-type(1) { padding: .6rem 0 0 0; border-radius: 6rem 6rem 1rem 1rem; }
div.totop a:nth-of-type(2) { padding: .7rem 0 0 0; border-radius:  1rem 1rem 6rem 6rem; }
div.totop a:nth-of-type(1)::before { content:"▲"; font-size: 3.4rem; line-height: 1; 	padding: .2rem 0 0 0; }
div.totop a:nth-of-type(2)::before { content:"▼"; font-size: 3.4rem; line-height: 1; 	padding: .7rem 0 0 0; }
div.totop a:nth-of-type(1):hover { margin: -.5rem 0 .7rem 0; }
div.totop a:nth-of-type(2):hover { margin: .6rem 0 -.5rem 0; }


/*########## Cols ##########*/
.cols {
	display: flex;
	flex-flow: row wrap;
	max-width: 120rem;
	margin:auto;
	text-align: left;
}
.cols > * { flex: 1 1 50%; padding:0 1rem; }
.cols > *:first-child { padding:0 1rem 0 0; }
.cols > *:last-child { padding:0 0 0 1rem; }


/*########## POST ##########*/
.post {
	position: relative;
	margin: 5rem 0;
	padding:2rem 3rem;
	box-shadow:-2px -2px 5px rgba(0,0,0,.5) inset, 2px 2px 5px rgba(0,0,0,.5);
	background: linear-gradient(rgba(0,0,0,0) 30%, rgba(255,0,0,.5)) rgba(255,255,255,.8);
	border: 2px solid rgb(255,255,255);
	border-radius: 10rem 0 ;
	min-height: 20rem;
}
.post > h2 { text-align:center; padding:1rem 3rem 2rem 3rem; }
.post > h3 {  margin:0 0 1rem 0; }
.date { position: absolute; top:.5rem; right:1rem;font-size: 1.6rem; }

.imggrp { margin:1rem 0 0 0; cursor:pointer; display: flex; flex-flow: row wrap; justify-content: center;}
figure { flex: 0 1 auto; padding: .25rem; text-align: center; }
figcaption { font-size:1.6rem; padding:0 2rem; line-height: 2; }
img {
	vertical-align: top;
	max-width: 100%;
	border: 3px solid rgb(255,255,255);
	border-radius: 1rem;
	box-shadow: 1px 2px 5px rgba(0,0,0,.5);
}
img[src*=".svg"] {
	width: initial;
	box-shadow: none;
	vertical-align: baseline;
	border: 0;
	border-radius: 0;
}

.norbert { 
	position: fixed;
	width:30%;
	height: initial;
	max-width: 50rem;
	margin: 0 auto 0 8%;
	border: 0;
	box-shadow: none;
}

/*### Slidehow  ########################################*/
.slideshow > *  {
	position:absolute;
	display:table;
	vertical-align: middle;
	height:100%;
	width:100%;
	overflow: visible;
	margin: 0;
}

.slideshow > * > * {
	position:relative;
	display:table-cell;
	vertical-align: middle;
	text-align: center;
	top:0;
	left:0;
	height:100%;
	width:100%;
}


/*### Lightbox  ########################################*/
#lightbox {
  position: fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: -1;
  background-color: rgba(0,0,0,.0);
  transition: all .5s ease;
}
#lightbox.on {
  z-index: 100000;
  background-color: rgba(0,0,0,.85);
}
#lightbox .slideshow {
  position: relative;
  left:2%;
  top:1%;
  width:96%;
  height:93%;
  max-height: initial;
  max-width: initial;
  margin:0;
  text-align:center;
  background-color:transparent;
  z-index:0;
}
#lightbox .slideshow > * {
	opacity:0;
	transition: .5s ease;
}
#lightbox .slideshow > *:first-child { opacity:1; }
#lightbox .slideshow > * > * { height:93vh; box-shadow: 0px 0px 25px rgba(0,0,0,.5); }
#lightbox .slideshow img { max-height:100%;  width: initial; max-width:100%;  height: initial; border-radius:1rem; }
#lightbox span {
 position: absolute;
  right:3rem;
  top:3rem;
  color:rgba(255,255,255,.6);
  font-size:3rem;
  z-index:1;
  cursor:pointer;
}
#lightbox .slideshow figcaption {
  color: rgb(255,255,200);
  font-size: 2rem;
  top: auto;
	bottom: 1rem;
}

#lightbox .lightnav {
	position: absolute;
	bottom: .5rem;
	width: 100%;
	text-align: right;
	padding: 0 1.5rem;
}

#lightbox .butClose,
#lightbox .butPrevImg,
#lightbox .butNextImg {
	width: 4rem;
	height: 4rem;
	margin: 0 .5rem;
	border:1px solid rgb(153,153,153);
	border-radius: 2rem;
	background-color: rgba(51,51,51,.7);
	background-image: url(../img/nav_img.svg);
	opacity:.6;
}
#lightbox .butPrevImg { background-position: -16rem 0;}
#lightbox .butNextImg { background-position: -20rem 0;   }
#lightbox .butClose { background-position: -32rem 0;  }


@media all and (max-width:839px) { 
	.selectTime { top: 6rem; } 
}
/*
@media all and (max-width:399px) { figure { flex: 0 1 100%; } }
*/
@media all and (max-width:799px) {
	body {
		background-position:center 6rem;
	}
	main{
		width: 94%;
		margin: 12rem 3% 0 3%;
	}
	header {
		height:9rem;
		background-size: 6rem;
		background-image:url(../img/oldman_big.png);
	}
	header > h1 { text-align:right !important; font-size: 2.4rem; padding: 0 2rem; }
	.norbert { display: none; }
	.selectTime { top: 4rem; } 
	.cols > * { flex: 1 1 100%; }
}