/*
logo blue 4472C4
logo gray 595959
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }
body {font-size:18px; color:#5b5b64; line-height:1.5em; background: #fff; font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif;}
a {color:#4472C4; text-decoration:underline;}
a:hover {color:#4e5871; text-decoration:underline;}
p {margin: 10px 0;}
p:last-of-type {margin-bottom: 50px;}
ul {margin-left: 40px}
ul li {padding-bottom:6px}
.clear{clear:both;}
img.alignleft {display: inline; float: left; margin-right: 15px;}
h1 {color:#4472C4; font-size:1.7em; font-weight:500; padding: 10px 30px 0 0; line-height: 1.3em;}
h2 {color:#4472C4; font-size:1.5em; font-weight:600; margin: 50px 0 10px;}
h3 {color:#000; font-size:1.1em; font-weight:500; padding-top: 20px}
h2#top {margin-top:20px}
#page-container {background: #fff; border-top:20px solid #4472C4;}
#main-header {height:100%; padding: 30px 0;}
#logo-wrapper {display: inline-block; width:40%; vertical-align: bottom; margin-left: 10%;}
img#logo {width:100%; height:100%; max-width:703px; max-height: 150px; }
h1#tagline{font-size:1.6em; display: inline-block; width:44%; vertical-align: bottom; padding: 0 2% 39px 2%;}
.topnav {background: #595959; overflow: hidden;}
.topnav a {float:left; display:block; padding: 11px 100px 11px 0; color:#fff; font-size: 20px; font-weight: 600; text-decoration: none;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;}
.topnav a:first-child {padding-left: 10%;}
.topnav a:hover {opacity: 0.8; text-decoration: underline;}
.topnav a.current {text-decoration: underline;}
.topnav .icon {display: none;}
.fa-bars {color:#fff }
#main-content {height:auto; padding-left: 36px; background: url(../images/Zengo-Eye-Blue.png) repeat-y; }
.full-width-section {line-height:0;}
.section {margin: 0 10%; borderXX:1px solid red;}
.col-2_3 {float:left; width:64%; margin: 3% 3% 0 0;}
.col-1_3 {float:left; width:30%; margin: 3% 3% 0 0;}
.col-1_3 p:last-of-type {margin-bottom: 10px;}
.col-1_3 div:last-of-type {margin-bottom: 20px;}
img#hero, img#sidebar {width:100%}
#home-testimonial {background: #4472C4; padding: 4px 30px; margin-top:0px}
#home-testimonial p, #home-testimonial h3 {color:#fff; font-size:1em !important; line-height: 1.5em !important;}
#home-testimonial h3 {font-size:1.3em !important;}
#home-sidebar1 {background: #4472C4; padding: 7%; margin-top:20px}
#home-sidebar1 p, #home-sidebar1 ul li {color:#fff; font-size:0.9em;}
#home-sidebar1 a {color:#fff; text-decoration: underline;}
#home-sidebar2 {background: #595959; padding: 7%}
#home-sidebar2 p, #home-sidebar1 ul li {color:#fff; font-size:0.9em;}
#home-sidebar2 a {color:#fff; text-decoration: underline;}
#home-sidebar1 h3, #home-sidebar2 h3 {color:#fff; padding:0 0 20px}
#sidebar1 {background: #4472C4; padding: 10px 0; margin-top:20px; line-height: 0}
#sidebar1 p, #home-sidebar1 ul li {color:#fff; font-size:0.9em;}
#sidebar1 a {color:#fff; text-decoration: underline;}
#sidebar2, #sidebar3 {background: #595959; padding: 7%}
#sidebar2 p, #sidebar3 p, #home-sidebar1 ul li {color:#fff; font-size:0.9em;}
#sidebar2 a, #sidebar3 a {color:#fff; text-decoration: underline;}
#sidebar2 h3, #sidebar3 h3 {color:#fff; padding:0 0 20px}
#sidebar3 {background: #4472C4;}
p#testimonial {font-size: 1.1em; line-height: 1.3em; font-style: italic; font-family: "Open Sans",sans-serif; font-weight:300;}
p#client {text-align: left}
#about img {align: left;}
#footer-wrapper {background: #979797; padding:30px 10% 10px}
.footer {padding-left:38px}
.footer p {color:#1C1C1C; padding:0 0 20px 0; margin:0; line-height: 1.2em;}
.footer a {color:#1C1C1C;}
.footer a:hover {color:#fff;}
#bottom-nav {float:left; width:40%; margin-right:10%; }
#contact {float:left; width:40%; }
.creds {float:left; width:40%; margin: 20px 10% 0 0}
.creds p {font-size: 0.8em; color:#555;}
.creds p a, .creds p a:hover {color:#555555}
#bottom-nav ul {list-style: none; margin:0; padding: 0 0 0 20%;}
#bottom-nav ul li {padding: 0; margin: 0;}
#bottom-nav ul li a {display: block; padding: 12px 0; color:#fff;font-size: 1em; font-weight: 500; text-decoration: none;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;}
#bottom-nav ul li a:hover {color:#2C2C2C;}
/* Laptops and desktops (1100-1450px) */
@media only screen and ( min-width: 1250px ) and ( max-width: 1450px) { #page-container {border-leftXX: 1px dashed black;}
#main-header {padding: 25px 0;}
h1#tagline{font-size:1.5em; line-height: 1.2em; padding: 0 2% 36px 2%;}
}
@media only screen and ( min-width: 1100px ) and ( max-width: 1250px) { #page-container {border-leftXX: 1px dashed blue;}
#main-header {padding: 20px 0;}
h1#tagline{font-size:1.3em; line-height: 1.2em; padding: 0 2% 30px 2%;}
}
/* Tablets in landscape mode (981-1100px) */
@media only screen and ( min-width: 901px ) and ( max-width: 1100px ) { #page-container {border-leftXX: 1px solid green;}
#main-header {padding: 20px 0;}
h1#tagline{font-size:1.2em; line-height: 1.2em; padding: 0 2% 24px 2%;}
.topnav a {padding-right: 80px;}
.section {margin: 0 3%;}
}
/* Tablets and below */
@media all and ( max-width: 900px ) {
.topnav a:not(:first-child) {display: none;}
.topnav a {display: none;}
.topnav a.icon {float: right;display: block; padding-right: 40px;}
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {position: absolute; right: 0; top: 0;}
.topnav.responsive a {float: none; display: block; text-align: left; padding-left: 10%; padding-right: 40px; text-decoration: none;
-webkit-transition:none;
-moz-transition: none;
transition: none;}
.topnav.responsive a:hover {background-color: #ddd; color:#181818}
.topnav.responsive a.current { background-color: #4472C4;}
#main-header {height: 145px; padding: 20px 0;}
#logo-wrapper {width:60%;}
h1#tagline{font-size:1.2em; line-height: 1.2em; width:88%; padding: 0 0 0 10%}
.section {margin: 0 8%;}
.col-2_3 {width:100%; margin: 3% 3% 0 0;}
.col-1_3 {width:100%; margin: 3% 3% 5% 0;}
}
/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 700px ) and ( max-width: 900px ) { #page-container {border-leftXX: 1px solid orange;}
}
/* Smartphones All */
@media all and (max-width: 700px) { #page-container {border-leftXX: 1px solid cyan;}
#logo-wrapper {width:70%;}
.footer {font-size: 0.9em;}
#bottom-nav {width:100%; margin-right:0; }
#bottom-nav ul {padding: 0;}
#contact {width:100%; margin-bottom:10px}
.creds {width:100%; margin: 0}
.creds p {margin: 6px 0 0; padding:0}
}
/* Smartphones in portrait mode (0-479px) */
@media only screen and ( max-width: 479px ) { #page-container {border-leftXX: 1px solid magenta;}
body {font-size:16px;}
ul li {padding-bottom:3px}
#logo-wrapper {width:80%;}
}