/* -----------------------------------------
Mind the Gap
Based on 980px row, 12 column grid with 10px gutter ( ((100-number of gutters) / 12) x column name )
----------------------------------------- */
.column, .columns {
    margin-left: 1%;
}

#main .row .one {width: 7.41666666667%;} 
#main .row .two {width: 15.8333333333%;}
#main .row .three {width: 24.25%;} 
#main .row .four {width: 32.6666666667%;} 
#main .row .five {width: 41.25%;} 
#main .row .six {width: 49.5%;}
#main .row .seven {width: 57.75%;}
#main .row .eight {width: 66.33%;}
#main .row .nine {width: 74.25%;}
#main .row .ten {width: 82.5%;}
#main .row .eleven {width: 90.75%;}
#main .row .twelve {width: 100.0%;}


/* -----------------------------------------
Homepage overrides and styles
----------------------------------------- */
#main > .container h1 {
    padding-top: 0;
}

#main {
  background: none;
  border-radius: 0;
  margin-top: 0;
}

#main .container {
    padding: 0;
}

ul { list-style: none; }

li { margin: 0 0 4px 0; }

/* LINKS ///////////////////////////////////////////// */
a, a:active, a:visited { color: #b01117; text-decoration: none; }
a:hover { color: #fff;}


/* HEADERS ///////////////////////////////////////////// */
h1, h2, h3 {
  padding-bottom: 4px;
  border-bottom: 1px solid #b01117;
  color: #222;
  font-size: 18px;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: normal;
}

/* -----------------------------------------
Mind the Gap in Hero Container
----------------------------------------- */
.heroContainer {
  margin-bottom: 10px;
}

.heroContainer .eight {width: 66.28%;} 

.heroContainer .columns {
}

.heroContainer .columns:first-child {
}

/* -----------------------------------------
FLEXSLIDER
----------------------------------------- */
.flexslider {
    border: 1px solid #c2c2c2;
  text-align:center
    margin-top: 8px;
    padding: 20px;
    max-width: 940px;
    background: #e8e8e8; /* Old browsers */
    background: -moz-linear-gradient(top, #e8e8e8 0%, #adadad 19%, #7f7f80 28%, #d9d9d9 49%, #898989 77%, #ededed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(19%,#adadad), color-stop(28%,#7f7f80), color-stop(49%,#d9d9d9), color-stop(77%,#898989), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e8e8e8 0%,#adadad 19%,#7f7f80 28%,#d9d9d9 49%,#898989 77%,#ededed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e8e8e8 0%,#adadad 19%,#7f7f80 28%,#d9d9d9 49%,#898989 77%,#ededed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e8e8e8 0%,#adadad 19%,#7f7f80 28%,#d9d9d9 49%,#898989 77%,#ededed 100%); /* IE10+ */
    background: linear-gradient(to bottom, #e8e8e8 0%,#adadad 19%,#7f7f80 28%,#d9d9d9 49%,#898989 77%,#ededed 100%); /* W3C */
}

.flex-control-nav {
    bottom: 35px;
}

.flex-control-nav li a {
    border-radius: 8px 8px 8px 8px;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
    background: #7c7a7c;
}

.flexslider .slides > li {
    margin-bottom: 0;
}

.flex-control-nav li a.active {
    background: #B01117; 
}

.flex-control-nav li a:hover {
    background: #fff; 
}


/* -----------------------------------------
Tiles
----------------------------------------- */
.tilesContainer { margin-top: 10px; }
.tile { position: relative; font-size: 18px; font-size: 1.8rem; margin-top: 8px;}
.tile:first-child { margin-top: 0;}
.tile img {max-width: 100%;} /*300px*/
.tile img:hover {opacity: 0.9;} 
.tile a { color: #c9e9f6; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);}
.tile a:hover { color: #fff;}
.tile .showMobile {display:none;}

.tile.first img {
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.tile.last img {
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

.tilesMiddle .tile {
    width: 100%;
    height: auto;
    background: #222 url('https://s3.amazonaws.com/dom-cms/Site/158def80-328a-4347-ad7b-cef9468a339d/images/backgrounds/debut_darker.png');
}

.tilesBottom .tile {
    width: 100%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.10);
    text-align: center;
}

.tilesBottom .tile img {
    width: 60%;
    height: auto;
    padding: 20px;
}


.homepageVideo { margin: 20px 0;}

/* -----------------------------------------
Media Queries
----------------------------------------- */

@media only screen and (max-width: 980px) {    
   .tile { margin-top: 11px;}
   .tile:first-child { margin-top: 0;}
   .flexslider { padding: 10px; }
   .flex-control-nav {bottom: 20px;}
}

@media only screen and (max-width: 800px) {    
   .tile { font-size: 14px; font-size: 1.4rem;}
   h1, h2, h3 { 
    font-size: 16px;
    font-size: 1.6rem;
  }
  .flexslider { max-width: 760px; }
}

@media screen and (max-width: 768px) and (orientation: portrait) { /* ipad portrait */
  .tile { margin-top: 13px;}
  .tile:first-child { margin-top: 0;}
}

@media only screen and (max-width: 768px) {    
  .flexslider { padding: 0px; }
  .flex-control-nav {bottom: 10px;}
}


@media screen and (max-width: 767px) {
   .paddingAll { 
     padding: 16px 20px 0;
   }

  header .container { 
    padding: 0;
  }

  .tilesContainer .columns:last-child {
    float: right;
  }

  .tilesContainer .four.columns {
    float: left;
    margin-left: 1%;
    width: 31.6667% !important; /* prevent foundation from spanning width to 100% and float none  32.6667 - 1*/
  }

  .vehicleSpecials, .searchInventory {
    margin: 0 10px 10px;
  }

  .column, .columns {
    margin-left: 0;
  }

  .borderRadius.heroContainer, .borderRadius.dealerInfo, .borderRadius.dealerInfo, footer  {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  }

  .homepageVideo { margin: 0 10px;}

  .flexslider .slides img {
    margin: 0 auto;
  }

}


@media only screen and (max-width: 480px) {
  .heroContainer {
    padding-bottom: 10px;
  }

  .flex-control-nav {
    bottom: 5px;
  }

  .flex-direction-nav li a { background: none;}

  .tilesContainer .four.columns { /* undo foundation override set at 767px*/
    float: none;
    margin: 8px auto;
    width: 90% !important; 
  }

  .tile .showMobile {display:block; margin-top: 6px;}
  .tile img {display: none;}

  .tile {
    float: none;
    margin-left: 0;
    width: 100%;
  }

  .tile a {
    text-align: center;
    display: block;
    height: 30px;
    text-decoration: none; 
    color: #fff; 
  }

  .tilesTop .tile a {
    border: 1px solid #840304;
    background: #b01117;
    background: -webkit-gradient(linear, left top, left bottom, from(#b01117), to(#940e13)); /* webkit */
    background: -moz-linear-gradient(top,  #b01117,  #940e13); /* FF */
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.5);
  }

  .tilesTop .tile a:hover {
    background: #940e13;
  }

  .tilesMiddle .tile a {
    border: 1px solid #252525;
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.75);
  }

  .tilesMiddle .tile a:hover {
    background: #313131;
  }

  .tilesBottom .tile a {
    color: #333;
    border: 1px solid #cfcfcf;
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.5);
  }

  .tilesBottom .tile a:hover {
    background: #c3c3c3;
  }

}