* {
	box-sizing: border-box;
}

body, html {
	margin:0;
	padding:0;
	font-family: 'Open Sans Condensed', sans-serif;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#fadeBox::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
#fadeBox {
  -ms-overflow-style: none;
}

#nav {
	opacity:0;
	animation: fadein 2s 1 3s forwards;
}

.section {
	height:100%;
	width:100%;
	overflow:hidden;
}

#fadeBox {
	overflow:scroll;
	height:80%;
	text-align:center;
	opacity:0;
	position:absolute;
	top:8%;
	right:8%;
	font-size:7vw;
	animation: fadein 2s 1 3s forwards;
}

#fadeBox span {
	font-size:3vw;
}

.painting {
	object-fit: cover;
	opacity:0;
	width:100vw;
	height:100vh;
	overflow:hidden;
    animation: fadein 2s 1 0.5s forwards; 
}

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

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

.topNavBar {
    z-index:10;
    background-color: #333;
    overflow: hidden;
    position:fixed;
    bottom:0;
    width:100%;
}

.topNavBar a {
	cursor: default;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 2% 3%;
    text-decoration: none;
    font-size: 17px;
}

.topNavBar a:hover {
    background-color: #ddd;
    color: black;
}

.topNavBar a.active {
    background-color: #4CAF50;
    color: white;
}

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

	.topNavBar a {
		width:100%;
	    padding: 4%;
	    text-decoration: none;
	    font-size: 5vw;
	}

	.painting {
		object-position:40%;
	}

	#fadeBox {
		height:50%;
	}
}