body {background-color:#222; padding: 0px; margin: 0px;}
a, h1, h2, h3, h4, p, ul, li {font-family: arial;}
/* NAV BAR*/
nav a {
	text-decoration: none;
	text-transform: uppercase;
}
.menu-bar {
    width: 1200px;
    height: 51px;
    background: #136192;
    margin: auto;
}
nav {
	font-family: arial;
	float: right;

}
nav ul {
	background: #136192;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
nav li {
	color: #fff;
	background: #136192;
	display: block;
	float: left;
	padding: 1rem;
	position: relative;
	text-decoration: none;
	transition-duration: 0.5s;
}
nav li a {
	color: #fff;
}
nav li:hover {
	background: #83c948;
	cursor: pointer;
}
nav ul li ul {
	background: orange;
	visibility: hidden;
	opacity: 0;
	min-width: 5rem;
	position: absolute;
	transition: all 0.5s ease;
	margin-top: 1rem;
	left: 0;
	display: none;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}
nav ul li ul li {
	clear: both;
	width: 100%;
}
/*DIV 1 LOGO AREA*/
#container {width: 1200px; margin: auto; background-color:#eef3f6; top: 0px; bottom: 0;}
.logo-area img.BGbig {width: 100%;}
.logo-area img.BGsml {position: absolute; opacity: 0;}
/* DIV 2 NUMBER */
.call {padding: 0 20px; margin:0; overflow: auto;}
.left-area {width: 50%; float: left;}
.left-area h3 {color:#83c948; font-size: 3.5em; text-align:center; padding: 0 30px; margin: 0 9% 20px; /*text-decoration:underline;*/ border-bottom: #83c948 solid 3px;}
.left-area h3 img {height: 45px; width: 45px; }
.left-area h1 {color:#136192; font-size: 3em; text-align:center; padding: 0; margin: 0;}
.right-area {width: 50%; float: right;}
.right-area ul {font-size: 1.8em;}
/* DIV 3 BUTTON AREA*/
.button-area   {
	padding: 30px 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	text-align: center;}
.button-area a {vertical-align: middle; padding: 0 15px 0;}
/* DIV 4 SERVICE AREA*/
.services {background-color:#136192; padding: 10px 20px;}
.services h2, p { text-align:center; color: #fff; margin: 0;}
.services h2 {font-size: 1.8em; padding: 10px;}
.services p {font-size: 1.2em; padding: 0 0 10px;}
/* DIV 5 MODELS*/
.models {background-color: #fff;}
.models h2 {text-align:center; font-size: 1.8em; }
.models {	
	padding: 20px 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;}
.models img {vertical-align: middle;}
/* FOOTER*/
footer {background-color:#83c948; padding: 20px 20px 10px; overflow: auto;}
footer p {text-align: right; color:#fff; float: right; padding: 10% 20px 0;}
footer a {text-decoration: none; color:#000;}
/*SERVICES PAGE*/
.breaker {margin-bottom: 30px;}
.breaker img {display: block; margin:30px auto 0;}
.page_name {display: block; margin:auto;}
.page_name h1 {text-align:center; font-size:3em; color:#136192;}
.breaker p { margin: 20px 10px 0; color:#000;}
/*RESPOSIVE CALL*/
/* 1200px TO LESS*/
/*MENU AT 1200PX - LOWER*/
@media screen and (max-width: 1200px){
.menu-bar {
    width: 100%;
    height: 51px;
    background: #136192;
	position: fixed;
}
.page_name h1 {margin: 70px auto 0;}
/*DIV 1*/
#container {width: 100%;}
.logo-area {padding: 50px 0 0;}
/*DIV 2*/
.left-area h3 {font-size: 2.5em;}
.left-area h3 img {height: 30px; width: 30px; }
}
/* 903px TO LESS*/
@media screen and (max-width: 903px){
.left-area h3 {font-size: 2em;}
.left-area h3 img {height: 25px; width: 25px; }
.left-area h1 {font-size: 2.5em;}
}
/*DROPDOWN ONLY FOR SCREENS BIGGER THAN TABLETS*/
@media screen and (min-width: 900px){
nav ul li:hover > ul,
nav ul li ul:hover {
	visibility: visible;
	opacity: 1;
	display: block;}
}
/* 811px TO LESS*/
@media screen and (max-width: 811px){
.left-area h3 {margin-top: 50px;}
footer p {float: none; text-align:center; padding: 10px 0 0; margin: 0;}
footer img {display: block; margin: 0 auto 0; padding: 20px 0 0;}
}
/* 764px TO LESS*/
@media screen and (max-width: 764px){
.left-area h3 {font-size: 1.8em;}
.left-area h3 img {height: 25px; width: 25px; }
.left-area h1 {font-size: 2em;}
.right-area ul {font-size: 1.5em;}
}
/* 715px TO LESS*//*PUT MOBILE MENU HERE*/
@media screen and (max-width: 715px){
/*DIV 1*/
.logo-area {height: 220px; background-color: #222; background-image: url('ageekologo.png'); background-repeat: no-repeat; background-position: 50% 80%;}
.logo-area img.BGbig {position: absolute; top: -999px;}
/*DIV 2*/
.left-area {width: 100%; float: none; margin: 10px 0 0;}
.left-area h3 {font-size: 2.5em;}
.left-area h3 img {height: 30px; width: 30px; }
.left-area h1 {font-size: 2.5em;}
.right-area ul {font-size: 1.8em; margin: 20px auto; list-style-position: inside; text-align:center;}
.right-area {width: 100%; float: none;}
}
@media screen and (max-width: 520px){
.logo-area {height: 180px; background-position: 70% 80%;}
.logo-area img.BGsml {margin: 5% auto; width: 90%; left: 9%;}
footer img {width: 100%;}
}
@media screen and (max-width: 400px){
.left-area h3 {font-size: 1.8em;}
.left-area h3 img {height: 25px; width: 25px; }
.left-area h1 {font-size: 2em;}
.right-area ul {font-size: 1.5em;}
.logo-area {background-size: 300px auto;}
}