/*   
Theme Name: Mid Atlantic Packaging Theme
Theme URI: http://www.mid-atlanticpkg.com
Author: William Pyle / Lolio GD
Author URI: http://www.loliogd.com/
Description: Custom Wordpress theme for Mid Atlantic Packaging.
Version: 1.0
Text Domain: midatlanticpackaging
*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html {
	height:100%;
}

body {
	background-color:#fff;
    height:100%;
    color: #002855;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

.screen-reader-text {
	position: absolute; 
	left: -9999px; 
	top: -9999px; 
}

* html .group, 
*:first-child+html .group {
	zoom: 1;
}

/* ==========================================
 MISC
========================================== */
.show-screen {
	display:block;
}
.hide-screen {
	display:none;
}
a.post-edit-link {
	color:#212121;
	position:absolute;
	top:1px;
	right:0;
	font-size:12px;
	text-decoration:none;
	padding-top:5px;
}
a.post-edit-link:hover {
	text-decoration:underline;
}
::selection {
    background: #00a598;
    color:#fff;
}
::-moz-selection {
    background: #00a598;
    color:#fff;
}

a img {
    border:none;
}

/* ==========================================
 PAGE CONTAINERS
========================================== */
#page { }

.inner-width { width:1300px; }

.below-slider {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#012956+0,ffffff+100 */
    background: rgb(1,41,86); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAxMjk1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  rgb(1,41,86) 0%, rgb(255,255,255) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(1,41,86)), color-stop(100%,rgb(255,255,255))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgb(1,41,86) 0%,rgb(255,255,255) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgb(1,41,86) 0%,rgb(255,255,255) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgb(1,41,86) 0%,rgb(255,255,255) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgb(1,41,86) 0%,rgb(255,255,255) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012956', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
    height:5px;
}

.side-menu {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e6e6e7+100 */
    background: rgb(255,255,255); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  rgb(255,255,255) 0%, rgb(230,230,231) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(230,230,231))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgb(255,255,255) 0%,rgb(230,230,231) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgb(255,255,255) 0%,rgb(230,230,231) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgb(255,255,255) 0%,rgb(230,230,231) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgb(255,255,255) 0%,rgb(230,230,231) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e7',GradientType=1 ); /* IE6-8 */
}

.acf-map {
	width: 100%;
	height: 250px;
	border: #ccc solid 1px;
}

.blue-green-bg {
    background-color:#00a598;
}

.apply-now {
    top:-12px;
    left:25px;
}

/* ==========================================
 MODAL NAVIGATION CONTAINER
========================================== */
.modalMobile {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
    max-height: 100%;
    height:100%;
    /*top:100px;*/
}

.modalMobile:target {
	opacity:1;
	pointer-events: auto;
}

.modalMobile > div {
	position: relative;
}

.modalMobile p {
    line-height:18px;
    padding-bottom:15px;
}

.closeMobile {
}

.close:hover { }

#mobile-nav, .social-mobile li {
    list-style-type:none;
}

#mobile-nav li {
    padding-bottom:10px;
    font-weight:700;
}

.sub-menu {
    display:none;
}

#mobile-nav li .sub-menu li {
    font-weight:normal;
    padding-bottom:10px;
    padding-left:25px;
}

#mobile-nav li .sub-menu li:first-child {
    padding-top:10px;
}

#mobile-nav li .sub-menu li:last-child {
    padding-bottom:0px;
}

.services-mobile, .packaging-mobile, .about-mobile, .sustain-mobile {
    background-image: url("images/mobile_menu_arrow.png");
    background-position: 115px 6px;
    background-repeat: no-repeat;
}

.mobile-border {
    border-top: 2px solid #c0d5a0;
}

/* ==========================================
 MODAL CONTAINER
========================================== */
.modalDialog {
	position: fixed;
	top: 100px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
    max-height: 100%;
    overflow-y: scroll;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 100%;
	position: relative;
	padding: 5px 20px 13px 20px;
	background: #226193;
}

