/*--- Grovedale Car Care ---*/

/* ==========================================================================
   Global Styles
   ========================================================================== */

      #Body {
         background: #ebebeb;
      }

      .fl {
         float: left;
         text-align: left;
      }

      h1, h2, h3, h4, h5, h6 {
      font-weight: 600;
      color: #333;
   }

   a, a:link, a:visited, a:active {
      color: #2ab573;
   }

   .container h1, h2, h3, h4, h5 {
      font-weight: 600 !important;
   }

   .container p, p {
      margin: 0 0 25px 0;
      color: #999;
   }

   .dates h2 {
      font-family: 'Main', sans-serif;
      font-weight: 400;
      padding: 0 20px 0 0;
   }

   .visible-mobile {
      display: none;
   }

   .hidden-mobile {
      display: inherit !important;
   }

   blockquote {
      width: 100%;
      padding: 50px;
      text-align: center;
      font-family: 'Main', sans-serif;
      font-style: italic;
      font-size: 24px;
      line-height: 35px;
      background: #fff;
      color: #999;
      border-left: none;
         -webkit-box-sizing: border-box;
         moz-box-sizing: border-box;
         box-sizing: border-box;
   }

/* ==========================================================================
   Header
   ========================================================================== */

      #siteHeadouter {
         background: #2ab573;
      }

      .dates {
         width: 60%;
         float: right;
      }

      .dates h2 {
         height: 44px;
         line-height: 44px;
         padding: 0 20px;
         -webkit-box-sizing: border-box;
         moz-box-sizing: border-box;
         box-sizing: border-box;
      }

   .dates h2 em {
      color: #2ab573 !important;
      font-size: 45px;
   }

      a.phone-no {
         color: #f5ee31;
         font-family: 'Heading', sans-serif;
      }

      a.address-link {
      font-size: 16px;
      font-family: 'Main', sans-serif !important;
      font-weight: 400;
      color: #fff !important;
      padding-left: 0px;
      float: left;
      text-align: left;
      line-height: 50px;
   }

      /*--- Navigation ---*/

      .navbar .nav > li > a {
         color: #fff;
      }

      .navbar .nav > li:last-child > a {
         color: #fff;
         padding-right: 0;
      }

      .navbar .nav>li>a:focus, .navbar .nav>li>a:hover {
         color: #f5ee31;
      }

      .navbar .nav>.active>a, .navbar .nav>.active>a:hover, .navbar .nav>.active>a:focus {
         color: #f5ee31;
      }

/* ==========================================================================
   Global Page Styles
   ========================================================================== */

   .DnnModule-DNN_HTML img {
      -webkit-border-radius: 0;
      moz-border-radius: 0;
      border-radius: 0;
   }

   .white-bg {
      background: #ebebeb;
      color: #666;
      padding-bottom: 75px;
   }

   .contentPane {
      margin-left: 0 !important;
   }

   .contentPane p, .contentPane h2, .contentPane h3 {
      max-width: 940px;
      margin: 0 auto 25px !important;
   }

   .contentPane h2 {
      max-width: 940px;
      margin-top: 25px;
   }

   .container div:first-child.row {
      margin-top: 50px;
   }

   #dnn_bannerPane p {
      margin-bottom: 0;
   }

   #dnn_asidePaneLeft p, #dnn_asidePaneRight p {
      color: #999;
   }

   #dnn_asidePaneLeft { 
      /*margin-top: 55px;*/
   }

   .threeColLeftPane h2 {
      font-family: 'Heading', sans-serif;
   }

/* ==========================================================================
   Footer
   ========================================================================== */

      #footer {
         background: #222;
      }

      .footerPaneRight img {
         max-height: 125px;
         max-width: 100%;
      }

      .footerPane p:last-child {
         margin-bottom: 0;
      }

      #footer p {
         color: #999;
      }



