/**
 * **********************************
 * CUSTOM TEMPLATE LAYOUTS BEGIN HERE
 * **********************************
 */

 .car-slide {
   position: relative;
 }

 .car__text-container {
   background-color: rgba(0, 0, 0, 0.9);
   box-sizing: border-box;
   left: 6.75em;
   max-width: 350px;
   min-height: 12em;
   padding: 1em;
   position: absolute;
   top: 18%;
 }

 .car__text-container > h3 {
   text-transform: uppercase;
 }

 .car__text-container > p {
   font-size: 0.8em;
 }

 .car__text {
   background-image:url('../images/car-slider/yellow-point-down.png');
   background-repeat: no-repeat;
   background-position: bottom right;
   padding-right: 0.5em;
   padding-bottom: 0.5em;
 }

 .car__mobileText-container {
   display: none;
   width: 100%;
 }

 @media only screen and ( max-width: 1200px ) {
   .car__text-container {
     min-height: 0;
     left: 5em;
   }

   .car__text-container > h3 {
     font-size: 1.1em;
     font-weight: 700;
   }
 }

 @media only screen and ( max-width: 900px ) {
   .car__text-container {
     min-height: 0;
     left: 2em;
   }

   .car__text-container > h3 {
     font-size: 1em;
     font-weight: 700;
   }

   .car__text-container > p {
     font-size: 0.7em;
   }
 }

 @media only screen and ( max-width: 800px ) {
   body.subpage header.main {
     min-height: 350px !important;
   }

   main .fs2 {
     background-color: rgba(0, 0, 0, 0.9);
     padding: 1em 1.5em;
   }

   .car__text-container {
     display: none;
   }

   .car__mobileText-container {
     display: block;
     min-height: 200px;
   }

   .car__mobileText-container .car__text {
     background-image:url('../images/car-slider/yellow-point-up.png');
     background-repeat: no-repeat;
     background-position: top right;
     padding: 0.5em 0.5em 0 0.5em;
   }
 }

 @media only screen and ( max-width: 620px ) {
   body.subpage header.main {
     min-height: 200px !important;
   }

   main .fs2 {
     background-color: rgba(0, 0, 0, 0.9);
     padding: 1em 1.5em;
   }

   .car__text-container {
     display: none;
   }

   .car__mobileText-container {
     display: block;
     min-height: 200px;
   }
 }

 .what-we-do-best-section {
   position: absolute;
   left: 50%;
   bottom: 10em;
   font-size: 1.3em;
   width: 800px;
   max-width: 100%;
   transform: translateX(-50%);
   z-index: 3;
 }

 @media only screen and ( max-width: 500px ) {
   .what-we-do-best-section {
     bottom: auto;
     top: 5em;
   }

   .what-we-do-best-section > div {
     text-align: left;
     padding: 0 2em;
   }

   .what-we-do-best-section > div span, .what-we-do-best-section > div h1 {
     text-align: left;
   }
 }



/**
 * Universals
 */

 /* Mini titles */
.mini-title{
  display: block;
  font-size: 1em;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #222;
}
.dark .mini-title{
  color: #fff;
}
.mini-title.yellow{
  color: #ed1b24;
}

/* Font colors */
.text-red{
  color: #5e1777;
}


/**
 * Top Bar
 */
