/*************** GLOBAL ***************/

*
{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body
{
	min-height: 100vh;
	display: -webkit-flexbox;display: -ms-flexbox;display: flex;
	-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
	-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
	background: url(/i/rail-splitter.jpg) no-repeat center/cover;
	color: #231f20;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	text-align: center;
}

a
{
	text-decoration: none;
	cursor: pointer;
}

/*************** HEADER ***************/

header
{
	max-width: 1400px;
	width: 90%;
	margin: auto;
	padding-top: 2.75rem;
	text-align: left;
}

header .contain {display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;}


header .contain .logo img 
{
	max-width: 200px;
	width: 100%;
	mix-blend-mode: darken;
}

.login-btn {padding: 14px 25px; border-radius: 5px; color: #fff; background-color: #5a9cbc; font-family: 'Open Sans', sans-serif; font-size: 12px; letter-spacing: 2.4px; line-height: 1em; text-transform: uppercase; transition: background-color .3s ease;}
.login-btn:hover {background-color: #231f20;}


/*************** FOOTER ***************/

footer
{
	max-width: 1400px;
	width: 90%;
	margin: auto;
	margin-top: 10rem;
	padding-bottom: 4.375rem;
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	text-align: left;
}

footer div:first-of-type p {margin-bottom: 0.25rem;}

footer div:first-of-type a
{
	color: #5a9cbc;
	text-decoration: underline;
}

footer div:last-of-type p
{
	color: #fffbfb;
	text-align: right;
}

/*************** INDEX ***************/

#home #container
{
	max-width: 1400px;
	width: 90%;
	margin: auto;
	margin-top: 4.688rem;
	text-align: left;
}

#home #container div
{
	max-width: 573px;
	width: 100%;
	text-align: left;
}

#home #container div h1
{
	margin-bottom: 2.5rem;
	color: #5a9cbc;
	font-size: 40px;
	font-weight: 300;
}

#home #container div p {margin-bottom: 1.5rem;}

/*************** MEDIA ***************/

@media screen and (max-width: 767px)
{
	body{background: url(/i/railsplitter-mobile-wh-bg.jpg) no-repeat center/cover;}
	footer div:last-of-type p{color: #231f20;}

    header .contain {flex-direction: column; align-items: flex-start; gap: 40px;}

}