@charset "UTF-8";

body{
	background-color: #cccccc;
}
.container{
	position: absolute;
	width: 1024px;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 1em;
}
.logo{
	background-image: url("../images/BannerWithLogo.jpg");
	width: 1024px;
	height: 123px;
}

.nav-menu {
	width: 100%;
	background-color: #B3B3B3;
	padding-top: 1em;
	padding-bottom: 1em;
	clear: left;
}
.nav-menu ul {
	margin-top: 0%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	width: 100%;
}
.nav-menu ul li {
	list-style: none;
	float: left;
	margin-right: auto;
	margin-top: 0px;
	font-family: "Source Sans Pro";
	font-weight: normal;
	color: #FFFFFF;
	letter-spacing: 1px;
	margin-left: 1em;
	text-align: center;
	transition: all 0.3s linear;
}

.nav-menu ul li:hover {
	color: #717070;
	cursor: pointer;
}

.content{
	width: 100%;
	display: flex;
	flex-direction: row;
	background-color: #e4e4e4;
}

.left-content{
	flex: 75%;
	padding: .5em;
}

.contacts{
	flex: 25%;
	padding: .5em;
}

.footer{
	background-color: cadetblue;
	text-align: center;
	padding: .5em
}

@media (max-width: 320px) {
.container{
	position: absolute;
	width: 100%;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 0;
}
.logo{
	background-image: url("../images/BannerWithLogo-320x38.jpg");
	width: 320px;
	height: 38px;
}

.nav-menu ul li {
	float: none;
	margin-top: .5em;
	margin-left: 0px;
	width: 100%;
}
.nav-menu ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;
}
.nav-menu {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 1px;
	padding-bottom: 40px;
}
.content{
	display: block;
	background-color: #e4e4e4;
}
.left-content {
	width: 100%;
	height: auto;
}
.contacts {
	width: 100%;
	height: auto;
}
}

@media (min-width: 321px) and (max-width: 768px) {
.container{
	position: absolute;
	width: 100%;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 0;
}
.logo{
	background-image: url("../images/BannerWithLogo-320x38.jpg");
	width: 320px;
	height: 38px;
}
	
.nav-menu ul li {
	float: none;
	width: 100%;
	margin-top: 1em;
}
.nav-menu ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;
}
.nav-menu {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 1px;
	padding-bottom: 40px;
}
.content{
	display: block;
	background-color: #e4e4e4;
}
.left-content {
	width: 100%;
	height: auto;
}
.contacts {
	width: 100%;
	height: auto;
}
}

@media (min-width: 769px) and (max-width: 1023px) {
.container{
	position: absolute;
	width: 768px;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 1em;
}

.logo{
	background-image: url("../images/BannerWithLogo-768x92.jpg");
	width: 768px;
	height: 92px;
}
.nav-menu {
	width: 100%;
	background-color: #B3B3B3;
	padding-top: 1em;
	padding-bottom: 1em;
	clear: left;
}
.nav-menu ul {
	margin-top: 0%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	width: 100%;
}
.nav-menu ul li {
	list-style: none;
	float: left;
	margin-right: auto;
	margin-top: 0px;
	font-family: "Source Sans Pro";
	font-weight: normal;
	color: #FFFFFF;
	letter-spacing: 1px;
	margin-left: 1em;
	text-align: center;
	transition: all 0.3s linear;
}

.content{
	display: flex;
	flex-direction: row;
	background-color: #e4e4e4;
}

.left-content{
	flex: 75%;
	padding: .5em;
}

.contacts{
	flex: 25%;
	padding: .5em;
}
}

@media (min-width: 1024px) {
}