/*   
Theme Name: Pace theme
Theme URI: http://ooze-digital.com
Description: A bespoke Wordpress theme for Pace Marketing Solutions, based on the HTML5 reset framework.
Author: Rob Plumley
Author URI: http://ooze-digital.com
Version: 1.0
*/

/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 13px Helmet, Freesans, sans-serif; font-family: ag-light, Arial;}

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {color: #333;}

a {color: #f26938;}
a:hover {color: #f78f1e;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}
img {max-width: 100%; height: auto;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

h4 {
    font-weight: normal;
    font-family: ag-bold;
    font-size: 16px;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 5px;
}
h5 {font-weight: normal; text-transform: uppercase; font-family: ag-bold;}


/* Header styles
-------------------------------------------------------------------------------*/
.leading-box {
    overflow: hidden;
    width: 100%;
    margin-bottom: 25px;
    position: relative;
}
.leading-box.with-image {
    background-color: #f78f1e;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 465px;
}
.nav-section {width: 100%; padding-top: 20px; position: absolute;}
h1.head-overlay {
    position: absolute;
    left: 0;
    top: 150px;
    color: #fff;
    font-family: ag-med;
    font-weight: normal;
    font-size: 24px;
    width: 395px;
}
.head-arrow-down {
    background-image: url('_/img/image_arrow_down.png');
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: 0;
}

/* Main menu styling */
.nav-section .menu-main-menu-container {float: right;}
ul.mainmenu {margin-top: 20px; float: right;}
ul.mainmenu li {display: inline-block; margin-left: 25px;}
ul.mainmenu li a {
    text-decoration: none;
    color: #6e6e6e;
    font-family: ag-bold, Arial;
    text-transform: uppercase;
}
.light-nav ul.mainmenu li a {color: #FFF;}
ul.mainmenu li.current-menu-item a, ul.mainmenu li.current-menu-item a:hover {color: #f78f1e;}
ul.mainmenu li a:hover {color: #f26938;}

/* Mobile header menu styling */
.accordion-menu-wrap {width: 100%; text-transform: uppercase;}
.accordion-menu-wrap ul {list-style: none; margin: 0; padding: 0;}
.accordion-menu-wrap a {color: #FFFFFF; text-decoration: none;}

/* Main mobile menu content */
.accordion-menu li a {
    background: #fff;
    color: #f78f1e;
    height: 45px;
    padding: 12px 5%;
    border-top: 1px solid #f26938;
    display: block;
    width: 100%;
}
.accordion-menu li ul li a {background: #f78f1e; color: #FFF; border-top: 1px solid #FFF; border-bottom: none;}
.accordion-menu .openmenu a.ui-accordion-header, .accordion-menu .openmenu a.ui-state-active {background-position: 97.1% center; background-repeat: no-repeat;}
.accordion-menu .openmenu a.ui-accordion-header {background-image: url("_/img/menu_off.png");}
.accordion-menu .openmenu a.ui-state-active {background-image: url("_/img/menu_on.png");}

/* Mobile sub-menu content */
.mobile-mainmenu .sub-menu li a {background: #000; color: #bea658;}
.mobile-mainmenu .menu-item-has-children a.ui-accordion-header {background-image: url("_/img/menu_off.png");}
.mobile-mainmenu .menu-item-has-children a.ui-state-active {background-image: url("_/img/menu_on.png");}


/* Main container styles
-------------------------------------------------------------------------------*/
.midcol {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}
.top-col {min-height: 100px;}
.grey-row {
    background-color: #ecebeb;
    background-image: url("_/img/arrow_down.png");
    background-position: center top;
    background-repeat: no-repeat;
}
.grey-row, .white-row {padding: 40px 0 30px;}
.white-row.heading-row {padding-bottom: 0;}
.left-column, .right-column {width: 48.5%; float: left;}
.left-column {margin-right: 3%;}
.half-width {width: 50%; float: left;}
.quarter-column-left, .quarter-column-right {width: 22.75%; margin-right: 3%; float: left;}
.quarter-column-right {margin-right: 0;}

h2.leading-text, .full-column h2 {
    color: #767676;
    font-family: ag-light;
    font-size: 25.5px;
    font-weight: normal;
    text-align: center;
    padding-bottom: 45px;
}
.full-column h2 {padding-bottom: 0;}
.section-title {
    color: #f26938;
    font-weight: normal;
    font-family: ag-bold;
    text-transform: uppercase;
    text-align: center;
    font-size: 23px;
    margin-bottom: 16px;
}

.site-content {color: #767676; font-size: 17px;}
.site-content p {margin-bottom: 20px;}
.site-content .section-title {margin-bottom: 40px;}
.site-content ul li {
    background-image: url('_/img/orange_bullet.png');
    background-position: left 7px;
    background-repeat: no-repeat;
    padding-left: 15px;
}
.white-row.site-content ul li {margin-bottom: 16px;}
.grey-row.site-content ul li {margin-bottom: 18px;}


/* Client grid styles
-------------------------------------------------------------------------------*/
.clients-grid {width: 100%;}
.home .clients-grid {border-top: 1px solid #767676; margin-bottom: 16px; padding-top: 35px;}
.clients-grid h3.section-title {margin-bottom: 24px;}
.client-gridcell {
    width: 23.5%;
    margin: 0 2% 20px 0;
    position: relative;
    float: left;
}
.client-gridcell img {display: block;}
.client-gridcell a.client-link {
    background-color: rgba(247,143,30,0.75);
    color: #fff;
    width: 100%;
    height: 100%;
    font-family: ag-bold;
    font-size: 23px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    padding: 32% 20px 20px;
    position: absolute;
    display: inline-block;
    opacity: 0;
   transition: opacity .45s ease-in-out;
   -moz-transition: opacity .45s ease-in-out;
   -webkit-transition: opacity .45s ease-in-out;    
}
.client-gridcell a.client-link span {display: inline-block; vertical-align: middle;}
.client-gridcell:hover a.client-link {opacity: 1;}
.client-gridcell.last-item {margin-right: 0;}


/* Contact form styles
-------------------------------------------------------------------------------*/
.site-content .pace-forms ul li {background: transparent; padding-left: 0;}
.pace-forms .gfield_label {width: 23%; float: left;}
.pace-forms .gfield input, .pace-forms .gfield textarea {
    width: 77%;
    border: 1px solid #767676;
    font-family: ag-light;
    color: #767676;
    padding: 8px;
    max-height: 150px;
}
.pace-forms .gform_button[type="submit"] {
    background: #f26938;
    border: none;
    width: 77%;
    margin-left: 23%;
    font-family: ag-med;
    text-transform: uppercase;
    font-size: 20px;
    color: #fff;
    padding: 6px;
}
.pace-forms .name_first label, .pace-forms .gform_validation_container {display: none;}


/* Footer styles
-------------------------------------------------------------------------------*/
.testimonial-row {
    background-image: url('_/img/testimonials_bg.png');
    background-position: center 20px;
    background-repeat: no-repeat;
    background-color: #f78f1e;
    color: #fff;
    width: 100%;
    padding: 150px 0 20px;
    text-align: center;
}
.testimonial-copy {font-family: ag-light; font-size: 17.5px; margin-bottom: 5px;}
.testimonial-credit {font-family: ag-med; font-size: 17.5px;}

.footer-row {background-color: #272c3b; color: #fff; padding: 50px 0;}
.footer-row h5 {border-bottom: 1px solid; padding-bottom: 12px; line-height: 1em;}
.footer-box {
    border-bottom: 1px solid;
    width: 100%;
    min-height: 120px;
    margin-bottom: 20px;
    padding: 20px 0;
    float: left;
}
.footer-box.menu-box a {color: #fff; text-decoration: none;}
.footer-box.menu-box a:hover {color: #fff; text-decoration: underline;}
.copyright-notice {clear: both;}

/*
 * jQuery FlexSlider v2.4.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 and later license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 * 
 */
/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover,
.flex-container a:focus,
.flex-slider a:focus {outline: none;}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.flex-pauseplay span {text-transform: capitalize;}
/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
.flexslider .slides img {width: 100%; display: block;}
.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides {display: block;}
* html .flexslider .slides {height: 1%;}
.no-js .flexslider .slides > li:first-child {display: block;}

/* ====================================================================================================================
 * PACE THEME
 * ====================================================================================================================*/
.flex-control-paging {background: red; width: 70px; margin: 30px auto 0 !important;}
.flex-control-paging li {float: left;}
.flex-control-paging li a:hover {cursor: pointer; background-color: rgba(255,255,255,0.5);}
.flex-control-paging li a.flex-active {background-color: #FFF;}
.flex-control-paging li a {
    border: 1px solid;
    color: #fff;
    margin: 2px;
    border-radius: 50px;
    width: 19px;
    height: 19px;
    display: block;
    text-indent: -9999999em;
    overflow: hidden;
}


/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next {opacity: 1; right: 10px;}
}


/* Embedded fonts
-------------------------------------------------------------------------------*/
@font-face {
    font-family: 'ag-light';
    src: url('_/fonts/ag-light.eot');
    src: url('_/fonts/ag-light.eot?#iefix') format('embedded-opentype'),
         url('_/fonts/ag-light.woff') format('woff'),
         url('_/fonts/ag-light.ttf') format('truetype'),
         url('_/fonts/ag-light.svg#ag-light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ag-med';
    src: url('_/fonts/ag-med.eot');
    src: url('_/fonts/ag-med.eot?#iefix') format('embedded-opentype'),
         url('_/fonts/ag-med.woff') format('woff'),
         url('_/fonts/ag-med.ttf') format('truetype'),
         url('_/fonts/ag-med.svg#ag-med') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ag-bold';
    src: url('_/fonts/ag-bold.eot');
    src: url('_/fonts/ag-bold.eot?#iefix') format('embedded-opentype'),
         url('_/fonts/ag-bold.woff') format('woff'),
         url('_/fonts/ag-bold.ttf') format('truetype'),
         url('_/fonts/ag-bold.svg#ag-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* And here begins the WordPress fun.
-------------------------------------------------------------------------------*/

/* Content alignment */
.alignleft {margin: 0 20px 0 0; float: left;}
.alignright {margin: 0 0 0 20px; float: right;}


/* Print styles!
-------------------------------------------------------------------------------*/
@media print {

}


/* Media queries!
-------------------------------------------------------------------------------*/
.mobile-only {display: none}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
}

/* Universal (under 1140px) ----------- */
@media only screen 
and (max-width : 1000px)  {
    .midcol {padding: 0 3%;}
    .nav-section .menu-main-menu-container, ul.mainmenu {padding-right: 3%;}
}

/* Universal (under 760px) ----------- */
@media only screen 
and (max-width : 760px)  {
    .left-column, .right-column, .quarter-column-left, .quarter-column-right {width: 100%; margin: 0;}
    .alignleft, .alignright {margin-bottom: 20px;}
    .client-gridcell {width: 49%;}
    .client-gridcell.last-item-portrait {margin-right: 0;}
    .client-gridcell a.client-link {opacity: 1;}    
}

/* Universal (under 700px) ----------- */
@media only screen 
and (max-width : 700px)  {
    .desktop-only {display: none;}
    .mobile-only {display: block;}    
}

/* Universal (under 550px) ----------- */
@media only screen 
and (max-width : 550px)  {
    .alignleft, .alignright {float: none; display: block; margin: 10px auto 30px;}
}

/* Universal (under 480px) ----------- */
@media only screen 
and (max-width : 480px) {
    .half-width {width: 100%;}
    .client-gridcell {width: 100%; margin-right: 0;}
}