/* ==========================================================================
   Home Page Styles
   ========================================================================== */

      .service-row {
         background: #000;
      }

      .service-container {
         padding: 50px 25px;
      }

      .service-title-number {
         width: 20%;
         float: left;
         font-size: 46px;
         color: #2ab573;
         font-family: 'Heading', sans-serif;
         display: inline;
         height: 46px;
      }

      .service-title {
         float: right;
         width: 80%;
      }

      .service-title a {
         font-size: 24px;
         color: #ccc;
      }


/* 
   Call to Action
   ========================================================================== */

      .cta-dig, .aside-cta {
         background: url(Images/cornerness.png) no-repeat top left transparent;
      }

      .cta-dig {
         padding-bottom: 25px;
      }

      .cta-inner {
         background: #2ab573;
         padding: 25px;
         margin-bottom: 10px;
         min-height: 170px;
         -webkit-box-sizing: border-box;
         moz-box-sizing: border-box;
         box-sizing: border-box;
      }

      .cta-dig ul {
         text-align: left;
      }

      .cta-dig ul li {
         list-style: disc;
         color: #2ab573;
      }

      .cta-dig h4 {
         text-align: left;
         font-size: 24px;
         font-family: 'Heading', serif;
         color: #fff;
      }

      .cta-dig h3, .cta-dig h3 a {
         font-family: 'Main', sans-serif;
         font-size: 20px;
         color: #999;
      }

      .cta-dig p {
         text-align: right;
         color: #2ab573;
         margin-bottom: 0;
      }

      .cta-dig .art-button, .aside-cta .art-button {
         border: 1px solid #2ab573;
         color: #2ab573;
         background: transparent;
         -webkit-border-radius: 0;
         moz-border-radius: 0;
         border-radius: 0;
      }

      .cta-dig .art-button:hover, .aside-cta .art-button:hover {
         background: #2ab573;
         color: #fff;
      }

      .aside-cta {
         padding: 25px;
         text-align: right;
      }

      .aside-inner {
         padding: 25px;
         background: #ededed;
         margin-bottom: 10px;
      }

      .aside-cta h2 {
         font-size: 32px;
         line-height: 32px !important;
         margin-bottom: 0 !important;
         color: #2ab573;
      }

      .aside-cta .art-button {
         display: inline-block;
         float: right;
      text-transform: uppercase;
      font-size: 12px;
      line-height: 18px;
      transition: background .15s ease-in-out;
      -moz-transition: background .15s ease-in-out;
      -webkit-transition: background .15s ease-in-out;
      }


/* 
   Slider
   ========================================================================== */

      #dnn_bannerPane {
         -webkit-box-sizing: border-box;
         moz-box-sizing: border-box;
         box-sizing: border-box;
         /*padding: 20px 0;*/
         background: transparent;
      }

      .DnnModule-DreamSlider {
         background: #eee;
      }


/* ==========================================================================
   Body Page Styles
   ========================================================================== */

      .contentPane .row .two-thirds h2 {
         font-size: 32px;
         line-height: 32px;
         color: #2ab573;
      }

      #dnn_bannerPane h2 {
         font-size: 24px;
         line-height: 32px;
         color: #fff;
      }


/* ==========================================================================
   Contact Form Styles Light
   ========================================================================== */

      .bstrap30 .col-sm-9, .bstrap30 .col-sm-3 {
         width: 100%;
      }

      .bstrap30 .form-control {
         max-width: 100% !important;
         -webkit-border-radius: 0 !important;
         moz-border-radius: 0 !important;
         border-radius: 0 !important;
      }

      .bstrap30 .form-horizontal .control-label {
         text-align: left !important;
         width: 100%;
         font-size: 16px;
         padding-bottom: 5px;
      }

      .bstrap30 label, .bstrap30 label.required {
         font-weight: 400;
      }

      .bstrap30 .col-sm-offset-3 {
         margin-left: 0;
      }

      .bstrap30 textarea.form-control {
         height: 125px;
      }

      .bstrap30 .btn-info {
         border: 1px solid #ebebeb;
         color: #fff;
         padding: 15px 30px;
         float: right;
         background: #2ab573;
         -webkit-border-radius: 5px;
         moz-border-radius: 5px;
         border-radius: 5px;
      text-transform: uppercase;
      font-size: 12px;
      line-height: 18px;
      transition: background .15s ease-in-out;
      -moz-transition: background .15s ease-in-out;
      -webkit-transition: background .15s ease-in-out;
      }

      .bstrap30 .btn:hover, .bstrap30 .btn:focus {
         background: #2ab573;
         color: #fff;
      }