section.top-bar{
  position: fixed;
  display: block;
  top: 0;
  height: 75px;
  padding-top: 10px;
  width: 100%;
  background: #222;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  z-index: 10;
}
.top section.top-bar {
  background: transparent;
}
section.top-bar.headroom--unpinned{
  position: fixed;
  top: -50px;
}
section.top-bar.headroom--pinned{
  position: fixed;
  top: 0;
  z-index: 99;
}
.main-logo img{
  max-height: 75px;
  margin-top: -5px;
}
@media only screen and ( max-width: 500px ) {

.main-logo img{
  max-height: 45px;
  padding-top: 5px;
}
}
/* Main Navigation */
*[toggle-nav]{
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  text-align: center;
  color: red;
  line-height: 60px;
}
*[toggle-nav] i{
  line-height: 70px;
}
.mobile-menu *[toggle-nav],
*[toggle-nav]:hover{}
*[toggle-nav][close-nav]{
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  height: auto;
  background: #333;
  color: red;
  padding: .25em;
  z-index: 99;
}
nav.main{
  position: absolute;
  top: 0;
  right: 2%;
  text-align: right;
  height: 100%;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
nav.main,
nav.main > ul {
  line-height: 50px;
}
nav.main > ul{
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
nav.main .social{
  vertical-align: middle;
}
nav.main ul > li{
  position: relative;
  display: block;
  float: left;
  height: 100%;
}
nav.main ul > li > a{
  display: block;
  padding: .75em .5em;
  text-decoration: none;
  font-weight: 900;
  line-height: 60px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
nav.main ul li:hover > a,
nav.main ul li.current-menu-item > a{
  border-bottom: 2px solid #ed1b24;
  color: #ed1b24;
}
nav.main ul > li.menu-item-has-children > a{
  padding-right: 1em;
}
nav.main ul > li.menu-item-has-children > a:after{
  font-family: 'FontAwesome';
  content:" \f0dd";
  position: absolute;
  font-size: 12px;
  top: .7em;
  right: 5px;
}
nav.main ul > li ul{
  position: absolute;
  left: 0;
  width: 250px;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  -o-transition: all 200ms;
  transition: all 200ms;
  background-color: #222;
}
nav.main ul > li:hover ul{
  max-height: 200em;
}
nav.main ul > li ul li{
  float: none;
}
nav.main ul > li ul li a{
  display: block;
  padding: .2em 1em;
  text-decoration: none;
  border-bottom: none;
}
nav.main ul > li ul li a:hover{
  border-bottom: none;
}
nav.main ul > li ul li ul {
  display: none;
}

/**
 * Set the following media query to the viewport width where
 * you want the mobile navigation to be visible.
 */
@media only screen and ( max-width: 750px ) {
  .mobile-menu .top-bar,
  .mobile-menu .top-bar.headroom--unpinned,
  .mobile-menu .top-bar.headroom--pinned{
    top: -150px;
    position: fixed;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  *[toggle-nav]{
    display: block;
  }
  .mobile-menu [close-nav]{
    display: block;
  }
  .mobile-menu:after{
    content: " ";
    background: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }
  nav.main{
    padding-top: 50px;
    display: block;
    position: fixed;
    background: #000;
    -webkit-transform: translateX( 260px ) ;
    -moz-transform: translateX( 260px ) ;
    -o-transform: translateX( 260px ) ;
    transform: translateX( 260px );
    right: 0;
    top: 0;
    width: 260px;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
    z-index: -1;
  }
  .mobile-menu nav.main{
    min-height: 100%;
    max-height: 100%;
    position: fixed;
    -webkit-transform: translateY( 0 );
    -moz-transform: translateY( 0 );
    -o-transform: translateY( 0 );
    transform: translateY( 0 );
    top: 0;
    right: 0;
    overflow-y: auto;
    z-index: 5;
  }
  nav.main ul{
    display: block;
    overflow: auto;
  }
  nav.main ul li{
    float: none;
    display: block;
  }
  nav.main ul li a{
    padding: 0 1.5em;
    display: block;
    text-align: left;
  }
  nav.main ul li:hover > a{
    color: #000;
  }
  nav.main ul > li ul{
    display: block;
    position: relative;
    max-height: 9999em;
    width: auto;
    background: transparent;
  }
  nav.main ul > li:hover ul{
    max-height: 99999em;
  }
  nav.main ul > li ul li a{
    padding-left: 2em;
  }
}



/**
 * Main Header
 */
header.main{
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000;
  min-height: 100%;
}



/**
 * Homepage
 * (static page)
 */
body.home header.main{
  min-height: 100%;
  overflow: hidden;
  background-image: url( ../images/banners/home-banner-bg-1.jpg);
}
body.home header.main .car-image{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  min-height: 100%;
  width: 800px;
  overflow: hidden;
  background-image: url( ../images/banners/home-banner-car.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.home-slider .slides li{
}
.home-banner-content{
  position: absolute;
  bottom: 4em;
  right: 2em;
  width: 50%;
  padding-bottom: 8em;
  z-index: 3;
}
.banner-video{
  z-index: 1;
  position: absolute;
}
.home-banner-content .large{
  display: block;
  position: relative;
  padding: 0 0 10px;
  font-size: 1.75em;
  color: #ffde00;
  margin-left: -.5em;
  z-index: 2;
}
.home-banner-content .smaller{
  display: block;
}
.home-banner-content h2{
  font-size: 4em;
  padding: 0;
  font-weight: 900;
  text-transform: uppercase;
}
.home-banner-content h3{
  font-size: 2.25em;
  padding: 0 0 .4em;
  letter-spacing: .12em;
}
@media only screen and ( max-width: 500px ) {
  body.home header.main{
    min-height: 800px;
  }
  body.home header.main [data-du-video]{
    display: none;
  }
  .home-banner-content{
    position: absolute;
    bottom: 4em;
    right: 0;
    width: 100%;
    padding-bottom: 4em;
    font-size: .5em;
  }
  .home-banner-content .large{
    display: block;
    position: relative;
    padding: 0 0 10px;
    font-size: 1.75em;
    color: #ffde00;
    margin-left: 0;
    z-index: 2;
  }
}

main.home{}
main.home .main-intro{
  padding: 6em 0 13em;
  background-image: url(../images/bg/gray-grunge.jpg);
}
main.home .main-intro .intro-title{
  padding-right: 2em;
}
main.home .main-intro h1{
  font-size: 3em;
  text-align: right;
}
main.home .main-intro p{
  font-size: 1.4em;
  font-weight: 600;
  line-height: 1.6em;
}
@media only screen and ( max-width: 700px ) {
  main.home .main-intro .mini-title{
    text-align: left!important;
  }
  main.home .main-intro h1{
    font-size: 2.5em;
    text-align: left;
  }
}


/**
 * SERVICE PANELS
 */

.sliding-image{
  display: inline-block;
  border: 2px solid yellow;
}
.sliding-image img{
  display: block;
  position: relative;
  -ms-transform: translate(1.5em, 1.5em); /* IE 9 */
  -webkit-transform: translate(1.5em, 1.5em); /* Safari */
  transform: translate(1.5em, 1.5em);
}
.service-panel .image{
  text-align: center;
  padding: 0 3em;
}
.service-panel .content{
  padding-left: 1em;
}
.service-panel h2{
  font-size: 2.3em;
  font-weight: 900;
  margin-bottom: .5em;
}
.service-panel .excerpt{
  position: relative;
  padding-top: .5em;
  padding-left: 1.5em;
}
.service-panel .excerpt:after{
  content: " ";
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  border-left:  2px solid #ed1821;
}
.excerpt p {
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.8em;
}
@media only screen and ( max-width: 700px ) {
  .service-panel .image{
    text-align: center;
    padding: 0 3em 3em;
  }
}
*[data-columns="reverse"] .sliding-image img{
  -ms-transform: translate(-1.5em, 1.5em); /* IE 9 */
  -webkit-transform: translate(-1.5em, 1.5em); /* Safari */
  transform: translate(-1.5em, 1.5em);
}
*[data-columns="reverse"] .content{
  text-align: right;
  padding-left: 0;
  padding-right: 1em;
}
.service-panel [data-columns="reverse"] .excerpt{
  padding-right: 1.5em;
}
.service-panel [data-columns="reverse"] .excerpt:after{
  right: 0;
  border-left: none;
  border-right: 2px solid yellow;
}

@media only screen and ( max-width: 700px ) {
  *[data-columns="reverse"] .content{
    text-align: left;
    padding-left: 1em;
    padding-right: 0;
  }
  .service-panel [data-columns="reverse"] .excerpt{
    padding-left: 1.5em;
  }
  .service-panel [data-columns="reverse"] .excerpt:after{
    left: 0;
    border-right: none;
    border-right: 2px solid yellow;
  }
}

/* INDIVIDUAL PANELS */
.service__window-tinting{
  background-color: #111;
  background-image: url( ../images/home-tinting.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  padding: 5em 0 4em;
}
.service__clear-bra{
  background-color: #fff;
  /*
  background-image: url(../images/bg/gray-grunge.jpg);

  background-image: url( ../images/home-protection-bw.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  */
  padding: 5em 0 4em;
}
.service__installation{
  background-image: url( ../images/home-installation-1.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  padding: 5em 0 4em;
}


/**
 * CTA PANELS
 */
.cta-panel{
  padding: 7.5em 0;
  background: #222;
  text-align: center;
}
.cta-panel h2{
  font-size: 2.3em;
  font-weight: 900;
}
.cta-panel p{
  font-size: 1.3em;
}
.cta-panel .button{
  margin-top: 1em;
}
.cta__visit-us{
  background-image: url(../images/bg/home-cta.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

.cta-subpage{
  text-align: center;
}
.cta-subpage > div {
  display: inline-block;
  max-width: 800px;
}
.cta-subpage h1{
  border-left: 2px solid #ffde00;
  padding-left: 1em;
  margin-bottom: .75em;
  display: inline-block;
}
.cta-subpage p{
  font-size: 1.3em;
}
.cta-subpage .button{
  margin-top: 2em;
}


.testimonial-panel{
  padding: 5em 0 3em;
  background: #fff;
}
.testimonial-panel .testimonial{
  padding: 3em 2em;
}
.testimonial-panel .customer-info{
  text-align: center;
}
.testimonial-panel .testimonial img{
  border: 2px solid #FFDC4B;
  padding: 5px;
  width: 100px;
  margin-bottom: .5em;

  -webkit-border-radius: 75px;
  -moz-border-radius: 75px;
  -o-border-radius: 75px;
  border-radius: 75px;

}
.testimonial-panel h2{
  font-weight: 900;
  font-size: 2.2em;
}
.testimonial-panel h3{
  padding: 1em 0;
  font-weight: 900;
  font-size: 1em;
}
.testimonial-panel .testimonial p{
  font-size: .9em;
}

/**
 * Basic Page
 * (not homepage)
 */
body.subpage header.main{
  min-height: 450px;
}

main.single-page{
  background: #fff;
}
main.single-page > .container{
  padding-top: 4em;

}


/**
 * Paint Protection Page
 */
.paint-protection-strip{
  position: relative;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,d6d6d6+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(214,214,214,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(214,214,214,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(214,214,214,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  text-align: left;
  overflow: hidden;
  width: 100%;
}
.paint-protection-strip .car{
  display: inline-block;
  position: relative;
  height: 400px;
  width: 800px;
  background-image: url( ../images/car-highlights/car-mustang.png );
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.paint-protection-strip .car .overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url( ../images/car-highlights/bumper.png );
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.paint-protection-strip .info-bar{
  position: absolute;
  padding: 2em 1em;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background: #000;
}
/**
 * Listing Pages
 * (archives, categories, tags, etc)
 */

/* Listing Items */
section.listing-items{
  padding: 2em 0;
  background: #efefef;
}
section.listing-items .item{
  padding: 1.5em 1.5em 1em;
  margin-bottom: 1.5em;
  background: #fff;
}
section.listing-items .item-header{
  padding-bottom: 1em;
  margin-bottom: 1em;
}
section.listing-items .item-link{
  text-decoration: none;
}
section.listing-items .item-title{
  font-size: 1em;
  line-height: 1.4em;
  font-weight: 400;
}
section.listing-items .item-title:hover{
  color: #666;
}
section.listing-items .item-date{
  font-size: .8em;
}
section.listing-items .item-image{
  padding: 0 0 1em;
}

body.archive header.main{}

main.archive-listing{}

main.category-listing{}



/**
 * Single Post
 * for post types: .single.single-post_type_slug #body{}
 */
body.single header.main{}

main.single-post{}



/**
 * 404 Page
 */
body.error404 header.main{}

main.error-404{
  padding: 2em 0 3em;
}


/**
 * FOOTER
 */
footer.main{
  background-image: url(../images/bg/dk-gray-grunge.jpg);
}
nav.footer{
  text-align: center;
  background: #222;
}
nav.footer ul li{
  display: inline-block;
  font-size: .9em;
  font-weight: 700;
  padding: 0 .5em;
  letter-spacing: .02em;
}
nav.footer ul li a{
  display: block;
  padding: 2em 0;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
nav.footer ul li a:hover{
  border-bottom: 1px solid yellow;
}
nav.footer ul ul{
  display: none;
}
footer.main .footer-content{
  padding-top: 3em;
  padding-bottom: 3em;
}
@media only screen and ( max-width: 700px ) {
  nav.footer ul li{
    display: block;
    font-size: .9em;
  }
  nav.footer ul li a{
    padding: .5em 0;
  }
  footer.main [data-column] {
    text-align: center!important;
  }
  footer.main .footer-logo {
    display: none;
  }
}

a.socialMedia {
  margin: 0.25em;
  text-decoration: none;
}