#header{
    position:absolute;
    background:none;
	background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
}
#header *{
	color:white !important;
}

#header .loginBtn{
	background:black;
	color:white;
}
#header .loginBtn:hover{
    background:white;
    color:black !important;
}

#main{
	width:100%;
	display:block;
}

#top{
	overflow:hidden;
	flex-direction:row;
    height:60vmin;
}

#top #background{
	object-fit:cover;
}

#top #logo{
	position:absolute;
	top:25vmin;
	height:15vmin;
}

#top h1{
	position:absolute;
    color:white;
	top:20vmin;
	font-size:2vmin;
	letter-spacing: 0.5vmin;
	text-shadow: 0 0 1vmin black;
}


#topic{
	height:18vmin;
	background:white;
	display:flex;
	justify-content:center; 

}

#topic>img{
	position:relative;
	top:2vmin;
	height:6vmin;
	transition: translate 0.5s;
}

#left-dir:hover{
	translate: -1vmin;
}

#right-dir:hover{
	translate: 1vmin;
}
#topicFrame{
	overflow: hidden;
	width:66vmin;
	height:18vmin;
	top:-4vmin;
	margin:0 2vmin;
}

#topicContents{
	height:18vmin;
	width:max-content;
	display: flex;
}

#topicContents a{
	height:18vmin;
	width:32vmin;
	margin-right: 2vmin;
	overflow: hidden;
	background:black;
}

#topicContents a img{
	height:18vmin;
	width:32vmin;
	transition: scale 1s;
}

#topicContents a p{
	position:absolute;
	bottom: 0;
	right: 0;
	opacity:0;
	transition: opacity 1s;
	font-size:1.5vmin;
	margin:1vmin;
    color:white;
}

#topicContents a:hover img{
	scale:1.2;
	opacity:0.5;
}

#topicContents a:hover p{
	opacity:1;
}

@keyframes frameOut {
	0%{
		margin-left: 0;
	}
	
	100%{
		margin-left: -34vmin;
	}
}




#aboutBPA{
	height:fit-content;
	margin-bottom:5vmin;
}
#topic ~ div p{
	text-align:center;
	margin:1vmin 0 ;
	font-size:2vmin;
}
#top ~ div h1{
	text-align:center;
	font-size:3.5vmin;
}
#main h2{
	text-align:center;
	font-size:3vmin;
}

#main .btn{
	display: block;
	width:fit-content;
}

#main{
	height:fit-content;
	margin-bottom:5vmin;
}


@keyframes scroll {
	0%{
	}
	
	100%{
		background-position-x: -200vmin;
	}
}

#steps{
	height:50vmin;
	width:80%;
	max-width: 120vmin;
	margin:5vmin auto;
	background:gray;
	background-image: url("../images/steps-back.png");
	background-size:200vmin 50vmin;
	background-repeat: repeat-x;
	
	animation: scroll 120s infinite linear;

	display: grid;
	grid-template-columns: 40vmin auto;

	color:white;
	text-shadow: 0 0 1vmin rgba(0,0,0,0.5);
}

#steps img{
	height:30vmin;
	margin:5vmin;
	margin-bottom: 0;
}
#steps a{
	display: block;
	margin:5vmin auto;
	line-height:5vmin;
	width:fit-content;
	color:white;
	font-size:3vmin;
}
#steps a:after{
	content: "";
	position: absolute;
	background:white;
	width:0;
	height: 0.5vmin;
	right:0;
	left:0;
	margin:0 auto;
	bottom:0;
	transition: width 0.5s;
}
#steps a:hover:after{
	width:100%;
}
#steps div+div{
	padding-top: 10vmin;
	background-image: linear-gradient(to right ,rgb(0 0 0/0),rgb(0 0 0/0.5));
}

#community>div{
	height:20vmin;
	width:fit-content;
	margin:0 auto;
	display: grid;
	grid-template-columns: 20vmin 60vmin;
	padding:5vmin;
	padding-bottom: 0;
}

#community div img {
	height:20vmin;
	border-radius: 5vmin;
}