/* ==========================================================================
   Responsive Styles
   ========================================================================== */

      @media (min-width: 2560px) {
         #siteHeadouter {
            background-size: cover;
         }
      }

      @media (min-width: 1199px) {

         .navbar .nav>li>a {
            padding: 10px 41px 10px;
            -webkit-border-radius: 0;
            moz-border-radius: 0;
            border-radius: 0;
         }

         .navbar .nav>li:last-child>a {
         }

      }

      @media (min-width: 980px) {

         .brand img {
            padding-top: 25px;
         }

         #Body {
            background: url(Images/body-bg.jpg) no-repeat top center #eee;
         }

         #siteHeadouter {
            background: url(Images/Headouter-bg.jpg) no-repeat top center #333;
         }
         #siteHeadinner {
            padding: 0 0 30px;
         }

         .dates {
            padding: 25px 0 0px 25px;
            margin-bottom: 7px;
            background: transparent;
            -webkit-box-sizing: border-box;
            moz-box-sizing: border-box;
            box-sizing: border-box;
         }

         #siteHeadouter {

         }

         .dates {
            /*margin-top: -111px;*/
            margin-right: 0;
            width: 50%;
         }

         .dates h2 {
            padding: 0;
         }

         .nav-collapse {
            /*margin-top: -70px !important;*/
         }

         .navbar .nav {
            margin-right: 0;
         }

      }

      @media (min-width: 768px) {

         #Body {
            /*background: url(Images/body-bg.jpg) no-repeat top center #eee;*/
         }

         #siteHeadouter {
            /*background: url(Images/Headouter-bg.jpg) no-repeat top center #333;*/
         }

         a.phone-no {
            vertical-align: text-bottom;
            height: 45px;
            line-height: 45px;
            display: inline-block;
         }

         a.phone-no span.hidden-mobile {
            font-size: 32px;
            line-height: 32px;
            display: block;
            vertical-align: text-bottom;
         }

      }

      @media (min-width: 40rem) {
      .row .half {
         padding-right: 2rem;
      } 
   }

   @media (max-width: 1199px) and (min-width: 980px) {

      blockquote {
         font-size: 18px;
         line-height: 26px;
      }
      .navbar .brand {
         max-width: 420px;
      }
      .navbar .nav>li>a {
         padding: 10px 30px 10px;
      }
      .nav-collapse {
         margin-top: -35px !important;
      }
      .dates {
         /*margin-top: -108px;*/
         width: 55%;
         margin-right: 0;
         /*margin-bottom: -12px;*/
      }
      a.address-link {
         font-size: 14px;
         display: block;
         margin-top: -1px;
      }
      .dates h2 {
         /*padding: 0px 20px;*/
      }
   }

   @media (max-width: 979px) {

         #Body {
            background: url(Images/body-bg-mobile.jpg) no-repeat top center #eee;
         }

         #siteHeadouter {
            background: url(Images/body-bg-mobile.jpg) no-repeat top center #2ab573;
         }

      blockquote {
         font-size: 18px;
         line-height: 26px;
         display: inline-block;
      }

      .brand.hidden-desktop {
         max-width: 60%;
         line-height: 80px;
      }

      .nav-collapse, .nav {
         background: transparent;
      }

      .navbar .btn-navbar {
         margin-top: 20px;
      }

      .navbar .btn-navbar, .navbar .btn-navbar:hover, .navbar .btn-navbar:active {
         background: #222 !important;
         color: #fff;
      }

      .nav-collapse .nav > li a, .nav-collapse .dropdown-menu a, .navbar .nav > li:last-child > a  {
         color: #fff;
         background: #555;
      }

      .navbar .nav>.active>a, .navbar .nav>.active>a:hover, .navbar .nav>.active>a:focus {
         background: #222;
         color: #fff;
      }

      .nav-collapse .nav>li>a:hover, .nav-collapse .nav>li>a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
         background: #222;
         color: #fff;
      }

      .navbar .nav > li.active:last-child > a:active {
         background: #222 !important;
         color: #fff;
      }

      .white-bg {
         /*margin-top: 0px;*/
      }
      .dates {
         width: 40%;
         margin-bottom: 10px;
      }
      .dates h2 {
         padding: 0;
         padding-bottom: 30px;
      }
      a.address-link {
         display: none !important;
      }
      #dnn_bannerPane h2 {
         padding: 0;
         color: #333;
      }
      #dnn_contentLeft h2, #dnn_contentRight h2, .contentPane h2 {
         font-size: 18px;
      }
   }

   @media (max-width: 767px) {

         #siteHeadouter {
            background: #2ab573;
         }

      #dnn_bannerPane h2, #dnn_contentLeft h2, #dnn_contentRight h2, .contentPane h2 {
         font-size: 24px !important;
      }

      .brand.hidden-desktop {
         max-width: 100%;
         line-height: 80px;
      }

      .brand.hidden-desktop img {
         width: 100%;
         margin: 0 auto 10px auto;
      }

      .hidden-mobile {
         display: none !important;
      }

      .visible-mobile {
         display: inherit;
      }

      .dates {
         width: 100%;
         max-width: 100%;
         margin: 1.5rem 0 0 0;
      }

      .dates h2 a {
         width: 48%;
         float: left;
         margin-right: 4%;
         padding: 2px 20px;
         background: #f5ee31;
         color: #2ab573 !important;
         text-transform: uppercase;
         -webkit-box-sizing: border-box;
         moz-box-sizing: border-box;
         box-sizing: border-box;
      }

      a.phone-no {
         font-family: 'Main', sans-serif;
      }

      .dates h2 a.directions {
         margin-right: 0 !important;
         float: right;
         width: 48%;
         text-align: center;
         background: #fff !important;
         color: #2ab573 !important;
      }
      .navbar .btn-navbar {
         float: left;
         width: 100%;
         margin: 4% 0 0;
         font-size: 18px;
         font-family: 'Main', sans-serif;
         font-weight: 600;
         text-transform: uppercase;
         -webkit-box-sizing: border-box;
         moz-box-sizing: border-box;
         box-sizing: border-box;
      }

      /*#dnn_leftPane {
         width: 30% !important;
         margin-left: 0;
         display: inline-block;
      }

      #dnn_centerPane, #dnn_rightPane {
         width: 30% !important;
         margin-left: 3% !important;
         display: inline-block;
      }*/



      .DnnModule-DreamSlider, #dnn_bannerPane {
         display: none;
      }

      a.cta-dig {
         -webkit-border-radius: 5px;
         moz-border-radius: 5px;
         border-radius: 5px;
         overflow: hidden;
      }
      .cta-dig h4 {
         /*font-size: 16px;
         font-family: 'Main', sans-serif;*/
      }
      .cta-dig img {
         width: 20%;
         -webkit-border-radius: 0px;
         moz-border-radius: 0px;
         border-radius: 0px;
      }
      .footerPaneRight {
         text-align: left;
      }
      .copysp {
         margin-top: 25px;
      }
      .copysp, .designsp, .loginsp {
         width: 100%;
         display: inline-block;
      }
   }

   @media (max-width: 480px) {

      #outerImageContainer {
         width: 100% !important;
         height: auto !important;
      }
      
      #lightboxImage {
         max-width: 480px !important;
         width: 90% !important;
         height: auto !important;
      }

      .service-row {
         padding-bottom: 75px;
      }

   }