.modalDialog p {
    line-height:18px;
}

.close {
	color: #FFF !important;
	text-align: right;
    z-index:99;
    position:fixed;
    right:25px;
}

.close:hover { }

.directory li {
    list-style-type:none;
    padding-bottom:25px;
    margin-bottom:25px;
    border-bottom:2px solid #91b0c9;
}

/* ==========================================
 DISPLAY CASES
========================================== */
.display-cases {
    border:1px solid #00a598;
    /*background-color: #00a598;*/
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

.display-cases:hover {
    border:1px solid #00a598;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}

.display-cases .display-content {
    display:none;
}

.display-cases:hover .display-content {
    display:block;
    width:100%;
    height:100%;
    padding-top:30%;
}

.display-content:hover {
    background-color: rgba(0, 86, 149, 1);
    -o-transition: background-color .25s ease-out;
	-ms-transition: background-color .25s ease-out;
	-moz-transition: background-color .25s ease-out;
	-webkit-transition: background-color .25s ease-out;
	transition: background-color .25s ease-out;
}

.display-content p {
    color:#fff;
    font-size:13px;
    line-height:18px;
}

.display-title {
    background-image: url("images/display_arrow.png");
    background-position:98% 80%;
    background-repeat:no-repeat;
    background-color:#00a598;
}

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
	/*width: 320px;*/
	height: auto;
    margin-bottom:-1px;
}

/* flip speed goes here */
.flipper {
    position: relative;
    transform: perspective(1000px);
    transform-style: preserve-3d;
    transition: all 0.6s ease 0s;
}

/* hide back of pane during swap */
.fron, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
    z-index:3;
    background-color: rgba(0, 86, 149, 1);
    height:100%;
    color:#fff;
    padding-top:30%;
    text-align:center;
    padding:30% 20px 0 20px;
}

.back p, .case-study-content p, .card-back p, .card__back p {
    font-size:13px;
    line-height:18px;
}

.display-img {
    width:100%;
}

.card {
    position: relative;
    text-align: center;
    min-height:200px;
}


.card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding:30% 20px 0 20px;
}

.card-front,
.card-back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card-back {
  background-color: rgba(0, 86, 149, 1);
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card:hover .card-front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card:hover .card-back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.card__back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding:30% 20px 0 20px;
}

.card__front,
.card__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card__back {
  background-color: rgba(0, 86, 149, 1);
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect-click.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect-click.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

/* ==========================================
 BORDERS
========================================== */
.border-bottom {
	border-bottom:1px solid #000;
}

/* ==========================================
 NAVIGATION
========================================== */
#nav {
}

/* ==========================================
 HEADER
========================================== */
.logo {
    width:100%;
    max-width:400px;
}

.mobile-logo {
    width:100%;
    max-width:190px;
}

.green-bg {
    background-color:#7aa829;
}

.green-bg a {
    color:#fff !important;
}

.social-bg {
    background-color:#236192;
}

#Navigation li {
    display:inline-block;
}

#Navigation li a {
    text-transform:lowercase;
    font-size:18px;
    font-weight:700;
    color: #002855;
}

#Navigation li a:hover {
    color:#00a598;
    text-decoration: none;
}

/* ==========================================
 FONTS
========================================== */


/* ==========================================
 TEXT
========================================== */
p { 
    line-height:28px;
}

h2 {font-weight:normal;}
h3 {font-weight:normal;}

#home-page p {
    padding:0 25px 20px 25px;
    color: #236192;
}

#home-page p strong {
    color: #002855;
}

#page-content h1, .page-heading {
    color: #00a598;
    font-size: 50px;
    font-weight: bold;
    letter-spacing: -1px;
    padding-top: 10px;
    text-transform:lowercase;
}

#page-content p {
    line-height:25px;
    padding-bottom:25px;
    font-size:14px;
    color: #236192;
}

#page-content strong {
    font-size:16px;
    color:#002855;
}

