styles.css

/* CSS TABLE OF CONTENTS
=====================================
	#BASE CSS
	#SITE-SPECIFIC CSS
===================================== */

/* BASE (Initital Setup)
=====================================
	#RESET
	#HTML5
	#BASE TYPOGRAPHY
		#BODY
		#HEADINGS
		#PARAGRAPHS
		#LINKS
		#LISTS
	#IMAGES
	#CLEARFIX
===================================== */

/* SITE SPECIFIC (Custom CSS for The Client Site)
=====================================
	#SITE-SPECIFIC GENERAL STYLING
	#SITE-SPECIFIC TYPOGRAPHY
	#LAYOUT/GRID
	#SECTIONS
	#MEDIA QUERIES
	#@FONT-FACE
===================================== */

/* RESET */
* {
  margin: 0;
  padding: 0;
}

/* HTML */
header, section, footer, aside, nav, article, figure {
  display: block;
}

/* BASE TYPOGRAPHY */

/* BODY */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%; /* 1em = 16px */
  line-height: 1.5em; /* 1.5em * 16px = 24px */
  color: #333;
}

/* HEADINGS
  Based on a Traditional Typographic Scale
  48, 36, 24, 21, 18, 16
*/
h1, h2, h3, h4, h5, h6 {
  margin-bottom: .5em;
}

h1 {
  /* 42px/50px*/
  font-family: 'ChunkFive', 'Arial Black', Helvetica, Gadget, sans-serif;
  font-weight: normal;
  font-size: 2.625em;
  line-height: 1.19em;
}

h2 {
  /* 24px/30px*/
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.19em;
  letter-spacing: -0.025em;
}

h3 {
  /* 21px/24px*/
  font-size: 1.3125em;
  line-height: 1.143em;
    letter-spacing: -0.04em;
}

h4 {
  /* 11px/14px*/
  font-size: .6875em;
  font-weight: normal;
  color: #615c5c;
  text-transform: uppercase;
  line-height: 1.27em;
}


/* LAYOUT / GRID */

.section01 .col-1 {
  width: 60%;
  float: left;
  margin: 0 1.06% 0 0;
}

.section01 .col-2 {
  width: 36.17%;
  float: right;
  margin: 0 0 0 1.06%;
}

.section02 .col-1,
.section02 .col-2,
.section02 .col-3 {
  width: 23.4%;
  float:left;
}

.section02 .col-2 {
  margin-left: 14.9%;
  margin-right: 14.9%;
}


.section02 h3 {
  margin-bottom: .1em;}


.section02 h4 {
  padding-bottom: .5em;
  border-bottom: 4px solid #000;

}



/* PARAGRAPHS */
p {
  margin-bottom: .5em; /* .5em = 8px */
}

/* LISTS */
ul, ol {
  margin-bottom: .5em;
}

ul li ul, ul li ol, ol li ol, ol li ul {
  margin: 0;
}

li {
  margin-left: 1.875em;
}

/* LINKS */
a {
  color: #39c;
  text-decoration: none;
}

a:visited, a:hover, a:focus {
  color: #069;
}

/* IMAGES */
img.scale-with-grid {
	max-width: 100%;
	height: auto;
}

a img {
	border: none;
}

/* CLEARFIX */
.row:before,
.row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}
.row {
  clear: both;
  *zoom: 1;
}

/* LAYOUT/GRID */
.container {
    width: 60em; /* 960px / 16px (base) = 60em */
	margin: 0 auto;
}


/* SITE SPECIFIC CSS */

/* #Sections (Header, Navigation, Content Sections, Footer) */

body {
	background: #333;
}

.container {
    width: 60em; /* 960px - 10px left and rigth side margins */
	position: relative; /*10px side margins */
}


header {
	background: #3279a1;
  height:155px;

}


.logo a{
  position:absolute;
  top: 55px;
  left: 12px;
  background-image:url('images/companyname-logo.png');
  width:345px;
  height:0px;
  padding-top:64px;
  overflow:hidden;
  display:block;
}


.logo {
margin:0;
}


.leahy {
  width: 349px;
  height: 0;
  padding: 75px 0 0 0;
  background: url('../images/companyname-logo.png');
  overflow: hidden;
  border: 1px solid red;
}


.tagline{
  text-indent: -9999px;
}


.main-nav {
  background: #333;
}

.button-big {
  display: block;
  background: url('images/button-big.png') no-repeat 0 0;
  width: 237px;
  height: 0;
  padding-top: 57px;
  overflow: hidden;
}

.button-big:hover {
  background: url('images/button-big.png') no-repeat 0 -58px;
}

.button-small {
  display: block;
  background: url('images/button-small.png') no-repeat 0 0;
  width: 128px;
  height: 0;
  padding-top: 30px;
  overflow: hidden;
}

