/*
    ASL2022 Overrides for migration to DNN9.11+ and the whacky-forced inclusion
    of Bootstrap 4.6+
    202304 JRF
*/
.DNNContainer_Title_h2 h2 {
  display: inline-block !important;
  color: #636363;
  font-weight: bold;
}

h2 span,
h2 span.TitleH2 {
  color: #0767b1 !important;
  display: inline-block !important;
}
/* PORTAL OVERRIDES BY ACCURATY SOLUTIONS */

.big-ol-pic.company {
  background-image: url(/Portals/0/SiteContent/BigImages/Atkins-Building-1800-s-oak-st-champaign-2022-w4032.jpg?w=2600);
}

.big-ol-pic.webcms {
  background-image: url(/Portals/0/SiteContent/BigImages/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg);
  height: 600px;
}


/* the originals from the old site */
.big-ol-pic.mobileweb {
  background-image: url(/Portals/0/SiteContent/BigImages/mobilesites_w2400.jpg);
}

.big-ol-pic.kitten {
  background-image: url(http://placekitten.com/2400/1800);
  height: 600px;
}

.big-ol-pic.homepage {
  background-image: url(/Portals/0/SiteContent/BigImages/officeCollage_w2400.jpg);
}

/* media styles for background images */
@media screen and (orientation:portrait) {
  .big-ol-pic.homepage {
    background-image: url(/Portals/0/SiteContent/BigImages/officeCollageVert_w700.jpg);
  }
}



/* older, prolly won't use again */
.big-ol-pic.cch {
  background-image: url(/Portals/0/SiteContent/BigImages/cch_w2400.jpg);
}

.big-ol-pic.bhy {
  background-image: url(/Portals/0/SiteContent/BigImages/bhy_w2400.jpg);
}

.big-ol-pic.twfss {
  background-image: url(/Portals/0/SiteContent/BigImages/twfss_w2400.jpg);
}

.big-ol-pic.webdesign {
  background-image: url(/Portals/0/SiteContent/BigImages/webdesign_w2400.jpg);
}


.vignette {
  box-shadow: inset 0 -20px 100px rgba(0, 0, 0, .75);
  -moz-box-shadow: inset 0 -20px 100px rgba(0, 0, 0, .75);
  -webkit-box-shadow: inset 0 -20px 100px rgba(0, 0, 0, .75);
}

.vignette img {
  z-index: -1;
  position: relative;
}

.hex-icon {
  width: 98px;
  text-align: center;
  padding: 90px 0 0;
  position: relative;
  height: 130px;
  display: block;
  float: left;
  margin-right: 20px;
}

.hex-icon.note {
  background: transparent url(/Portals/0/SiteContent/the_note_w98.png) no-repeat left top;
}

/******************* HOMEPAGE STYLES *********************/
/********************************************************/
.what-we-do {
  width: 80%;
  margin: 0 auto;
}

.service-title {
  padding: 20px 0 5px;
  font-size: 18px;
}

.portfolio-grid .item {
  float: left;
  width: 25%;
}

.portfolio-grid .item .project-name {
  font-family: "museo-sans-condensed", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0 20px;
  line-height: 22px;
  font-size: 17px;
}

/******************* COMPANY PAGE *********************/
/*******************************************************/

/* service icons */
.services-list {
  text-align: center;
  padding: 20px 0;
}

.services-list ul {
  margin: 0;
}

.services-list ul li {
  list-style-type: none;
  display: inline-block;
  padding: 0 2%;
}

.services-list ul li span,
span.service-label {
  display: block;
  padding: 10px 0;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.services-list ul li a {
  display: block;
  height: 130px;
  width: 100px;
  background-repeat: no-repeat;
  background-position: left top;
  background-color: transparent;
  position: relative;
}

.services-list ul li a:hover {
  color: #0767b1;
}

.services-list ul li.design a {
  background-image: url('SiteContent/ServiceIcons/service-icon-design_w98.png')
}

.services-list ul li.design a:hover {
  background-image: url('SiteContent/ServiceIcons/service-icon-design_over_w98.gif')
}

.services-list ul li.cms a {
  background-image: url('SiteContent/ServiceIcons/service-icon-cms_w98.png')
}

.services-list ul li.cms a:hover {
  background-image: url('SiteContent/ServiceIcons/service-icon-cms_over_w98.gif')
}

.services-list ul li.hosting a {
  background-image: url('SiteContent/ServiceIcons/service-icon-hosting_w98.png')
}

.services-list ul li.hosting a:hover {
  background-image: url('SiteContent/ServiceIcons/service-icon-hosting_over_w98.gif')
}

.services-list ul li.mobile a {
  background-image: url('SiteContent/ServiceIcons/service-icon-mobile_w98.png')
}

.services-list ul li.mobile a:hover {
  background-image: url('SiteContent/ServiceIcons/service-icon-mobile_over_w98.gif')
}



/* testimonials */

.testimonial-container {
  text-align: center;
  width: 80%;
  margin: 0 auto;
}

.testimonial-quote {
  font-size: 30px;
  line-height: 42px;
  font-style: italic;
}

/* size overrides */
.testimonial-quote.VeryShort {
  font-size: 40px;
  line-height: 56px;
}

.testimonial-quote.Short {
  font-size: 30px;
  line-height: 42px;
}

.testimonial-quote.MidLength {
  font-size: 27px;
  line-height: 38px;
}

.testimonial-quote.Long {
  font-size: 24px;
  line-height: 34px;
}

.testimonial-quote.VeryLong {
  font-size: 18px;
  line-height: 27px;
}

.testimonial-quote strong {
  color: white;
}

.testimonial-byline {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 900;
}

.testimonial-byline .author {
  font-weight: bold;
}

/* associations */
.associations ul {
  margin: 0;
  text-align: center;
}

.associations ul li {
  list-style-type: none;
  display: inline-block;
  width: 15%;
  padding: 2%;
}

/* staff */

.staff-listing-big,
.staff-listings-smaller,
.staff-listings-smaller-box {
  width: 50%;
  float: left;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.staff-listings-additional .staff-listings-smaller-box {
  width: 25%;
}

.staff-listing-big,
.staff-listings-smaller-box {
  position: relative;
}

.staff-listing-big .staff-name-title,
.staff-listings-smaller .staff-name-title,
.staff-listings-additional .staff-name-title {
  position: absolute;
  text-align: center;
  z-index: 999;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  color: white;
  padding-top: 40%;
  background: transparent;
  color: transparent;
}

.staff-listing-big .staff-name-title:hover,
.staff-listings-smaller .staff-name-title:hover,
.staff-listings-additional .staff-name-title:hover {
  background: rgba(7, 103, 177, 0.9);
  color: white;
}

.staff-listings img {
  filter: saturate(0%);
  -webkit-filter: saturate(0%);
  -moz-filter: saturate(0%);
  -o-filter: saturate(0%);
  -ms-filter: saturate(0%);
  width: 100%;
}

.staff-listings img.active {
  filter: saturate(100%);
  -webkit-filter: saturate(100%);
  -moz-filter: saturate(100%);
  -o-filter: saturate(100%);
  -ms-filter: saturate(100%);
}

.bio-box {
  margin-top: 20px;
}

.bio-box .SubHead {
  padding: 0;
}


.bio-name-title {
  float: left;
  width: 25%;
  text-align: right;
}

.bio-name-title-inner {
  padding-right: 7%;
}

.bio-name-title .Head {
  font-size: 24px;
  color: #0767b1;
}

.bio-name-title .Head {
  font-size: 29px;
  color: #0767b1;
  line-height: 30px;
}

.staff-bio {
  float: left;
  width: 73%;
  padding-left: 2%;
}

img+.staff-bio-box {
  display: none;
}

/*
.bio-social a { display: inline-block; background-image: url('/Portals/0/Skins/ASL01/images/bio-social-sprite.png'); width: 16px; height: 16px; text-indent: -5000px; }
.bio-social .linkedin { background-position: -16px 0; }
.bio-social .linkedin:hover { background-position: 0 0; }
.bio-social .facebook { background-position: -16px -16px; }
.bio-social .facebook:hover { background-position: 0 -16px; }
.bio-social .twitter { background-position: -16px 16px; }
.bio-social .twitter:hover { background-position: 0 16px; }
*/

.bio-social a {
  display: inline-block;
  text-align: right;
  padding: 0 0 0 5px;
}

.slideout-top .bio-social a,
.leftPane .bio-social a {
  padding: 0 5px 0 0;
}

.bio-social a:before {
  padding: 0;
  margin: 0;
  font-size: 24px;
}

.bio-social a:hover:before {
  color: black;
}




/******************* PORTFOLIO PAGE *********************/
/********************************************************/
.category-picker ul {
  margin: 40px 0;
  padding-inline-start: 0;
  text-align: center;
}

.category-picker ul li {
  list-style-type: none;
  display: inline-block;
  padding: 0 .5%;
  font-family: "museo-sans-condensed", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
}

.category-picker ul li.active,
.category-picker ul li:hover {
  background: #0767b1;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

.iso-portfolio-grid .isotope-item {
  width: 320px;
  height: 280px !important;
}

/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/
.iso-portfolio-grid,
.category-picker {
  margin: 0 auto;
}

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}

a.project-details {
  text-indent: -9999px;
  color: white;
  display: block;
  text-align: center;
  transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -webkit-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
}

a.project-details,
.isotope .isotope-item .project-details-inner {
  width: 320px;
  height: 280px !important;
}

.isotope .isotope-item .project-details-inner {
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
}

.isotope .isotope-item .project-details:hover {
  text-indent: 0;
  background: rgba(7, 103, 177, 0.9);
  cursor: pointer
}

.isotope .isotope-item .project-details-inner p {
  display: block;
}

.project-details {
  margin: 0
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}


/************** PORTFOLIO DETAIL PAGES ****************/
/******************************************************/
.problem-left,
.problem-right {
  float: left;
}

.problem-left {
  width: 15%;
  text-align: center;
  padding: 5px 40px 0 0;
  position: relative;
  height: 130px;
}

.problem-left .service-label {
  right: 40px;
}

.problem-right {
  float: left;
  width: 85%
}

.solution-left,
.solution-right {
  float: left;
  width: 48.5%;
}

.solution-left {
  margin-right: 3%;
}

.project-intro {
  margin-top: -60px;
}

.project-intro-left {
  width: 48.5%;
  position: relative;
  top: -130px;
  left: -33px;
  z-index: 99999;
  float: left;
  margin: 0 3% -130px 0;
}

.project-intro-right {
  width: 48.5%;
  float: left;
}

h1.project-title {
  position: absolute;
  bottom: -18px;
  line-height: 45px;
  max-width: 100%;
  margin-left: 51%;
  text-align: left;
  font-size: 49px;
  left: 0;
  right: 0;
}

.project-intro-right .category-picker ul {
  margin: 0;
  text-align: left;
}

.project-intro-right .category-picker {
  margin: 0 0 10px;
}

.project-intro-right .category-picker ul li.active,
.project-intro-right .category-picker ul li:hover {
  background: none;
  color: #636363;
  cursor: text;
}

.project-intro-right .category-picker ul li {
  padding: 0 5px 0 0;
}

/******************* Services Pages *********************/
/********************************************************/

/* our process */
.our-process:before {
  content: "";
  width: 80%;
  height: 5px;
  display: block;
  margin: 40px auto 50px;
  background: #A7b3BD;
}

.process-one,
.process-two,
.process-three,
.process-four {
  float: left;
  width: 25%;
  padding: 0 15px;
}

.our-process {
  text-align: center;
  margin: 30px 0 20px
}

.process-title {
  font-size: 34px;
  margin: 30px 0 0 0;
  color: #0767b1;
}

.process-description {
  font-size: 18px;
}

.hosting-options-item {
  float: left;
  width: 48%;
  text-align: left;
}

.hosting-options-item,
.services-item {
  float: left;
  width: 48.5%;
  padding: 20px 0;
}

.hosting-options-item:nth-child(odd),
.services-item:nth-child(odd) {
  margin-right: 3%;
  clear: left;
}

.hosting-options-item p {
  margin: 0;
}

.cms-list {
  text-align: center;
  border-top: 1px solid #ddd;
  padding: 20px 10% 0;
}


/*
.services-item {
	clear: both;
	border-bottom: 1px solid #ddd;
	padding: 20px 0;
}
*/
.services-item .service-image {
  float: right;
  width: 250px;
  padding: 0 0 0 50px;
}

.pie-key,
p.caption {
  font-size: 11px;
  text-transform: uppercase;
  line-height: 18px;
}

p.caption {
  margin: 15px 0;
}

.pie-key ul li {
  list-style-type: none;
  width: 48%;
  float: left;
  margin-right: 1%;
}

.pie-key ul li:before {
  content: "";
  display: block;
  background: #000;
  width: 12px;
  height: 12px;
  float: left;
  margin: 2px 10px 0 0;
  clear: both;
}

.pie-key ul li.first:before {
  background: #0767b1
}

.pie-key ul li.second:before {
  background: #000
}

.pie-key ul li.third:before {
  background: #b26b00
}

.pie-key ul li.fourth:before {
  background: #759FC0;
}

.pie-key ul li.fifth:before {
  background: #666
}

.pie-key ul li.sixth:before {
  background: #ddd
}

.linechart-key {
  width: 100%;
  text-align: right;
  margin: 0 auto;
}

.linechart-key ul {
  margin: 20px 0;
}

.linechart-key ul li {
  list-style-type: none;
  display: inline-block;
  padding: 0 20px 0 0;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 18px;
}

.linechart-key ul li:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px 0 0;
}

.linechart-key ul li.first:before {
  background: #000;
}

.linechart-key ul li.second:before {
  background: #0767b1;
}

.cms-image {
  float: left;
  width: 100px;
}

.cms-list h3,
.cms-list p {
  padding-left: 130px;
}

.single-col-list {
  margin: 0;
}

.single-col-list li {
  border-bottom: 1px solid #DDD;
  display: block;
  list-style-type: none;
  padding: 5px 0;
}

.list-group {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.list-group li {
  list-style-type: none;
  padding: 10px 5px;
  width: 50%;
  border-bottom: 1px solid #ddd;
  display: block;
}

.list-group.four-col li {
  width: 24%;
  padding: 5px;
  margin-left: 1%;
  font-size: 13px;
}

.single-col-list li .fa,
.list-group li .fa,
.list-group li .svg-inline--fa {
  padding: 0 10px 0 0;
  color: #0767b1;
  width: 45px;
  font-size: 20px
}

/******************* misc *********************/
/**********************************************/
.dnnGridItem img,
.dnnGridAltItem img {
  max-width: none;
}

/* setting the height of the box so the text appears exactly where it should */
.pageHeaderPane div.wrapper {
  height: 183px;
}

.dnnModuleManager div.wrapper {
  /* this means DNN editing is active */
  height: 4rem !important;
}

/******************* mobile *********************/
/************************************************/
@media screen and (max-width: 960px) {
.pageHeaderPane div.wrapper {
    height: 153px;
  }
  .wrapper-small {
    width: 70%
  }

  .slideout-top {
    display: none;
  }

  .logo {
    float: none;
    text-align: center;
    display: inline-block;
    /* override absolute positioning for mobile */
    position: unset;
  }

  header .telephone-number {
    float: none;
  }

  .header-inner {
    padding-top: 25px;
  }

  .header-inner>.wrapper {
    text-align: center;
  }

  nav {
    float: none;
    margin: 10px auto 0;
    text-align: center;
  }

  #dnn_pnav>li {
    float: none;
    display: inline-block;
  }

  .pageHeaderPane h1:not(.project-title) {
    font-size: 58px;
    line-height: 53px;
    bottom: -18px;
    left: 5%;
    right: 5%;
  }

  .Head {
    font-size: 22px;
    line-height: 22px;
  }

  .SubHead {
    font-size: 13px;
    line-height: 17px;
    padding: 0;
  }

  .staff-listing-big .staff-name-title,
  .staff-listings-smaller .staff-name-title {
    background: rgba(0, 0, 0, 0.5);
    top: auto;
    color: white;
    padding: 15px 10px 0;
    text-align: left;
  }

  .process-one,
  .process-two,
  .process-three,
  .process-four {
    width: 50%;
    padding-bottom: 20px;
  }

  .process-three {
    clear: left;
  }

  .contentPaneSmall.DNNEmptyPane {
    padding-top: 10px !important;
  }

  .project-intro {
    margin-top: 0;
  }

}

.twoPanesWithSidebar {
  margin-top: 2rem;
}
@media screen and (max-width: 850px) {
  .twoPanes .pane {
    float: none;
    width: auto;
    margin-left: 0;
  }

  .blue-wrapper .wrapper,
  .gray-wrapper .wrapper .leftPane {
    padding: 20px 0 0;
  }

  .gray-wrapper .wrapper .rightPane {
    padding: 20px 0;
    border-top: 1px solid #ddd;
  }

  .wrapper-small {
    border-bottom: 1px solid #ddd;
    padding-bottom: 30px;
    margin-bottom: 0px;
  }

  .twoPanesWithSidebar .pane {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
  }

  a.project-details {
    text-indent: 0;
    color: #454545;
    padding-top: 280px;
  }

  .isotope .isotope-item .project-details:hover {
    background: none;
    cursor: auto;
    color: #0767b1;
  }

  .isotope .isotope-item .project-details-inner {
    /*padding: 0 40px 0 0;*/
    padding: 0;
    display: block;
    height: auto !important;
  }

  .iso-portfolio-grid .isotope-item {
    /*height: 400px !important;*/
  }

}

@media screen and (max-width: 720px) {
  .wrapper-small {
    width: 90%;
    padding: 0;
  }

  .twoPanes .pane {
    margin-top: 40px;
  }

  .hosting-options-item,
  .services-item {
    width: auto;
    float: none;
  }

  .staff-listing-big,
  .staff-listings-smaller {
    width: 100%;
    float: none;
  }

  .staff-listing-big,
  .staff-listings-smaller,
  .staff-listings-smaller-box {
    cursor: auto;
  }

  .staff-listings-smaller-box:nth-child(3n+3) {
    clear: left;
  }

  img+.staff-bio-box {
    display: block;
    padding: 20px 10px;
  }

  .bio-name-title,
  .staff-bio {
    float: none;
    width: auto;
    text-align: left;
    padding: 0;
  }

  .bio-social a {
    text-align: left;
    padding: 0 5px 0 0;
  }

  .staff-listing-big .staff-name-title,
  .staff-listings-smaller .staff-name-title,
  .staff-listings-additional .staff-name-title {
    display: none;
  }

  .staff-listings img {
    filter: saturate(100%);
    -webkit-filter: saturate(100%);
    -moz-filter: saturate(100%);
    -o-filter: saturate(100%);
    -ms-filter: saturate(100%);
  }

  .bio-box {
    display: none !important;
  }

  .associations ul li {
    width: 19%;
  }

  .footer-logo .asl-logo img {
    max-width: 100%;
  }
}

/* new Font Awesome SVGs need to be hidden until we are below 600px (mobile) 20240421 JRF */
.mobile-nav-phone,
.mobile-nav-bars {
  display: none;
}

/* this max-width needs to match mobWidth minus 1 in ASL01/js/custom.js */
@media screen and (max-width: 599px) {

  /* redoing 2 icons in mobile header, see GitHub/Accuraty/ASL2022, Issue# 15
  https://github.com/Accuraty/ASL2022/issues/15 */

  .mobile-nav-phone,
  .mobile-nav-bars {
    display: unset;
    color: white;
    position: absolute;
  }
  .mobile-nav-phone {
   right: 21px;
   top: 16px;
   font-size: 26px;
  }
  .mobile-nav-bars {
    left: 21px;
    top: 13px;
    font-size: 32px;
  }
  /* end of Issue# 15 fix */

.pageHeaderPane div.wrapper {
    height: 152px;
  }
  .services-list ul li {
    width: 50%;
    float: left;
  }

  .services-list ul li a {
    background-position: center top;
    width: 100%;
  }

  .staff-listings-smaller-box,
  .staff-listings-additional .staff-listings-smaller-box {
    width: 100%;
    float: none;
  }

  img+.staff-bio-box {
    padding: 20px 0;
  }

  .testimonial-quote,
  .testimonial-quote.VeryShort,
  .testimonial-quote.Short,
  .testimonial-quote.MidLength,
  .testimonial-quote.Long,
  .testimonial-quote.VeryLong {
    font-size: 21px;
    line-height: 32px;
  }

  .bottomPaneWrapper {
    padding: 20px 0;
    background: #1c1c1c;
    margin: 40px 0 20px;
  }

  .footer-top {
    margin: 0;
  }

  footer,
  footer.wrapper {
    margin-top: 0;
  }

  .associations ul li {
    width: 32%
  }

  .portfolio-grid .item {
    width: 50%
  }

  .contentPaneSmall {
    padding-top: 10px !important;
  }

  /* different nav */
  nav {
    position: absolute;
    display: none;
    top: 60px;
    left: 0;
    z-index: 999;
    right: 0;
    overflow: hidden;
    margin: 0;
    background: #666;
  }

/*   old icons from mobile, replace with Font Awesome <i>s
  .nav-icon {
    position: absolute;
    top: 11px;
    left: 5%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 999;
    display: block;
  }

  .nav-icon:before {
    position: absolute;
    content: "\f0c9";
    z-index: 999;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    font-size: 35px;
    top: 0;
    left: 0;
  }

  .nav-icon:hover:before {
    color: #003C69;
  }
 */

  header {
    position: static;
    overflow: visible;
    height: auto;
  }

  #page-identify:not(.home) .header-inner {
    /*
		padding: 0;
		background: transparent;
		overflow: visible;
		box-shadow: none;
		background-image: none !important;
		height: auto;
		*/
    height: 180px;
  }

  header .header-inner>.wrapper {
    width: auto;
    margin: 0;
    max-width: none;
  }

  .header-stuff {
    padding: 10px 5%;
    background: #0767b1;
    background: #000;
    z-index: 105;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 60px;
  }

  .pageHeaderPane {
    /*
		position: static;
		*/
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
  }

  #page-identify:not(.home) .pageHeaderPane h1 {
    /*
		position: static;
		color: #454545;
		text-shadow: none;
		padding: 110px 5% 0;

		text-align: left;*/
    font-size: 35px;
    line-height: 37px;
    text-align: center;
    margin-left: 0;

  }

  .home .header-inner {
    height: 320px;
    background-size: cover;
  }

  .home .pageHeaderPane h1 span.sub {
    font-size: 25px;
    line-height: 37px;
    padding: 0 30px;
  }

  main,
  .home main {
    margin-top: 20px;
  }

/*  old icons from mobile, replace with Font Awesome <i>s
  header .telephone-number a {
    margin: 0;
    border: none;
    visibility: hidden;
    width: 40px;
    float: right;
    position: relative;
    display: block;
  }

  header .telephone-number a:after {
    content: "\f098";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    color: white;
    visibility: visible;
    position: absolute;
    top: 14px;
    right: 0;
    display: block;
    font-size: 35px;
  }

  header .telephone-number a:hover:after {
    color: #003C69;
  }
  */

  .logo {
    /* margin: 3px 0 0 40px; */
    margin: 3px 0 0 0;
    /* to compensate for telephone icon size */
    max-width: 60%;
  }

  #dnn_pnav>li {
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
  }

  #dnn_pnav>li>a,
  #dnn_pnav>li>span {
    font-size: 18px;
    padding: 10px 8px;
    border-bottom: 1px solid #777;
  }

  #dnn_pnav>li>a.selected,
  #dnn_pnav>li:hover>a,
  #dnn_pnav>li.active>a {
    color: white;
    background: #333;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
  }

  .intro {
    font-size: 17px;
    line-height: 28px;
  }

  .solution-left,
  .solution-right {
    float: none;
    width: auto;
  }

  .project-intro-left,
  .project-intro-right {
    float: none;
    width: auto;
    position: static;
    margin: 0;
  }

  div.project-intro-left {
    margin-top: -50px;
  }

  .list-group {
    display: block;
  }

  .list-group li {
    width: auto !important;
  }

  .problem-left {
    width: 30%;
  }

  .problem-right {
    width: 70%
  }
}