#page-content h3 {
    color: #7aa829;
    font-size: 14px;
    font-weight: bold;
    text-transform:uppercase;
    padding-bottom:5px;
}

/* ==========================================
 IMAGES
========================================== */
.alignleft {
    float: left;
    margin: 0 1em 1em 0;
}

.alignright {
    float: right;
    margin: 0 0 1em 1em;
}

#home-page img {
    margin-right:50px;
}

#home-bottom img {
    width:100%;
    max-width:400px;
}

.gallery, .blog-gallery {
    list-style-type:none;
}

.gallery li {
    display:inline-block;
    border: 1px solid #236192;
    margin-right:5px;
    margin-bottom:5px;
    height:125px;
    overflow:hidden;
    width:18%;
}

.blog-gallery li {
    height:125px;
    overflow:hidden;
    width:18%;
    display:inline-block;
    margin-right:5px;
    margin-bottom:5px;
    padding-bottom:0px !important;
}

.blog-gallery li:last-child {
    padding-bottom:25px !important;
}

.social-icon {
    width:100%;
    max-width:50px;
}

.entry img {
    max-width:100%;
    width:auto;
    height:auto;
}

.header-icon {
    width:35px;
    height:auto;
    vertical-align:middle;
}

/* ==========================================
 LINKS
========================================== */
.textHolder a {
    color:#09a89c !important;
    text-decoration:underline !important;
}

.blog-cat a {
    color:#009999 !important;
}

.blog-title a, #body-copy a {
    color:#7aa829 !important;
}

.directory-content a {
    color:#fff !important;
}

/* ==========================================
 SIDEBAR AND WIDGETS
========================================== */
#sidebar {
	
}

.widget-area ul {
    list-style-type:none;
}

.widget-area ul li {
    padding-bottom:5px;
    text-transform:lowercase;
}

.widget-area ul li:first-child {
    display:none;
}

.widget-area .current-menu-item a, .categories .current-menu-item a {
    color:#7aa829;
}

.side-images li {
    list-style-type:none;
    padding-bottom:15px;
}

.side-images li:last-child {
    padding-bottom:0px;
}

/* ==========================================
 SLIDERS
========================================== */
.bxslider li:nth-child(2) h1 {
    color:#990000 !important;
}

.bxslider li:nth-child(3) h1 {
    color:#9ccd18 !important;
}

.bxslider li:nth-child(4) h1 {
    color:#13b4ff !important;
}

.bxslider li:nth-child(5) h1 {
    color:#ff9900 !important;
}

.bxslider li:nth-child(6) h1 {
    color:#cec702 !important;
}

.bxslider li:nth-child(7) h1 {
    color:#d81010 !important;
}

.bxslider li:nth-child(8) h1 {
    color:#fd5401 !important;
}

.bxslider li:nth-child(9) h1 {
    color:#10b510 !important;
}

.bxslider li:nth-child(10) h1 {
    color:#009999 !important;
}

.bxslider li:nth-child(11) h1 {
    color:#ffce00 !important;
}

.bxslider li:nth-child(6) p, .bxslider li:nth-child(7) p, .bxslider li:nth-child(8) p, .bxslider li:nth-child(11) p {
    color:#fff !important;
}

.swipe {
    background-color:#86d0c9;
    color:#00a094;
    letter-spacing:2px;
    line-height:1;
}

.swipe img {
    height:25px;
    width:auto;
    vertical-align: middle;
}

/* ==========================================
 LISTS
========================================== */
#body-copy ul {
    padding-bottom:20px;
    margin-left:20px;
    font-size:14px;
    color:#236192;
}

#body-copy ul > li {
    padding-bottom:10px;
}

.header-right li {
    list-style-type:none;
}

.bottom-images li {
    display:inline-block;
    list-style-type:none;
}

.case-study-content ul {
    padding-left:10px;
}

.case-study-content li {
    padding-bottom:20px;
}

.blog-post li {
    list-style-type:none;
    border-bottom:1px solid #d0d0d1;
    padding-bottom:25px;
    margin-bottom:15px;
}

