/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - desktop (default grid)
   1024-768    - tablet landscape
   768-480     - tablet 
   480-less    - phone landscape & smaller
--------------------------------------------*/
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

@media all and (max-width: 1024px) {

    header {
        padding: 20px 0;
        height: 80px;
    }
    
    .header-wrapper {
            padding: 0 20px 20px;
        background-color: #fff;
    }
    
    header nav {
        clear: both;
        max-height: 0;
        transition: max-height .2s ease-out;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        display: block;
        float: none;
    }
    
    .logo {
            max-width: 240px;
        display: inline-block;
        height: 60px;
        overflow: hidden;
    }

    header .menu-icon {
        cursor: pointer;
        display: inline-block;
        float: right;
        padding: 20px 10px;
        position: relative;
        user-select: none;
    }

    header .menu-icon .navicon {
        background: #333;
        display: block;
        height: 4px;
        position: relative;
        transition: background .2s ease-out;
        width: 30px;
    }

    header .menu-icon .navicon:before,
    header .menu-icon .navicon:after {
      background: #333;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%;
    }

    header .menu-icon .navicon:before {
      top: 9px;
    }

    header .menu-icon .navicon:after {
      top: -9px;
    }
    header .menu-btn {
      display: none;
    }

    header .menu-btn:checked ~ nav {
        max-height: 400px;
        float: none;
        background-color: #fff;
        width: 100%;
        margin-top: 20px;
        display: block;
    }

    header .menu-btn:checked ~ .menu-icon .navicon {
      background: transparent;
    }

    header .menu-btn:checked ~ .menu-icon .navicon:before {
      transform: rotate(-45deg);
    }

    header .menu-btn:checked ~ .menu-icon .navicon:after {
      transform: rotate(45deg);
    }

    header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
    header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
      top: 0;
    }
    
    nav a {
        display: block;
    }
    
    section {
        padding: 40px 0;
    }
    .hero {
        margin-top: 70px;
    }
    
    .hero .inner-section, .hero-text .orange {
        display: block;
    }
    .hero-text, .hero-text h1, .hero-image, .gridx2 {
        text-align: center;
    }
    .hero-image {
        margin-top: 30px;
    }
    .gridx2.mw .grid-image {
        order: 0;
    }
    .gridx3 {
        vertical-align: top;
    }
    
    .process {
        height: 290px;
        overflow: hidden;
    }
    .scanner .gridx2 {
        display: block;
    }
    
    .benefit-wrapper {
        display: block;
    }
    
    .benefit-box {
        width: 100%;
        margin-bottom: 40px;
    }
    
    .partner-with-us .inner-section {
        text-shadow: 2px 2px 4px rgb(0,0,0, 0.5);
    }
    
    .footer-column:first-child {
        width: 33% !important;
    }
    
} /***** END MAX-WIDTH 1024px *****/

@media all and (max-width: 768px) {
    
    .hero img {
        display: block;
        width: 100%;
    }
    
    .gridx2 {
        display: block;
    }
    
    .gridx3 {
        display: block;
    }
    
    .process {
        height: auto;
        overflow: hidden;
    }
    
    .grid-image {
        margin-top: 40px;
    }

    footer {
        padding: 60px 40px 40px;
    }
    
    footer .footer-inner {
        padding: 0;
        text-align: center;
    }
    
    .footer-column {
        text-align: center;
        width: 50% !important;
    }
    
    .footer-logo {
        padding: 0 0px 30px;
        text-align: center;
    }
    
    .customer-logos img {
        margin: 0 25px 40px;
    }
    
    section h1 {
        font-size: 40px;
    }
    
    .partner-reason {
        background: url(../img/plus-icon.png) 15px 8px no-repeat;
        background-size: 16px;
        font-size: 20px;
        font-weight: 400;
        margin-top: 20px;
        padding-left: 50px;
    }
    
    .partner-with-us h1 {
        text-align: center;
    }
    
    .meet-needs-contact h1 {
        font-size: 31px;
        margin: 0;
    }
    
    table.report-table {
    border: 0;
  }

  table.report-table caption {
    font-size: 1.3em;
  }
  
  table.report-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.report-table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table.report-table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: left;
  }
  
  table.report-table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table.report-table td:last-child {
    border-bottom: 0;
  }
    
} /***** END MAX-WIDTH 768px *****/

@media all and (max-width: 540px) {
    
    .hero-text h1 {
        font-size: 40px;
    }
    
    .hero-text h1 span {
        font-size: 40px;
    }
    
    .meet-needs-contact .inner-section {
        display: block;
        text-align: center;
    }
    
    .meet-needs-contact h1 {
        font-size: 30px;
        text-align: center;
        margin: 0 0 20px;
    }
    
    .footer-column:first-child {
        width: 100% !important;
    }
    
    .footer-column {
        width: 100% !important;
    }
    .scan-input input {
        font-size: 16px;
    }
    
    .scan-input select {
        font-size: 16px;
    }
    
} /***** END MAX-WIDTH 540px *****/


@media all and (max-width: 480px) {
    .customer-logos img {
        margin: 0 auto 25px;
        display: block;
    }
    
    .partner-reason {
        background: url(../img/plus-icon.png) 0 8px no-repeat;
        background-size: 16px;
        padding-left: 30px;
    }
    
    .scan-input input {
        font-size: 14px;
        width: 55%
    }
    
    .scan-input select {
        font-size: 14px;
        width: 45%;
    }
    
    .loading {
        padding: 10px;
    }
    
    .loading span {
        font-size: 14px;
    }
    
} /***** END MAX-WIDTH 480px *****/


@media all and (max-width: 320px) {
    
    .logo a, .logo img {
        width: 220px;
    }
    
    header .menu-icon {
        padding: 16px 10px;
    }
    
    .hero-text h1 {
        font-size: 28px;
    }
    
    .hero-text h1 span {
        font-size: 30px;
    }
    
    section h1 {
        font-size: 26px;
    }
    
    .grid-text h2 {
        font-size: 26px;
    }
    
    .meet-needs-contact h1 {
        font-size: 18px;
    }
    
    .scan-input {
        display: block;
    }
    
    .scan-input input {
        font-size: 14px;
        width: 100%;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;    
        margin-bottom: 20px;
    }
    
    .scan-input select {
        font-size: 14px;
        width: 100%;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    
    .footer-social a {
        width: 30px;
        height: 30px;
        margin: 0 8px;
    }
    
} /***** END MAX-WIDTH 320px *****/