@media screen and (max-width: 520px) {

  .footer-top p,
  .footer-top address {
    float: none;
    width: auto;
  }

  .footer-top .section {
    width: auto;
    float: none;
  }

  footer br {
    content: "";
  }

  footer br:after {
    content: "\2022";
    display: inline-block;
    width: 5px;
    margin: 0 5px;
  }

  .bottomPane {
    margin-top: 0;
  }

  .footer-logo {
    margin: 0;
  }

  .footer-blurb {
    margin: 0 0 60px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
  }

  .process-one,
  .process-two,
  .process-three,
  .process-four {
    width: auto;
    float: none;
    padding: 20px 0;
  }

  .portfolio-grid .item {
    float: none;
    width: auto;
    text-align: center;
  }

  footer p.phone {
    font-size: 1.2em;
  }

  footer .social-media a {
    width: 60px;
  }

  footer .social-media {
    padding: 2em 0 1em;
  }

  .footer-logo {
    width: 90%;
    margin: 20px 0;
  }

  .what-we-do {
    width: auto;
  }

  .columnI,
  .columnII,
  .columnIII {
    float: none;
    width: auto;
    padding: 10px 0;
  }

  .problem-left,
  .problem-right {
    width: auto;
    float: none;
    padding-right: 0;
  }

  .problem-left .service-label {
    position: static;
  }

}