.blog-post li:last-child {
    border-bottom:none;
}

.categories li {
    list-style-type:none;
    padding-bottom:5px;
}

.categories li:last-child {
    padding-bottom:0;
}

.job-listings li {
    list-style-type:disc;
    color:#fff;
    display:list-item;
}

.job-listings li a {
    color:#fff;
    text-decoration: underline;
}

.job-listings p {
    padding-bottom:0 !important;
}

#home-page ul {
    padding:0 0 20px 65px;
    margin-top:-20px;
    color: #236192;
}

#home-page ul:last-child {
    padding:0 0 0 65px;
    margin-top:-20px;
}

/* ==========================================
 MASONRY
========================================== */
/* ---- isotope ---- */

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
    float: left;
    /*padding:0 5px 5px 0;*/
}

.grid-item img {
  display: block;
  max-width: 100%;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* ==========================================
 CASE STUDY CARDS
========================================== */
.card {
    overflow: hidden;
}

.case-study-content {
    bottom: -150px;
    transition: all 0.5s ease;
    min-height:275px;
}

.card:hover .case-study-content {
    bottom: 0;
}

.icons {
    display:inline-block !important;
}

/* ==========================================
 MENUS
========================================== */
.menu-item li {
	list-style-type:none;
	padding:0 40px;
	position:relative;
}

.menu-item li:first-child {
	padding-left:0px;
}

.menu-item li:last-child {
	padding-right:0;
}

.menu-item li a:hover {
	color:#f2890e;
}

.sub-menu-item li {
	list-style-type:none;
	padding:0 12px 0 10px;
	border-right: 1px #cccccc solid;
	text-transform:uppercase;
}

.sub-menu-item li:first-child {

}

.sub-menu-item li:last-child {
	padding-left:10px;
	padding-right:0px;
	border-right:none;
}

.sub-menu-item li a {
	color:#666;
	text-decoration:none;
}

.sub-menu-item li a:hover {
	color:#303030;
}

#cssmenu ul ul {
	display: none;
}

#cssmenu ul > li {
    width:130px;
}

#cssmenu ul > li.has-sub > a span {
	background: url("images/mobile_menu_arrow.png") 96% center no-repeat;
    display:block;
    width:130px;
}
#cssmenu ul > li.has-sub.active > a span {
	background: url("images/mobile_menu_minus.png") 96% center no-repeat;
    display:block;
    width:130px;
}

/* ==========================================
 MOBILE MENU
========================================== */
#menu-mobile-main-menu .sub-menu { 
    display: none;
    list-style: none;
}

#menu-mobile-main-menu .sub-menu li {
	padding: 10px 0 10px 15px;
	width:100%;
	margin-bottom:0px;
}

#menu-mobile-main-menu .sub-menu li a {
	color:#e4e4e4;
}

#menu-mobile-main-menu .sub-menu li:last-child {
	padding: 10px 0 0 15px;
}

#m-nav-toggle {
    background-image: url("/images/nav_icon.png");
    cursor: pointer;
    height: 27px;
}
#m-nav-wrap {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#226092+0,3a80b6+91,1d397a+100 */
    background: rgb(34,96,146); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyNjA5MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkxJSIgc3RvcC1jb2xvcj0iIzNhODBiNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZDM5N2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  rgb(34,96,146) 0%, rgb(58,128,182) 91%, rgb(29,57,122) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(34,96,146)), color-stop(91%,rgb(58,128,182)), color-stop(100%,rgb(29,57,122))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgb(34,96,146) 0%,rgb(58,128,182) 91%,rgb(29,57,122) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgb(34,96,146) 0%,rgb(58,128,182) 91%,rgb(29,57,122) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgb(34,96,146) 0%,rgb(58,128,182) 91%,rgb(29,57,122) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgb(34,96,146) 0%,rgb(58,128,182) 91%,rgb(29,57,122) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#226092', endColorstr='#1d397a',GradientType=1 ); /* IE6-8 */
    height: 100%;
    left: -70%;
    position: absolute;
    width: 70%;
    z-index: 999;
}

