/* Import special Google font */
@import url(http://fonts.googleapis.com/css?family=Great+Vibes);
@import url(http://fonts.googleapis.com/css?family=Play:700);

@media only screen and (min-width: 768px){
  .specialFont{font-family: 'Great Vibes', cursive; }
  h1, #nav-container > li a{font-family: 'Play', 'Trebuchet MS', sans-serif;}
}

/* ~~~~~[ COLORS ]~~~~~ */
body { background: #000 }
.nav, #nav-container li ul, #nav-container li ul li { border: 1px solid #666 }
h1, h2, h3, h4, h5, h6 { color: #fff; }
section div, p, li, label { color: #CCC; }
section a, section a:visited {color: #ED5D20; text-decoration: underline}
section a:hover { color: #F48F27 }
.panel, .panel p, .panel h4{color:#000}
hr{border-top: 2px solid #ccc; border-bottom: 1px solid #999}
.colPrim{color:#ED5D20} /* Primary Accent Color - Orange */
.colSec{color:#241502}  /* Secondary Accent Color - Brown  */
.darkGradient {
   background: #232323;
   background: -moz-linear-gradient(top, #232323 0%, #4c4c4c 30%, #000000 75%, #131313 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #232323), color-stop(30%, #4c4c4c), color-stop(75%, #000000), color-stop(100%, #131313));
   background: -webkit-linear-gradient(top, #232323 0%, #4c4c4c 30%, #000000 75%, #131313 100%);
   background: -o-linear-gradient(top, #232323 0%, #4c4c4c 30%, #000000 75%, #131313 100%);
   background: -ms-linear-gradient(top, #232323 0%, #4c4c4c 30%, #000000 75%, #131313 100%);
   background: linear-gradient(to bottom, #232323 0%, #4c4c4c 30%, #000000 75%, #131313 100%);
   color: #fff;
}
.lightGradient, #nav-container li ul li a {
   background: #eeeeee;
   background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
   background: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
   background: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
   background: -ms-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
   background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
   color: #242424;
}

/* Header Colors */
header, footer{background:#342318;}
header .specialFont{
  color: #f7a55d; 
  font-size: 30px;
  font-size: 3rem;
  font-weight: normal;
  margin: 8px 0 0;
}
.callUs h2, header .mapLink { color: #fff; text-decoration: none}

/* Navigation Colors */
.nav { border-width: 1px 0 }
#nav-container > li a { color: #fff; }
#nav-container li ul {
   border-width: 0 1px 1px;
   border-color: #666;
   border-style: solid
}
#nav-container li ul li { border-bottom: 1px solid #666 }
#nav-container a:hover, li.sfhover, #nav-container li.sfhover > a, #nav-container li ul li a:hover {
  background: #f7591c;
  background: -moz-linear-gradient(top,  #f7591c 0%, #f37431 35%, #f7591c 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7591c), color-stop(35%,#f37431), color-stop(100%,#f7591c));
  background: -webkit-linear-gradient(top,  #f7591c 0%,#f37431 35%,#f7591c 100%);
  background: -o-linear-gradient(top,  #f7591c 0%,#f37431 35%,#f7591c 100%);
  background: -ms-linear-gradient(top,  #f7591c 0%,#f37431 35%,#f7591c 100%);
  background: linear-gradient(to bottom,  #f7591c 0%,#f37431 35%,#f7591c 100%);
}

/* Footer Colors */
footer, footer h4, footer a, footer a:visited { color: #fff }
span.ddsLogoProvider { background: url("https://s3.amazonaws.com/dom-cms/GlobalImages/dds-logo-lt.png") no-repeat scroll 0 0 transparent; }
.ddsLogoProvider a { color: #666 }

/* ~~~~~[ TEXT]~~~~~ */
body, .button, #nav-container li ul { font-family: "Trebuchet MS", Arial, sans-serif; }
h1 {font-size: 30px; font-size: 3rem; padding: 0 0 4px; margin-bottom: 20px; border-bottom: 1px solid #fff;}
h2 {font-size: 20px; font-size: 2rem}
h3 {font-size: 18px; font-size: 1.8rem}
h4, li {font-size: 14px; font-size: 1.4rem}
p {font-size: 16px; font-size: 1.6rem; line-height: 1.4; text-align: justify}
p.small{font-size: 12px; font-size: 1.2rem;}
li { margin-bottom: 2px; }
.allCaps { text-transform: uppercase }
.smallText { font-size: 90% }
.largeText { font-size: 120% }
#InvContainer h6 {
   font-size: 12px;
   font-size: 1.2rem;
   font-weight: bold;
   font-style: normal;
}
.staffDepartment {
    color: #000000;
}
/* ~~~~~[ CONTAINERS ]~~~~~ */
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.orangeLine{background:  url('../images/bkg-top-line.jpg') repeat-x 0 0 #000; height: 34px}
section {width: 95%; max-width: 1100px;}
section.centered{margin-top: 20px}
.aside {
   background: #151515;
   background: -moz-linear-gradient(top, #333 0%, #111 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-top(0%, #333), color-stop(100%, #111));
   background: -o-linear-gradient(top, #333 0%, #111 100%);
   background: -ms-linear-gradient(top, #333 0%, #111 100%);
   background: linear-gradient(to bottom, #333 0%, #111 100%);
   margin: 0 5% 20px;
   padding: 10px;
   border: 1px solid #666;
}

/* ~~~~~[ LAYOUT ]~~~~~ */
.container { padding: 0; }
.row { max-width: none }
.centered { margin: 0 auto !important}
.leftMargin { margin-left: 20px }
.rightMargin { margin-right: 20px }
.bottomMargin { margin-bottom: 20px }
.noMargin{margin: 0 !important}
#InvTitleArea { display: none }

/* ~~~~~[ IMAGES ]~~~~~ */
img { vertical-align: top }
.backpageImg { border: 1px solid #e74f17; }

/* ~~~~~[ EFFECTS: Radius and Shadows ]~~~~~ */
.radiusSmall { border-radius: 5px }
.radius { border-radius: 10px }
.radiusLarge { border-radius: 20px }
.boxShadow {box-shadow: 0 4px 10px rgba(0,0,0,.35); margin-bottom: 20px;}
.boxShadow.small {box-shadow: 0 2px 4px rgba(0,0,0,.75); margin-bottom: 12px;}
.boxShadow.faint {box-shadow: 0 8px 20px rgba(0,0,0,.2); margin-bottom: 30px}
.txtShadow { text-shadow: 0 2px 1px rgba(0,0,0,0.35) }
.txtShadow.small { text-shadow: 0 1px 0 rgba(0,0,0,.75) }

/* ~~~~~[ HEADER ]~~~~~ */
header { padding: 10px 0}
.hdrInner{max-width: 1400px}
.dealerLogo{max-width: 500px}
.callUs {
    background: url('../images/bkg-call-us.jpg') no-repeat 0 0;
    width: 262px;
    height: 70px;
    padding: 10px 0 0 30px;
  margin: 10px auto 0;
}
.callUs h2{font-size:24px; font-size: 2.4rem}
.callUs span {
    display: block;
}
.callUs h2, .callUs a {
    color: #fff;
    text-align: center;
    line-height: 1;
}
.hdrAddress{
  text-align: center;
  margin: 8px auto 0;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
}
.hdrAddress .phone{display:none}
.socials {margin-top: 10px;}
.socials img{ margin-right: 4px}

/* ~~~~~[ FOOTER ]~~~~~ */
footer{margin-top: 20px;}
footer .logo {
    background: url('../images/bkg-top-line.jpg') repeat-x 0 24px #000;
    height: 60px;
}
footer .container .container {margin: 15px 25px;}
footer h4, footer a { font-style: normal }
footer .logo img{width:150px}
.ftrCar {
    position: absolute;
    top: 10px;
    left: 2%;
}

/* ~~~~~ [ NAVIGATION ]~~~~~ */
#nav-container .flyoutNav {
   display: none;
   background: #000;
   text-align: center;
   border: 1px solid #ccc;
   margin-left: 2px;
}
.nav {
  background: url('../images/bkg-nav.jpg') repeat-x 0 0 #242424;
   clear: both;
   margin: 0 auto 20px;
   text-align: center;
   position: relative;
   z-index: 100;
}
#nav-container, #nav-container ul {
   margin: 0 auto;
   z-index: 100;
   position: relative;
}
#nav-container a {
   display: block;
   padding: 0 20px;
}
#nav-container li {
   display: inline-block;
   position: relative;
   margin: 0;
}
#nav-container > li a {
   font-size: 18px;
    font-size: 1.8rem;
    line-height: 2.8;
    text-shadow: 0 2px 1px #000;
}
#nav-container li ul {
   z-index: 5;
   position: absolute;
   width: 200px;
   display: none;
   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.35);
}
#nav-container li ul li { width: 100%; }
#nav-container li ul li:last-child { border-bottom: none; }
#nav-container li ul li a {
   font-weight: normal;
   text-shadow: none;
   text-align: left;
   padding-left: 8px;
   font-size: 14px;
   font-size: 1.4rem;
   text-decoration: none;
   line-height: 2;
}

/* Positioning for Third-level navigation */
#nav-container li ul ul {left: 0px; margin: -28px 0 0 170px;}
#nav-container li:hover ul ul, #nav-container li:hover ul ul ul, #nav-container li:hover ul ul ul ul { display: none; }
#nav-container li:hover ul, #nav-container li li:hover ul, #nav-container li li li:hover ul, #nav-container li li li li:hover ul { display: block; }
.mobileQuickMenu { display: none }

/* Int. Explorer 7 fixes */
.ie7 #SiteContainer .nav .columns { position: absolute }
.ie7 #nav-container { margin-left: 15%; }
.ie7 .nav { height: 30px }
.ie7 #nav-container li {zoom: 1; vertical-align: top; display: block; float: left;}

.ie7 nav .row .columns { z-index: 5 }

/* ~~~~~[ SPECIALS RESET ]~~~~~ */
.InvSpecialFlag h3, .InvSpecialPrice, .InvSpecialName a { font-family: inherit }
.InvSpecialFlag h3 {border: none; background: #242424;}
.InvSpecialPrice, .InvSpecialName a { color: #000; }

/*----[ FORMS ]---- */
input[type="submit"] {
 -webkit-appearance: none;
}

/* ~~~~~[ DOMINION LOGO ]~~~~~ */
span.ddsLogoProvider {display: inline-block; height: 21px; margin-left: 5px; margin-right: 4%; position: relative; top: -3px; vertical-align: middle; width: 71px;}
div.ddsLogoProvider {font-size: 1rem; margin: 30px auto; text-align: center;}

/* ~~~~~[ MEDIA QUERIES ]~~~~~ */
@media only screen and (max-width: 950px) {
  #SiteContainer {width: 100%; margin: 0}
  header h3{font-size: 2.6rem;}
  .gutters {display: none;}
  .dealerLogo.columns{width: 50%; margin: 0 5%;}
  .hdrContact.columns{width: 40%; margin: 0;}
  .ftrCar {top: 50px; width: 200px;}
}
@media only screen and (max-width: 850px){
  .row { min-width: auto }
  #nav-container > li a {padding: 0 10px}  
}
@media only screen and (max-width: 767px) {
  .row .columns {width: 100%; margin: 0  }
  .boxShadow { box-shadow: none }
  header{border-bottom: 2px solid #ccc; margin-bottom: 20px}

  .socials, .hdrAddress .noShow { display: none; }
  .dealerLogo {
    float: left;
    text-align: right;
    width: 58% !important;
  }
  .dealerLogo .specialFont {
    font-size: 2.4rem;
    text-align: center;
    margin-left: 10%;
    font-family: "Times New Roman";
    font-style: italic;
  }
  .hdrContact {
    float: right;
    width: 42% !important;
  }
  .dealerLogo img {
    width: 90%;
    margin: 3% 0 0;
  }
  .callUs {
    background: none;
    height: auto;
    margin: 8px auto 0;
    padding: 0;
    width: auto;
  }
  .callUs h2 { font-size: 2rem; }
  .hdrAddress .line2 { display: block; }


  
  #nav-container .flyoutNav {display: block }
  .sideShowing #SiteContainer {
     left: 266px;
     position: relative;
  }
  nav {
     position: absolute;
     top: 2px;
     left: -268px
  }
  nav.darkGradient { background: none }
  .nav {height: auto; border: none }
  #nav-container {
     height: auto;
     left: 0;
     padding: 0;
     position: absolute;
     text-align: left;
     top: 2px;
     width: 262px;
     z-index: 55;
     background: #333;
  }
  #nav-container li {
     display: block;
     border-bottom: 1px solid #151515
  }
  #nav-container > li a {
     color: #fff;
     font-size: 1.6rem;
     font-weight: bold;
     line-height: 2;
  }
  #nav-container a:hover, li.sfhover, #nav-container li.sfhover > a {
     background: none;
     text-decoration: none;
     color: #fff;
  }
  #nav-container li ul {
     position: relative;
     width: 96%;
     margin: 0 auto;
     box-shadow: none;
  }
  #nav-container li ul li { border-color: #333; }
  #nav-container li ul li a {font-size: 16px;font-size: 1.6rem;}
  #nav-container li ul ul { display: none }
  
  /* Navigation Quick Bar */
  .mobileQuickMenu {
     text-align: center;
     display: block;
     margin: 0 auto;
     padding: 2px 0;
     background: #000;
  }
  .mobileQuickMenu li {
     display: inline-block;
     width: 32.66667%;
     margin: 0;
     background: #ccc;
  }
  .mobileQuickMenu a {
     background: #e2e2e2; /* Old browsers */
     background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* IE10+ */
     background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* W3C */
     font-size: 1.4rem;
     line-height: 2;
     text-align: center;
     display: block;
     margin: 1px;
     color: #666;
     font-weight: bold;
     padding: 2px 4px;
  }
  .mobileQuickMenu a span {
     color: inherit;
     font-size: inherit;
  }
  .mobileQuickMenu img { float: left; }
  li.phoneIcon { display: none }

  footer .three.columns {
    width: 33% !important;
    float: left !important;
  }
  footer .push-six.columns{text-align:left}
  footer .pull-three.columns{text-align:right}
  footer h4 {font-size: 1.8rem;}
  footer .three {font-size: 1.4rem;}
}
@media only screen and (max-width: 600px) {
  .dealerLogo .specialFont {margin: 0}
  .callUs h2 span {display: none;}
  .dealerLogo, .hdrContact {
    float: none;
    text-align: center;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .dealerLogo img {
    width: 75%;
    margin: 10px 0 20px;
  }
  header .mapLink, header .phone {
     background: url('') no-repeat 6px center #000;
     padding: 4px 20px 4px 50px;
     border-radius: 6px;
     display: block;
     border: 1px solid #F35819;
     max-width: 300px;
     margin: 0 auto;
  }
  header .phone { 
    background-image: url('https://s3.amazonaws.com/dom-cms/Site/ef57e369-f582-40d2-9f6e-033b5d5474b5/icons/icon-phone-lt.png');     
    line-height: 1.4;
    font-size: 2rem;
  }
  header .mapLink { background-image: url('https://s3.amazonaws.com/dom-cms/Site/ef57e369-f582-40d2-9f6e-033b5d5474b5/icons/icon-directions-lt.png') }

  h1 { font-size: 2.4rem }
  h2 { font-size: 2rem }
  p { font-size: 1.6rem }
  footer .three.columns {
    width: 100% !important;
    float: none !important;
    text-align: center;
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 520px) {
  .hide-on-phones { display: none }
  li.phoneIcon { display: inline-block }
  .mobileQuickMenu li { width: 24% }
}
@media only screen and (max-width: 360px) {
  header .phone, header .mapLink { margin: 0 4% }
  .mobileQuickMenu li { width: 23% }
  .mobileQuickMenu a span { display: none; }
  .mobileQuickMenu img { float: none; }
}