@charset "UTF-8";

video {display: block;
margin-left: auto; margin-right: auto;}


.PrimaryNav ul li
{display: inline;
margin: 15px;
font-family: roboto;}

li.active {color: #ba122b;
text-decoration: underline;}

img.splash {display: block;
width: 70%;
margin-left: auto; margin-right: auto;}

h1{
font-family: roboto;
font-size: 28px;
text-align: center;
color: #ba122b;}

img.logo{
align-content: left;
width: 250px;
margin-left: 15px;
float: left;}

.PrimaryNav{
margin: 20px;}

.section{
background-color: ;
width: 80%;
margin-left: auto; margin-right: auto;
margin-top: 50px;
display: flex;
flex-direction: row;
font-family: sans-serif;
}

img.column{width: 500px;}

h2{
font-family: roboto;
color: #ba122b;
}

p.side{
text-align: left;
font-family: roboto;
font-size: 16px;
font-weight: 400;

display: flex;
flex-direction: column;
}

.content{
padding-left: 25px;
}

p.center{text-align: center;
font-family: roboto;
font-size: 16px;
	font-weight: 400;
width: 700px; display: block; margin-left: auto; margin-right: auto;}

img.brands{width: 600px;
margin-left: auto; margin-right: auto;
align-content: center;
display: block;}





footer{position: fixed;
bottom: 0;
width: 100%;
height: 2.5rem;
padding-left: 15px;
padding-top: 15px;
background-color: white;}


a {text-decoration: none;
color: black;}
a:hover {color: #ba122b;}



@media (max-width: 700px) {
	
img.logo{display: block;
	float: none;
	width: 300px;
	margin-left: auto; margin-right: auto;}
	
	img.brands{width: 80%}
	
	primarynav{display: block;
	margin-left: auto; margin-right: auto;}
	
.PrimaryNav ul li
	{display: block;
	text-align: center; margin-bottom: 20px;}
	
	
.section{
flex-direction: column;margin-top: 30px;
}
	
img.column{width: 400px;margin-left: auto; margin-right: auto;}
	
.content{
width: 100%;
}
	
p.center{
width: 90%; 
display: block; margin-left: auto; margin-right: auto;}

p{width: 90%;
	text-align: left;}
	
footer{text-align: center;}

}