.wrap{max-width:1300px; margin:0 auto;}


/* ============================================================================
   Primary Styles
   ========================================================================== */

.transition {  -webkit-transition: all 0.7s ease-out;     -moz-transition: all 0.7s ease-out;       -o-transition: all 0.7s ease-out;          transition: all 0.7s ease-out;}
*, *:after, *:before {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
.grid:after {  content: "";  display: table;  clear: both;}
[class*='col-'] {  float: left;}
.col-1-1 {width: 100%; float: none; display: block;}
.col-1-4 {width: 25%;}
.col-2-4 {width: 50%;}
.col-3-4 {width: 75%;}
.col-1-3 {width:33.33%;}
.col-2-3 {width:66.66%;}
.imglink{display: block;min-width:20px; min-height:20px; font-size: 0px; line-height: 0px; color: transparent; }


/* ============================================================================
   Xero Page Styles
   ========================================================================== */

#clientBlurb{text-align: center;padding: 80px 0px 50px;max-width: 940px;margin: 0 auto;}
img {border: 0;-ms-interpolation-mode: bicubic;vertical-align: middle;}
#xeroWrap{max-width: 1300px;  margin: 0 auto;}
.innerRespond{max-width: 1300px;  margin: 0 auto;}
.col-2-4 .xeroInner{padding: 70px 5% 39px;text-align: center;}
.xeroSection{border-bottom: 1px solid #eff2f5;}
.xeroSection h2{color: #1e232a !important;font-family: 'National' !important;font-size: 36px !important;font-weight: normal !important;margin-bottom: 16px !important;margin-top: 0px !important;line-height: 36px !important;}
.xeroSection p{color: #656c75 !important;font-size: 17px !important;font-weight: normal !important;margin: 0.5em 0 1em 0 !important;line-height: 1.5em !important;font-family: sans-serif !important;}
#xeroAwesome{text-align: center;padding: 30px 0px;}
span.awesomeImage, span.awesomeGlyph, span.awesomeCopy{display: inline-block;}
span.awesomeImage{max-width: 168px;}
span.awesomeImage img{width:100%;height: auto;}
span.awesomeGlyph{font-family: 'fontello';color: #ccc;font-size: 25px;padding: 0% 3%;}
span.awesomeCopy{color: #1e232a;font-family: 'National';font-size: 36px;}
span#xeroLogo img{max-width:114px;}
#xeroVid{margin-bottom: 25px;}
#xeroVideo{background-color: #45474d;padding: 10px 10%;border-radius: 4px;}
#xeroVideo iframe{height:100%;}
#xeroIllustration img{max-width:100%;}
#xeroStatement{}
#xeroStatement h2{font-size: 32px;line-height: 0.9em;}
#xeroStatement p{}
#xeroPartnerStats{}
.xeroPartner{width: 84px;height: 84px;background: url(../img/xeroLogo.png) no-repeat scroll 0px 0px; background: url(../img/xeroLogo.svg) no-repeat scroll 0px 0px;display: inline-block;margin: 0 auto;background-size: cover;}
.xeroStatus{width: 84px;height: 84px;display: inline-block;background: transparent url(../img/xero-partner.png) no-repeat scroll 0px 0px;margin-left: 2px;}
.xeroPlatinum{background: url(../img/platinum.png) no-repeat scroll 0px 0px; background-size: cover;}
.xeroGold{background: url(../img/gold.png) no-repeat scroll 0px 0px; background: transparent url(../img/xeroGold.svg) no-repeat scroll 0px 0px;background-size: cover;}
.xeroSilver{background: url(../img/silver.png) no-repeat scroll 0px 0px; background: url(../img/xeroSilver.svg) no-repeat scroll 0px 0px;background-size: cover;}
.xeroBronze{background: url(../img/bronze.png) no-repeat scroll 0px 0px; background: url(../img/xeroBronze.svg) no-repeat scroll 0px 0px;background-size: cover;}


.xeroCTA{background: #eee;border-radius: 0px 0px 10px 10px;}
#xeroCTA{}
a.xeroButton{display: inline-block;width: 164px;margin: 35px 0px;padding: 0 20px;line-height: 42px;border-radius: 21px;font-size: 22px;color: #fff;text-align: center;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);background-color: #7bd300;background-image: -webkit-gradient(linear, left top, left bottom, from(#7bd300), to(#5eaf01));background-image: -webkit-linear-gradient(top, #7bd300, #5eaf01);background-image: -moz-linear-gradient(top, #7bd300, #5eaf01);background-image: -o-linear-gradient(top, #7bd300, #5eaf01);background-image: linear-gradient(to bottom, #7bd300, #5eaf01);-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);font-family: 'National'; font-weight: normal;text-decoration: none;}
a#xeroPartnerLink{padding-left:20px;}

a.xeroButton:hover{background: #5eb303;}
span#xeroLogo{max-width: 86px;}
img.xeroPng{display: none;}
img.xeroSvg{width: 50%;  max-width: 114px;}
.xeroLast{padding:60px 0px;}
.xeroLast .col-1-4{width:19%;}
.xeroLogo{width:80%; margin:0 auto; display: block;text-align: right;}
.noBorder{border: 0px;}
.bubble{position:relative;background: #eef1f5;border-radius: 6px; padding: 20px 0px;}
.bubble .col-1-3{}
.bubble .col-1-3 p{color: #656c75 !important;  font-size: 17px !important;  font-weight: normal !important;  margin: 10px 0px !important;  line-height: 1.5em !important;  font-family: sans-serif;text-align: center;}
.bubble .col-1-3 #xeroPartnerStats{    max-width: 175px;    margin: 0 auto;padding-top: 30px;}
.bubble .col-2-3{}
.bubble .col-2-3 h2{color: #1e232a !important;font-family: 'National' !important;font-size: 26px !important;  font-weight: normal !important;  margin-bottom: 16px !important;      margin-top: 16px !important;  line-height: 36px !important;    padding-right: 30px;}
.pointer{content: "";position: absolute;top: 31px;left: -14px;display: block;width: 0;z-index: 1;border-color: transparent #eef1f5;border-style: solid;border-width: 15px 15px 15px 0px;}

.xeroFooterWidgets{padding: 50px 0px 50px;}
h2.widget-title, h2.widgettitle{font-size: 1.5em;color: #fff;font-family: 'National' !important;font-weight: normal;background: #333;margin-bottom: 2px;padding: 21px 22px;margin-top: 0px;}
h2.widgettitle strong{font-weight:normal;}
.xero-twitter-feed-widget h2.widgettitle{background: #505050; }
.xero-twitter-feed-widget h2.widgettitle span,
.xero-blog-feed-widget h2.widget-title span{font-family: 'National' !important; font-size: 16px;text-transform: none;float: right;line-height: 40px;}
.xero-twitter-feed-widget iframe{background: #505050;width: 100%;padding: 26px;}
.xero-blog-feed-widget{padding-right: 12px;}
.xero-blog-feed-widget ul{background: #2b2b2b;padding: 20px 25px;margin: 0px;list-style-type: none;}
.xero-blog-feed-widget ul li{border-bottom: 1px solid #222;margin: 0px;display: block;padding: 7px 0px;color: #7d7d7d;font-size: 16px;font-family: 'National' !important;}
.xero-blog-feed-widget ul li a{color: #53d1fb;}
.xero-blog-feed-widget ul li:last-child{border: none;}
.xero-blog-feed-widget ul li span.blogDate{}




/* =============================================================================
   Media Queries
   ========================================================================== */

@media screen and (min-width: 0px) and (max-width: 479px) {
  #xeroWrap .col-2-4, .landingWrap .col-2-4{width:100%;}
  #xeroWrap .col-2-4:first-child .xeroInner{padding-bottom: 0px;}
  #xeroWrap .col-2-4:last-child .xeroInner{padding-top: 40px;}
  span.awesomeImage{width: 22%;}
  span#xeroLogo{width:16%;}
  span.awesomeGlyph{padding: 0px;text-align: center;width: 11%;font-size: 15px;}
  span.awesomeCopy{font-size: 24px;}
  #xeroVideo{padding:0px; border-radius: 0px; background: transparent;}
  .landingWrap{padding:0px 3%;}
  .landingHeader{padding: 30px 0px;}
  a.clientLogo{margin: 0 auto;}
  #landingPartner{text-align: center;padding-top: 14px;}
  .xeroLast{padding: 10px 0px;}
  .xeroLast .col-1-4, .pointer{display: none;}
  .xeroLast .col-3-4{width: 95%;margin: 0 auto;float: none;}
  .bubble .col-1-3{width: 100%;float: none;padding-top: 14px;}
  .bubble .col-1-3 p{}
  .bubble .col-1-3 #xeroPartnerStats{display: block;padding-top: 10px;}
  .bubble .col-2-3{width: 100%;float: none;}
  .bubble .col-2-3 h2{padding: 10px 30px 0px;text-align: center;}
  a.xeroButton{margin: 35px auto;}

}
@media screen and (min-width: 0px) and (max-width: 360px) {
  #xeroAwesome{padding: 0px 0px 20px;}
  span.awesomeCopy{font-size: 18px;}
  .xeroSection h2{font-size: 32px !important;}
  #clientBlurb{padding: 20px 0px 30px;}
  a#xeroPartnerLink{display: block;padding-left: 0px;margin-top: -10px;}

  .bubble .col-2-3 h2 {padding: 10px 30px 0px;text-align: center;font-size: 21px !important;line-height: 29px !important;}

}
@media screen and (min-width: 480px) and (max-width: 699px) {
  #xeroWrap .col-2-4{width:100%;}
  #xeroWrap .col-2-4:first-child .xeroInner{padding-bottom: 0px;}
  #xeroWrap .col-2-4:last-child .xeroInner{padding-top: 40px;}
  span.awesomeImage{width: 22%;}
  span.awesomeGlyph{padding: 0px;text-align: center;width: 11%;font-size: 15px;}
  span.awesomeCopy{font-size: 24px;}  
  span#xeroLogo{width:16%;}
  #xeroVideo{padding:0px; border-radius: 0px; background: transparent;}
  .xeroLast .col-1-4, .pointer{display: none;}
  .xeroLast .col-3-4{width: 95%;margin: 0 auto;float: none;}
  .bubble .col-1-3{width: 100%;float: none;padding-top: 14px;}
  .xpsWrap{display: block;margin: 0px auto;width: 480px;}
  .bubble .col-1-3 p{}
  .bubble .col-1-3 #xeroPartnerStats{display:block;vertical-align: middle;padding-top: 10px;}
  .bubble .col-2-3{width: 100%;float: none;}
  .bubble .col-2-3 h2{padding: 10px 30px 0px;text-align: center;}
  a.xeroButton{margin: 35px auto;}
}
@media screen and (min-width: 700px){
  

}
@media screen and (min-width: 700px) and (max-width: 1039px) {
  #xeroVideo{padding:0px; border-radius: 0px; background: transparent;}
  .bubble .col-1-3{width: 100%;float: none;paddng-top: 14px;}
  .xpsWrap{display: block;margin: 0 auto;width: 174px;}
  .bubble .col-1-3 p{display: inline-block;font-size: 14px !important;}
  .bubble .col-1-3 #xeroPartnerStats{display: inline-block;vertical-align: middle;padding-top: 10px;}
  .bubble .col-2-3{width: 100%;float: none;}
  .bubble .col-2-3 h2{padding: 10px 30px 0px;text-align: center;}
  #whatsHap .innerRespond{padding:0% 4%;}

}
@media screen and (min-width: 1040px) and (max-width: 1300px) {
  

}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}


/* ============================================================================
   Webfonts
   ========================================================================== */

@font-face {
  font-family: 'National'; 
  src: url('../webfonts/NationalWeb-Regular.eot');
  src: url('../webfonts/NationalWeb-Regular.eot?#iefix') format('embedded-opentype'),
  url('../webfonts/NationalWeb-Regular.woff') format('woff'),
  url('../webfonts/NationalWeb-Regular.ttf') format('truetype'),
  url('../webfonts/NationalWeb-Regular.svg#wf') format('svg');}

@font-face {
  font-family: 'fontello';
  src: url("../webfonts/fontello.eot");
  src: url("../webfonts/fontello.eot?#iefix") format('embedded-opentype'), 
  url("../webfonts/fontello.woff") format('woff'), 
  url("../webfonts/fontello.ttf") format('truetype'), 
  url("../webfonts/fontello.svg#wf") format('svg');
}

/* =============================================================================
   IE8 fixes
   ========================================================================== */

@media \0screen {
     
  img.xeroPng{display: inline-block;}
  img.xeroSvg{display: none;}
  .xeroPartner {background: transparent url(../img/xero_logo.png) no-repeat scroll 0px 0px;}
  .xeroGold{background-position: -88px 0px;background: transparent url(../img/xero-partner.png) no-repeat scroll 0px 0px;}
  .xeroSilver{background-position: -88px -83px;background: transparent url(../img/xero-partner.png) no-repeat scroll 0px 0px;}
  .xeroBronze{background-position: -88px -166px;background: transparent url(../img/xero-partner.png) no-repeat scroll 0px 0px;}
}

/* =============================================================================
   FF fixes
   ========================================================================== */

/*-- , x:-moz-any-link, x:default --*/