.button-small:hover {
  background: url('images/button-small.png') no-repeat 0 -30px;
}


.main-nav ul{
  list-style: none;
  margin:0;
}


.main-nav li {
  margin: 0;
  float: left;
}


.main-nav a {
  display:block;
  color:#fff;
  font-family: 'Arial Black', 'Arial Bold', Helvetica, Gadget, sans-serif;
  padding: 0.8em 1.5em;
  font-size: 1em;
  line-height: 1.5em;
  text-transform: uppercase;
}


.main-nav a:hover {
  background-color: #aaa;
  color: #333;
}


.main-nav a.active {
  color:#53aee0;
  background-color:transparent;
}


.utility-nav {
  position: absolute;
  right:20px;
  top:10px;
  list-style: none;
  float: left;
}


.utility-nav li{
  float: left;
  margin: 1em;
  top: 10px
}


.utility-nav li a {
  color: #fff;
  font-size: .75em;
  text-decoration: underline;
}


.scale-with-grid {
  max-width: 100%;
  height: auto;
}


header h1, header p {
	margin: 0;
	padding: 0;
}


.mainnav {
	background: #333;
}


.mainnav ul {
	margin: 0;
}


.section01 {
	background: #ccc;
  padding-top: 2em;
  padding-bottom: 2em;
}






.section02 {
	background: #fff;
  padding-top: 2em;
  padding-bottom: 2em;
}


.section01 h2 {
  font-family: 'ChunkFive', 'Arial Black', Helvetica, Gadget, sans-serif;
  font-weight: normal;
  font-size: 2.625em;
  line-height: 1.19em;}


.section01 h2 a {
  color:#333;
  font-weight: normal;
}


.footer {
	color: #fff;
  margin: 2em;
}

.footer ul li {
  margin: 0;
  list-style: none;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1em;
  line-height:1.111em;
}

.footer ul li a {
  color: #fff;
  font-size: 1.125em;
  line-height:1.111em;
  display:block;
}

.footer ul li ul {
  border-top: 1px solid #fff;
  margin-top: .4em;
  margin-bottom: 1em;
  padding-top: .4em;
}


.footer ul li ul li {
  font-weight: normal;
  text-transform: none;
  list-style: none;
}



.footer ul li ul li a{
  font-weight: normal;
  text-transform: none;
  font-size: .6875em;
  line-height: 1.63em;
}

.footer li address {
  font-style: normal;
  font-size: .6875em;
  line-height: 1.63em;
}

.footer .col {
  width: 17.02%;
  float: left;
  margin-right: 2.12%;
}

.footer .col:last-of-type {
  width: 23.4%;
  margin: 0 0 0 19.14%;
}

.copyright {
  color: #999;
  font-size: .5625em;
  line-height: 1.777em;
  letter-spacing: .05em;
  float: right;
  margin: 5em 0;
}


/* MEDIA QUERIES */

/* Tablet (Between 768px - 992px)*/
@media all and (min-width: 48em) and (max-width: 62em) {


	body {
		font-size: 87.5%; /* 14px */
	}

	.container {
		width: 96%;
	}

  .section02 .col {
    width: 30%;
    margin-right: 5%;
  }

}

/* MOBILE */
@media only screen and (max-width: 47.9999em) {


	body {
		font-size: 75%; /* 12px */
	}

	.container {
		width: 96%;
		margin: 0 2%;
		padding: 0;
	}


.header {
  height:115px;
}

.logo {
  padding-top:1em;
}

.section01 .col-1,
.section01 .col-2,
.section02 .col-1,
.section02 .col-2,
.section02 .col-3,
.footer .col,
.footer .col:last-of-type {
  width: 96%;
  float: none;
  margin: 1em 2%;
}

.section02 .col-1,
.section02 .col-2,
.section02 .col-3 {
  margin-bottom: 3em;
}

.footer .col {
  margin-bottom: 1em;
}

  .logo a{
    position:static;
    width:250px;
    padding-top:43px;
    background-size: 250px 43px;
    margin:0 auto;
  }


.utility-nav{
  display:none;
}

.main-nav ul {
  padding: 1em 0;
}


.main-nav li {
  float: none;
}

.copyright {
  margin-left: 2%;
  float:none;
  margin: 0 2%;
}
}
/* @FONT-FACE */
@font-face {
    font-family: 'ChunkFive';
    src: url('fonts/chunk-five.eot');
    src: url('fonts/chunk-five.eot?#iefix') format('embedded-opentype'),
         url('fonts/chunk-five.woff2') format('woff2'),
         url('fonts/chunk-five.woff') format('woff'),
         url('fonts/chunk-five.ttf') format('truetype'),
         url('fonts/chunk-webfont.svg#chunkfiveregular') format('svg');
    font-weight: normal;
    font-style: normal;

}