.mobile-menu {
    list-style-type: none;
    padding-top:10px;
}

.mobile-menu li {
	text-transform: lowercase;
	font-size:18px;
	padding-left:20px;
    font-weight:700;
}

.mobile-menu li a {
	width:100%;
	display: block;
	padding-bottom: 5px;
	padding-top:5px;
}

.mobile-menu li a:hover {
	text-decoration:none;
    color:#e2e2e2;
}

.mobile-menu li:hover {
    background-image: url("images/mobile-menu-hover.png");
    background-repeat: repeat-x;
	background-position: bottom center;
}

.mobile-menu li a {
    color: #fff;
}

.hide-mobile {display:none !important;}

#m-nav-wrap a {
    color:#fff;
}

/* ==========================================
 BUTTONS
========================================== */


/* ==========================================
 FOOTER
========================================== */
.blue-gradient {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#236192+0,6994b5+66,b1c7d8+100 */
    background: rgb(35,97,146); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIzNjE5MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzY5OTRiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiMWM3ZDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgb(35,97,146) 0%, rgb(105,148,181) 66%, rgb(177,199,216) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(35,97,146)), color-stop(66%,rgb(105,148,181)), color-stop(100%,rgb(177,199,216))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgb(35,97,146) 0%,rgb(105,148,181) 66%,rgb(177,199,216) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgb(35,97,146) 0%,rgb(105,148,181) 66%,rgb(177,199,216) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgb(35,97,146) 0%,rgb(105,148,181) 66%,rgb(177,199,216) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgb(35,97,146) 0%,rgb(105,148,181) 66%,rgb(177,199,216) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#236192', endColorstr='#b1c7d8',GradientType=0 ); /* IE6-8 */
}

.navy-bg {
    background-color:#002855;
}

#footer a {
    color:#fff;
}

#footer a:hover {
    color:#fff;
}

.footer-menus .current-menu-item a {
    text-decoration:underline;
}

.blue-gradient ul {
    list-style-type:none;
}

.blue-gradient ul li a {
    color:#fff;
}

.blue-gradient ul li:first-child {
    text-transform:uppercase;
}

.blue-gradient ul li {
    padding-bottom:5px;
}

/* ==========================================
 INPUTS
========================================== */
#name {
	padding:5px;
	width:100%;
	border: 1px solid #000;
	color: #000;
	letter-spacing:1.25px;
}

#message {
	width:100%;
	border: 1px solid #000;
	color: #000;
	letter-spacing:1.25px;
	padding:5px;
	resize:none;
}

#s {
    width:100%;
    padding:8px;
    color:#236192;
    text-transform:uppercase;
    font-weight:700;
    font-size:14px;
    border:1px solid #236192;
}

#submit {
	border: 1px solid #000;
	background-color: #fff;
	text-transform:uppercase;
	letter-spacing:1.25px;
	font-size:16px;
	color:#000;
}

