/*------------------\
  #MEDIA QUERIES
\------------------*/
@media (max-width: 550px) {
  .tool-overview__section {
    background-color: rgba(255,255,255,0.75);
    background: transparent;
    margin-top: 80px;
    padding: 0;
  }

  h1 {
    margin-bottom: 1rem;
    font-size: 3.5rem;
  }

  .sm-list__header--link {
    margin-right: 0.5em;
    font-size: 1.2rem;
  }

  .form-container {
    padding: 3em 0;
  }

  .btn-point-right:after {
    display: none;
  }

  .tools-overview__img {
    display: none;
  }

  .tools-overview__logo {
    border-left: none;
    padding-left: 0;
  }

  .tools-overview__opening {
      padding: 40px 0;
  }

  .tools-overview__opening {
    font-size: 3rem;
  }

  .tools-overview__nav.main li {
    border-right: none;
  }

  .site-header__text.large {
    font-size: 2.5rem;
    margin-bottom: 5px;
  }
  .site-header__sub-text.large {
    font-size: 3rem;
    line-height: 1;
  }

  p.center {
    margin: 2% 0 4%;
  }

  .tools-overview .orange {
    margin: 25px 0;
    display: block;
    line-height: 1;
    font-size: 2.5rem;
  }

  .site-lsa .button {
    max-width: 100%;
  }

  .site-lsa p {
    text-align: center;
    font-size: 0.9em;
  }

  .site-header__text,
  .site-header__sub-text {
    text-align: center;
  }

  .lsa-logo {
    padding: 20px 0;
  }

  .tools-overview__nav.main li {
    padding: 0; 
  }

  .tools-overview__nav.sub li {
     padding: 0; 
  }

  #drill .icon {
    background: url(../images/icons-small.png) no-repeat 4px -10px;
  }
  #drill:hover .icon,
  #drill.selected .icon {
    background: url(../images/icons-small.png) no-repeat 4px -74px;
  }

  #circ-saw .icon {
    background: url(../images/icons-small.png) no-repeat -91px -9px;
  }
  #circ-saw:hover .icon,
  #circ-saw.selected .icon {
    background: url(../images/icons-small.png) no-repeat -92px -76px;
  }

  #driver .icon {
    background: url(../images/icons-small.png) no-repeat -183px -8px;
  }
  #driver:hover .icon,
  #driver.selected .icon {
    background: url(../images/icons-small.png) no-repeat -183px -73px;
  }

  #recip-saw .icon {
    background: url(../images/icons-small.png) no-repeat -278px -9px;
  }
  #recip-saw:hover .icon,
  #recip-saw.selected .icon {
    background: url(../images/icons-small.png) no-repeat -278px -75px;
  }

  #flashlight .icon {
    background: url(../images/icons-small.png) no-repeat -360px -9px;
  }
  #flashlight:hover .icon,
  #flashlight.selected .icon {
    background: url(../images/icons-small.png) no-repeat -360px -73px;
  }

  #overview span {
    background: url(../images/icons-small.png) no-repeat -18px -161px;
  }
  #overview.selected span {
    background: url(../images/icons-small.png) no-repeat -18px -213px;
  }

  #photos span {
    background: url(../images/icons-small.png) no-repeat -122px -161px;
    margin-left: -26%;
  }
  #photos.selected span {
    background: url(../images/icons-small.png) no-repeat -122px -213px;
  }

  #videos span {
    background: url(../images/icons-small.png) no-repeat -208px -163px;
    margin-left: -26%;
  }
  #videos.selected span {
    background: url(../images/icons-small.png) no-repeat -208px -213px;
  }
  .tools-overview__small-img {
    display: block;
  }
}

@media (min-width: 550px) {
  .sm-list__footer {
    float: right;
  }

  .site-footer__logo {
    margin: 0;
  }

  .site-footer {
    text-align: left;
  }

  .tools-overview__logo {
    width: 200%;
  }
}

@media (min-width: 750px) {}

@media (min-width: 860px) {
  .tools-overview__logo {
    width: 225px;
  }

  .tools-overview__details {
    margin-top: 80px;
  }

  .tools-overview__nav.sub a {
    display: block;
  }
  
  .tools-overview__nav.main b {
    display: block;
  }
  .sm-list__header {
    padding-top: 25px;
    float: right;
  }

  .site-banner .container {
    margin-top: -80px;
  }

  .site-header__logo {
    position: relative;
    top: 20px;
  }

  .site-header {
    margin-top: -2.5em;
    padding-top: 20px;
  }

  .tool-overview__section {
    background: transparent;
    padding: 0;
  }
}