@import url('https://fonts.googleapis.com/css?family=Montserrat:100,400,700');

body, html{
	height: 100%;
	margin: 0;
	padding: 0;
}

.bgimg{
	background: url(BG.jpg);
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
	color: white;
	font-family: 'Montserrat', sans-serif;
}

#dim{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: rgba(0, 0, 0, 0.50);
	transition: background 0.325s ease-in-out;
}

.top{
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
}

h2{
	font-size: 50px;
	letter-spacing: 15px;
	font-weight: 600;
	transform: translateY(0);
	opacity: 1;
    transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out, font-size 0.325s ease-in-out, letter-spacing 0.325s ease-in-out;
}

.middle{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
}

h1{
	font-size: 40px;
	letter-spacing: 30px;
	font-weight: 600;
	transform: translateY(0);
	opacity: 1;
    transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
}

#demo{
	font-weight: lighter;
	word-spacing: 20px;
	transform: translateY(0);
	opacity: 1;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

hr{
	margin: auto;
	width: 80%;
	border: 1.5px solid white;
	transition: opacity 0.5s ease-in-out, width 0.5s ease-in-out;
}

.hiddenh{
	transform: translateY(-0.25rem) !important;
	opacity: 0 !important;
}

.hiddentop{
	/* transform: translateY(-0.25rem) !important; */
	font-size: 60px;
	letter-spacing: 20px;
	opacity: 0 !important;
}

.hiddenhr{
	width: 0 !important;
	opacity: 0 !important;	
}

.hidden{
	transform: translateY(0.25rem) !important;
	opacity: 0 !important;
}

.dimmed{
	background: rgba(0, 0, 0, 1.0) !important;
}