/* ==========================================
 ORIGINAL CSS
========================================== */
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2 {
	font-weight:normal;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #236192;
	text-decoration: none;
}
a:visited {
	color: #236192;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: underline;
}
a.close:link {
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	letter-spacing:0px;
	color: #002855;
	text-decoration: none;
}
a.close:visited {
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	letter-spacing:0px;
	color: #002855;
	text-decoration: none;
}
a.close:hover, a.close:active, a.close:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	letter-spacing:0px;
	color:#002855;
	text-decoration: none;
}
a.topNav:link {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0px;
	color: #002855;
	text-decoration: none;
}
a.topNav:visited {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0px;
	color: #002855;
	text-decoration: none;
}
a.topNav:hover, a.topNav:active, a.topNav:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0px;
	color:#00A598;
	text-decoration: none;
}
.currentPage {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0px;
	color:#00A598;
	text-decoration: none;
}
a.bottomNav:link {
	color: #fff;
	text-decoration: none;
}
a.bottomNav:visited {
	color: #fff;
	text-decoration: none;
}
a.bottomNav:hover, a.bottomNav:active, a.bottomNav:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color:#fff;
	text-decoration: underline;
}
a.subNavLink:link {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	line-height:26px;
	color: #236192;
	text-decoration: none;
}
a.subNavLink:visited {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	line-height:26px;
	color: #236192;
	text-decoration: none;
}
a.subNavLink:hover, a.subNavLink:active, a.subNavLink:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	line-height:26px;
	color:#7aa829;
	text-decoration: none;	
}
/* ~~this fixed width container surrounds the other divs~~ */
.container {
	width: 1024px;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

.headerImageText{
	position:absolute;
	top:394px;
	left:8px;
	z-index:5;
	font-family:Arial, Helvetica, sans-serif;
	padding-top: 10px;
	overflow: visible;
	width: 346px;
}
.headerImageText h1{
	font-weight:bold;
	letter-spacing:-1px;
	font-size:50px;
	line-height:50px;
	color:#00A598;
	font-family:Arial, Helvetica, sans-serif;
	padding-top: 10px;
}
.headerCaseText h1{
	font-weight:bold;
	letter-spacing:-1px;
	font-size:50px;
	line-height:50px;
	color:#00A598;
	padding-bottom:10px;
	
}
.headerImageTextLL{
	position:absolute;
	top:526px;
	left:8px;
	z-index:5;
	font-family:Arial, Helvetica, sans-serif;
	padding-top: 10px;
	overflow: visible;
	width: 318px;
}
.headerImageTextLL h1{
	font-weight:bold;
	letter-spacing:-1px;
	font-size:50px;
	line-height:50px;
	color:#00A598;
}
.news {
	position:absolute;
	width:269px;
	top:18px;
	right:41px;
	color:#002855;
	font-size: 11px;
	line-height:14px;
}
.news h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	letter-spacing:-1px;
	color:white;
	padding-bottom:20px;
}
.news p{
	color:#236192;
	font-size:16px;
}
.nav{
	margin-top:5px;
	text-align:center;
}
.showHolder{
	position:relative;
	margin-bottom: 50px;
	overflow:visible;
	font-weight:normal;
}
.caseHolder{
	position:absolute;
	overflow:visible;
	width:890px;
	padding:12px 18px 18px 18px;
	border:1px solid #7f93aa;
	top:30px;
	left: 50%;
  	margin-left: -463px;
	z-index:10000;
	background-color:white;
}
.caseHolderText{
	position:relative;
	overflow:visible;
	width:790px;
	padding:42px 0px 2px 50px;
	font-weight:bold;

}
.caseImageText h1{
	font-weight:bold;
	letter-spacing:-1px;
	font-size:50px;
	line-height:50px;
	color:#00A598;
}
.showImage{
	position:relative;
	z-index:1;
	height: 352px;
	width: 890px;
}
.caseImage{
	position:relative;
	z-index:1;
	height: 310px;
	width: 890px;
}
.textHolder{
	display: table-cell;
	vertical-align: middle;
	font-weight:normal;
}
.showImageText{
	width:333px;
	height:352px;
	display: table;
	padding-left:12px;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
}
.showImageText h1{
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	letter-spacing:-2px;
	font-size:50px;
	line-height:48px;
	margin-bottom:10px;
}
.showImageText p{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: -1px;
	font-size:22px;
	line-height: 31px;
    color:#888888;
}
.caseImageText{
	width:495px;
	height:310px;
	display: table;
	position:absolute;
	top:0;
	left:375px;
	z-index:2;
	font-weight:normal;
}
.caseImageText h1{
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing:-2px;
	font-size:50px;
	line-height:48px;
	margin-bottom:5px;
	color:#7aa429;
	font-weight:normal;
}
.caseImageText h2{
	font-family: Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing:-1px;
	font-size:22px;
	line-height:31px;
	color:#236192;
	font-weight:normal;
}
.caseImageText .bodyText{
	font-family: Arial, Helvetica, sans-serif;
	text-transform: normal;
	letter-spacing: -1px;
	font-size:16px;
	line-height: 26px;
	color:#848484;
	font-weight:normal;
}
.closeBox{
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	letter-spacing:-1px;
	position:absolute;
	left: 906px;
	top: 3px;
}
.grey{
	color:#888888;
}
.orange{
	color:#ff9900;
}
.yellow{
	color:#ffce00;
}
.white {
	color:#fff;
}
.green{
	color:#7aa829;
}
.red {
	color:#990000;
}
.babyBlue{
	color:#13b4ff;
}
.mustard {
	color:#cec702;
}
.lizRed{
	color:#d81010;
}
.aqua{
	color:#009999;
}
.limeGreen{
	color:#9ccd18;
}
.redOrange{
	color:#fd5401;
}
.brightGreen{
	color:#10b510;
}
.imgSelector{
	position:absolute;
	top: 358px;
	width: 579px;
}
.caseImgSelector{
	position:absolute;
	top: 315px;
	width: 579px;
	left: 2px;
}
.pop_thumb{
	border:1px solid #236192;
	margin:0 10px 10px 0;
}
#pane-target{
	width:890px; height:352px; overflow:hidden; display:block; font-weight:normal;
}
#case-target{
	width:890px; height:310px; overflow:hidden; display:block; font-weight:normal;
}
#pane-slide{
	width:9000px; height:352px; position:relative; font-weight:normal;
}
#case-slide{
	width:9000px; height:310px; position:relative; font-weight:normal;
}
.slide{
	float:left;width:890px; height:352px; position:relative;
}
.caseSlide{
	float:left;
	width:890px;
	height:310px;
	position:relative;
	font-weight:normal;
}