/* contact form overrides */
#Body .bstrap3-material .btn-info {
  background: black;
  color: #ffffff;
  text-shadow: none;
  font-weight: bold;
}

#Body .bstrap3-material textarea,
html .bstrap3-material textarea.form-control {
  border: none;
  border-bottom: 1px solid #ddd;
  padding: 0;
}

#Body .bstrap3-material ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: white;
}

#Body .bstrap3-material ::-moz-placeholder {
  /* Firefox 19+ */
  color: white;
}

#Body .bstrap3-material :-ms-input-placeholder {
  /* IE 10+ */
  color: white;
}

#Body .bstrap3-material :-moz-placeholder {
  /* Firefox 18- */
  color: white;
}

#Body .bstrap3-material .form-control {
  background: rgba(0, 0, 0, 0.22);
  padding: 5px 10px !important;
  font-size: 12px !important;
}

#Body .twoPanes .bstrap3-material input::-webkit-input-placeholder,
#Body .twoPanes .bstrap3-material textarea::-webkit-input-placeholder {
  color: black;
}

#Body .twoPanes .bstrap3-material input::-moz-placeholder,
#Body .twoPanes .bstrap3-material textarea::-moz-placeholder {
  color: black;
}

#Body .twoPanes .bstrap3-material input:-ms-input-placeholder,
#Body .twoPanes .bstrap3-material textarea:-ms-input-placeholder {
  color: black;
}

#Body .twoPanes .bstrap3-material input:-moz-placeholder,
#Body .twoPanes .bstrap3-material textarea:-moz-placeholder {
  color: black;
}