* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box; }

/*USE FOR BOTH Home and Content Styles*/
/*.HeaderOTA {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 180px;
    background-image: url('/media/images/header-logo-Happy-Car-Place-W.png');
    background-repeat: no-repeat;
    background-position: center center;
}
.HeaderOTA:hover {
    background-image: url('/media/images/header-logo-Happy-Car-Place-C.png');
}
.HeaderABody {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 236px;
    background-image: url('/media/images/header-logo-Olson-Autobody-W.png');
    background-repeat: no-repeat;
    background-position: center center;
}
.HeaderABody:hover {
    background-image: url('/media/images/header-logo-Olson-Autobody-C.png');
}


.HeaderSour {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 103px;
    background-image: url('/media/images/header-logo-Sourdough-W.png');
    background-repeat: no-repeat;
    background-position: center center;
}
.HeaderSour:hover {
    background-image: url('/media/images/header-logo-Sourdough-C.png');
}
*/
.HeaderOTA {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0; }

.HeaderOTA .OTA1 {
  display: inline-block; }

.HeaderOTA .OTA2 {
  display: none; }

.HeaderOTA:hover .OTA1 {
  display: none; }

.HeaderOTA:hover .OTA2 {
  display: inline-block; }

.HeaderABody {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0; }

.HeaderABody .Autobody1 {
  display: inline-block; }

.HeaderABody .Autobody2 {
  display: none; }

.HeaderABody:hover .Autobody1 {
  display: none; }

.HeaderABody:hover .Autobody2 {
  display: inline-block; }

.HeaderSour {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0; }

.HeaderSour .Sour1 {
  display: inline-block; }

.HeaderSour .Sour2 {
  display: none; }

.HeaderSour:hover .Sour1 {
  display: none; }

.HeaderSour:hover .Sour2 {
  display: inline-block; }

#OTAGoogleMap {
  height: 410px;
  width: 100%; }

/* CSS Document */
#FA-Home-Banner #Banner-Desktop {
  display: block;
  text-align: center; }

#FA-Home-Banner #Banner-Mobile {
  display: none; }

#FA-Home-Banner #Banner-Desktop .ImageSize {
  margin: 0 auto; }

#FA-Home-Banner #Banner-Desktop .FullWidth, #FA-Home-Banner #Banner-Desktop .FullWidth img {
  width: 100%; }

/*1700*/
/*1440*/
/*1280*/
/*960*/
/*768*/
@media screen and (max-width: 782px) {
  #FA-Home-Banner #Banner-Desktop {
    display: none; }

  #FA-Home-Banner #Banner-Mobile {
    display: block; } }
/*600*/
/*480*/
/*340*/
/* CSS Document */
/*$bg4: "https://dl.dropbox.com/s/nkwuv9jz8i99309/pic.jpg";*/
#HomAcc2 {
  width: 100%; }

#HomAcc2 ul {
  list-style: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  overflow: hidden; }
  #HomAcc2 ul li {
    position: relative;
    flex: .5 1 0;
    min-width: 0;
    height: 600px;
    opacity: 0.4;
    background-size: cover;
    background-position: top center;
    cursor: pointer;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    /*&:nth-child(4) {
      background: url($bg4) top center no-repeat;
    }*/ }
    #HomAcc2 ul li:hover, #HomAcc2 ul li.is-active {
      flex: 3 1 0;
      opacity: 1;
      -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out; }
    #HomAcc2 ul li:hover ~ li {
      opacity: 0.4; }
    #HomAcc2 ul li:nth-child(1) {
      background: url("/media/images/home-acc-OTA.png") top center no-repeat; }
    #HomAcc2 ul li:nth-child(2) {
      background: url("/media/images/home-acc-autobody.png") top right no-repeat; }
    #HomAcc2 ul li:nth-child(3) {
      background: url("/media/images/home-acc-sourdough.png") top center no-repeat; }
    #HomAcc2 ul li .VerticalLabel {
      position: absolute;
      left: 30px;
      bottom: 0px;
      z-index: 3;
      color: #fff;
      font-size: 1.4rem;
      font-weight: 700;
      width: 600px;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
      transform: rotate(-90deg);
      transform-origin: left bottom;
      background-color: #1c4884;
      transform: rotate(-90deg);
      transform-origin: left bottom;
      background-color: #1c4884;
      -moz-transition: all 0.35s ease-in-out;
      -ms-transition: all 0.35s ease-in-out;
      -webkit-transition: all 0.35s ease-in-out;
      transition: all 0.35s ease-in-out; }
    #HomAcc2 ul li .ContentBG {
      background-image: url("/media/layout/bg_40_black.png");
      background-repeat: repeat; }
    #HomAcc2 ul li .HomAcc2_Content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 0px;
      /*background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, .08));*/
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      -moz-transition: all 0.35s ease-in-out;
      -ms-transition: all 0.35s ease-in-out;
      -webkit-transition: all 0.35s ease-in-out;
      transition: all 0.35s ease-in-out; }
      #HomAcc2 ul li .HomAcc2_Content p {
        margin: 20px 0px 10px 80px;
        padding: 40px 0 0;
        color: #fff;
        font-size: 24px;
        line-height: 32px; }
      #HomAcc2 ul li .HomAcc2_Content img {
        margin: 0 60px 60px 80px; }
      #HomAcc2 ul li .HomAcc2_Content A {
        margin: 40px 80px; }
    #HomAcc2 ul li:hover .HomAcc2_Content, #HomAcc2 ul li.is-active .HomAcc2_Content {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto; }

#HomAcc2 ul:hover li:not(:hover) {
  flex: .5 1 0;
  opacity: 0.4; }

/** Add cool filter efects **/
#HomAcc2 ul li {
  /*
    &:nth-child(1)::before { background-color: rgba(255, 87, 34, .2)}
    &:nth-child(2)::before { background-color: rgba(76, 175, 80, .25)}
    &:nth-child(3)::before { background-color: rgba(33, 150, 243, .25)}
    &:nth-child(4)::before { background-color: rgba(156, 39, 176, .2)}
      */ }
  #HomAcc2 ul li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    z-index: 1;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; }

#HomAcc2 ul li:hover::before,
#HomAcc2 ul li.is-active::before {
  width: 100%;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }

#HomAcc2 input[type="checkbox"] {
  display: none; }

#HomAcc2 ul:hover li:not(:hover) .HomAcc2_Content {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none; }

/** Layout fixes **/
#HomAcc2 input[type="checkbox"] {
  margin-left: calc((100% - 1160px)/2); }

@media (max-width: 1240px) {
  #HomAcc2 input[type="checkbox"] {
    margin-left: 35px; } }
/*1700*/
/*1440*/
/*1280*/
/*960*/
/*768*/
@media screen and (max-width: 782px) {
  #HomAcc2 ul {
    display: block; }

  #HomAcc2 ul li {
    display: block;
    width: 100%;
    height: 120px;
    margin-bottom: 8px;
    opacity: 1; }

  #HomAcc2 ul li.is-active {
    height: 320px; }

  #HomAcc2 ul li .HomAcc2_Content {
    opacity: 0;
    pointer-events: none; }

  #HomAcc2 ul li.is-active .HomAcc2_Content {
    opacity: 1;
    pointer-events: auto; } }
/*600*/
/*480*/
/*340*/
/* CSS Document */
/*1700*/
/*1440*/
/*1280*/
/*960*/
/*768*/
/*600*/
/*480*/
/*340*/
/* CSS Document */
/*1700*/
/*1440*/
/*1280*/
/*960*/
/*768*/
/*600*/
/*480*/
/*340*/