html {
	padding: 0px;
	margin: 0px;
	
	font-size: 1em;
    line-height: 1.4;
	font-family: 'Inter', sans-serif;
}
body {
padding: 0px;
margin: 0px;
position: relative;
background-color: white;
}

#showme {
	width: 100vw;
	height: 100vh;
	z-index: 2;
}
#preloaded {
	background-color: white;
	position: fixed;
	width: 100vw;
	height: 100vh;
	transition:1s ease;
	z-index: 3;
}
#preloaded img {
	max-height: 150px;
/*	margin-top: 40vh;*/
/*	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;*/
	animation-duration: 1s;
	margin: 0 auto;
	margin-top: 40vh;
	
	display:flex;
    justify-content:center;
	
	/*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
}
.fadein {
	opacity: 1;
	animation-name: fadeInOpacity;

	animation-delay: 2s;

	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 3s;
}
@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.fadeInBottom {animation-name: fadeInBottom;}
@keyframes fadeInBottom {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1 }
}

.wrapper {
	margin: 0 auto;
	position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	width: 66.66%;
	height: 66.66%;
	
	/*border: 1px solid #d6d6d6;*/
}

.sidebar {
	width: calc(100% / 3);
	height: 100%;
	position: fixed;
	z-index: 1;
}

.sidebarcontent {
	width: calc(100% - 80px);
	padding: 40px;
}
.sidebarfooter {
	width: calc(100% - 80px);
	padding: 40px;
	padding-top: 0px;
	padding-bottom: 20px;
	
	position: absolute;
	bottom: 0;
}
.sidebarfooter p {
	margin: 0;
	padding: 0;
	
	font-family: 'Inter', sans-serif;
	font-size: 1em;
	font-weight: 200;
}

.sidebarfooter p {
	margin: 0;
	padding: 0;
	
	font-family: 'Inter', sans-serif;
	font-size: 1em;
	font-weight: 200;
	margin-left: -2px;
}
.sidebarfooter p a {
	text-decoration: none;
	color: #c1c1c1;
	
	-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.sidebarfooter p a:hover {
		color: black;
	}
.sidebarfooter span {
	font-weight: 400;
	margin-left: 20px;
	margin-right: 20px;
		color: #c1c1c1;

}


.logo {
	max-width: 60px;
	padding-bottom: 40px;
}

h1 {
	font-size: 3em;
    line-height: normal;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	padding: 0px;
	margin: 0px;
	
	margin-left: -4px;
}

h3 {
	font-size: 1.8em;
    line-height: normal;
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	padding: 0px;
	margin: 0px;
	
	margin-left: -2px;
	
}

.content {
	width: auto;
	height: 100%;
	margin-left: calc(100% / 3);
	overflow: scroll;
}

.fullimage {
	width: 100%;
	padding-bottom: 20px;
	display: block;
}

.content img:last-child {
	padding-bottom: 0px;
}

.contentsidebar {
	display: none;
}

/*If the browser window is 1200px or smaller*/
@media only screen and (max-width: 1200px) {

.wrapper {
	width: 80%;
	height: 80%;
}

h1 {
	font-size: 2.5em;
}

h3 {
	font-size: 1.5em;
}

}



/*If the browser window is 834px or smaller*/
@media only screen and (max-width: 834px) {

	.wrapper {
		width: 100vw;
		height: 100vh;
		
		border: none;
	}
	
	.sidebar {
		display: none;
	}
	
	.contentsidebar {
		display: block;
		width: calc(100% - 80px);
		height: auto;
		padding: 20px 40px;
		position: -webkit-sticky; /* Safari */  
position: sticky;
top: 0;
background-color: white;
	}
	
	.contentsidebar h1 {
		font-size: 28px;
	}
	
	.contentsidebar h3 {
		font-size: 22px;
	}
	
	.contentsidebar p {
		padding: 0px;
		margin: 20px 0px 0px;
		color: #c1c1c1;
	}
	
	.contentsidebar p a {
	text-decoration: none;
	color: #c1c1c1;
	
	-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
	}
	.contentsidebar p a:hover {
		color: black;
	}
	
	.contentsidebar span {
		font-weight: 400;
		margin-left: 20px;
		margin-right: 20px;
	}
	
	
	h1 {
		font-size: 2vh;
	}
	h3 {
		font-size: 1vh;
	}
	
	.content {
		width: 100%;
		margin: 0;
/*		margin-top: calc(33% + 100px);*/

	}
	
	.logo {
		display: none;
	}

}
	
	
	
/* @media only screen and (min-width: 834px) and (orientation: landscape) {
	.wrapper {
		width: 100vw;
		height: 100vh;
	}
} */