.textHeading{
	font-size:14px;
	color:#7aa829;
	font-weight:bold;
}
.textHeadingNorm{
	font-size:14px;
	color:#7aa829;
}
.textBody{
	font-size:14px;
	color:#236192;
}

.contentHolder{
	padding-top: 20px;
}
.sidebar1 {
	float: left;
	width: 222px;
	padding-bottom: 10px;
}
.sidebarSub {
	position:absolute;
	width: 253px;
	padding-bottom: 10px;
	left: 0px;
	top: 474px;
	height: 345px;
}
.sidebarSubLL {
	position:absolute;
	width: 253px;
	padding-bottom: 10px;
	left: 0px;
	top: 600px;
	height: 345px;
}
.sidebarSub img, .sidebarSubLL img {
	padding-bottom:11px;
}
.content {
	width: 600px;
	float:left;
}
.contentSub {
	width: 600px;
	margin-left:265px;
	padding-top:11px;
	color:#002855;
}
.caseSub {
	padding-top:22px;
	color:#002855;
}
.subContent{
	display:block;
}
.subContent td{
	padding-bottom:35px;
}
.brands{
	padding:0;
}
.brands img{
	text-align:center;
	padding-bottom:15px;
}
.brands h4{
	font-size:12px;
	font-weight:normal;
	text-transform: capitalize;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 15px;
	color:#236192;
}
/* ~~ The footer ~~ */
.footer {
	position: relative;/* this gives IE6 hasLayout to properly clear */
	height:155px;
	font-size: 11px;
	line-height:18px;
	color: white;
	background-repeat:repeat-x;
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
.footer table{
	margin:0 auto;
}
.footer td{
	padding-top:22px;
}
.footer img{
	padding-top:5px;
}
.subFooter {
	position: relative;/* this gives IE6 hasLayout to properly clear */
	font-size: 14px;
	line-height:18px;
	color: white;
	background-color:#002855;
	text-align:center;
	padding:8px 0;
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
.subNav{
	width:228px;
	margin-bottom:15px;
	background-repeat:repeat-y;
	overflow:hidden;
	text-align:right;
	padding-top: 10px;
	padding-right: 12px;
	padding-bottom: 10px;
	padding-left: 0;
}


/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}