* {
    padding: 0;
    margin: 0;
}

body {
    background: #FFEFFE;
    font-family: 'Nunito Sans', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/*==================================
--- NAVIGATION ---------------------
==================================*/
nav {
    box-sizing: border-box;
    z-index: 999;
    position: fixed;
    width: 100%;
    background: #FFEFFE;
    border-bottom: 1px solid #ccc;
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8em 1em;
}

nav img {
    height: 40px;
}

.nav-links {
    position: absolute;
    top: 72px;
    right: 0;
    height: 100vh;
    background: #333333;
    z-index: 888;
    width: 80%;
    padding: 2em;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

.nav-links li {
    display: block;
    list-style: none;
    font-weight: 700;
    padding: .5em;
    opacity: 0;
}

.drop-menu {
    margin: 1em;
}


.nav-links li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #FFEFFE;
    transition: 500ms;
}

.nav-links li a:hover {
    color: #EE2E24;
}


.nav-links li .navBtn {
    background: #EE2E24;
    padding: 0.6em 1em;
    border-radius: 50px;
    color: #FFEFFE;
}

.nav-links li .navBtn:hover {
    color: #FFEFFE;
    background: #e95048;
}

.burger div {
    width: 20px;
    height: 3px;
    margin: 4px;
    background: #333333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.burger {
    transition: 500ms;
}

.burger:hover {
    opacity: .5;
}

.nav-active {
    transform:translateX(0%);
}

@keyframes navLinkFade {
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

.toggle .line1{
    transform: rotate(-45deg) translate(-5px,5px);
}

.toggle .line2{
    opacity: 0;
}

.toggle .line3{
    transform: rotate(45deg) translate(-5px,-5px);
}

/*NAV - DESKTOP*/
@media only screen and (min-width: 960px) {
    nav {
        background: #FFEFFE;
    }
    nav .container {
        padding-left: 5em;
        padding-right: 5em;
    }

    nav img {
        height: 50px;
    }
    
    .nav-links {
        all: unset;
        display: flex;
        position: relative;
        justify-content: space-between;
    }
    
    .nav-links li {
        display: block;
        list-style: none;
        font-weight: 700;
        padding: 0 0 0 2em;
        opacity: 1;
    }

    .nav-links li a {
        color: #333333;
    }

    .burger {
        display: none;
    }
    /*sub menus*/
    
    .drop-menu {
        
        position: absolute;
        z-index: 9999;
        margin-top: 1.5em;
        background: #333333;
        line-height: 0;
        border-radius: 5px;
        padding: 1em;
        top: .8em;
        
    }

    .drop-menu::before {
        content: '';
        display: block;
        border-left: 0.5rem solid transparent;
        border-right: 0.5rem solid transparent;
        border-bottom: 0.5rem solid #333333;
        position: absolute;
        top: -0.5rem;
        left: 2em;
    }

    .drop-menu {
        opacity: 0;
        transition: 500ms;
        transition-delay: 400ms;
    }

    .drop:hover .drop-menu {
        opacity: 1;
    }

    .drop-menu li {
        padding: 1.5em;
    }
   
        .drop-menu li a {
        color: #FFEFFE;
    }
}

/*==================================
--- SLIDER -------------------------
==================================*/

.mSlider {
    top: 60px;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow-x: hidden;
}


.mSlides {
    display: flex;
    height: 100vh;
}

.mSlide {
    min-width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: 50% 50%;
}

.slideImg {
    height: 100vh;
    width: 100%;
}

#slideVeh {
    background-image: url(../img/slider/tint-r-us-automotive-tinting.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#slideRes {
    background-image: url(../img/slider/tint-r-us-residential-tinting.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#slideCom {
    background-image: url(../img/slider/tint-r-us-commercial-tinting.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#slidePpf {
    background-image: url(../img/slider/tint-r-us-paint-protection-services.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
}
.caption .container {
   width: 80%;
   margin: auto;
}

.caption .container p {
    text-transform: uppercase;
    text-shadow: 2px 2px 8px #000;
    color: #FFEFFE;
    font-weight: 900;
    font-size: 1em;
}

.caption .container h2 {
    text-transform: uppercase;
    color: #FFEFFE;
    font-weight: 900;
    font-size: 2rem;
    text-shadow: 2px 2px 8px #000;
    line-height: 1.2;
}

.caption .container h2 span {
    color: #EE2E24;
    font-size: 1.5em;
}

.caption .container .slideBtn {
    background: #EE2E24;
    padding: .8em 1em;
    color: #FFEFFE;
    text-transform: uppercase;
    border: none;
    font-size: 1.1em;
    font-weight: 700;
    margin-top: 1em;
    cursor: pointer;
    transition: 500ms;
}

.caption .container .slideBtn:hover {
    background: #e95048;
    padding: .8em 1em;
    color: #FFEFFE;
    text-transform: uppercase;
    border: none;
    font-size: 1.1em;
    font-weight: 700;
    margin-top: 1em;
    cursor: pointer;
}

.slide-controls {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#prev, #next {
    cursor: pointer;
    background: transparent;
    font-size: 30px;
    padding: 10px;
    color: #FFEFFE;
    border: none;
}

#prev:focus, #next:focus {
    outline: none;
}

@media only screen and (min-width: 960px) {
    .caption {
        text-align: center;
    }

    .break {
        display: none;
    }

    .caption .container p {
        font-size: 1.4em;
        font-weight: 600;
    }
    
    .caption .container h2 {
        font-size: 4rem;
    }

    .caption .container h2 span {
        font-size: 4rem;
    }
}

/*==================================
--- SLOGAN -------------------------
==================================*/
.slogan {
    position: relative;
    background: #EE2E24;
    height: 100%;
    outline: solid 1px #EE2E24;
}

.slogan .container {
    width: 80%;
    margin: auto;
}

.slogan .container p {
    color: #FFEFFE;
    font-size: 2em;
    padding: 1.5em 0 1.5em 0;
    font-weight: 900;
    text-align: center;
}

/*==================================
--- SERVICES -----------------------
==================================*/
.services {
    width: 100%;
}

.services .container {
    padding: 0 2em;
}

.services img {
    display: block;
    margin: auto;
    padding: 1em;
}

.services h3 {
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 900;
    text-align: center;
}

.services p {
    padding: 1em 0 1em 0;
    text-align: center;
}

.button {
    display: flex;
    justify-content: center;
    padding: 1em 0 3em 0;
}

.button a {
    text-decoration: none;
    font-size: 1.1em;
    border: 2px solid;
    padding: .7em 2em;
}

.button a:hover {
    color: #EE2E24;
    border-color: #EE2E24;
}

.service1 {
    background-color: #B1ABA1;
    color: #333333;
}

.service1 a {
    color: #333333;
    border-color: #333333;
    transition: 500ms;
}

.service2 {
    background-color: #333;
    color: #B1ABA1;
}

.service2 a {
    color: #B1ABA1;
    border-color: #B1ABA1;
    transition: 500ms;
}

.service3 {
    background-color: #B1ABA1;
    color: #333333;
}

.service3 a {
    color: #333333;
    border-color: #333333;
    transition: 500ms;
}

@media only screen and (min-width: 960px) {
    .services {
        display: flex;
    }

    .service1 {
        flex: 1;
    }
    .service2 {
        flex: 1;
    }
    .service3 {
        flex: 1;
    }
}

/*==================================
--- TESTIMONIALS-------------------
==================================*/
.testimonials {
    background: #FFEFFE;
    overflow-x: hidden;
    padding: 0 1em;
}

.testimonials h3 {
    margin: 1.5em 1em 0em 1em;
    font-size: 2.5em;
    text-transform: uppercase;
    color: #333333;
    text-align: center;
}
.carousel {
    
    text-align: center;
    padding: 3em 0;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.carousel .slides {
    width: 400%;
    left: 0;
    padding-left: 0;
    padding-top: 1em;
    overflow: hidden;
    list-style: none;
    position: relative;
    -webkit-transition: transform .5s;
    -moz-transition: transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
}

.carousel .slides li {
    width: 25%;
    position: relative;
    float: left;
  }

  .carousel li p{
    margin-top: 0;  
  }
  .carousel li q {
    max-width: 90%;
    margin: auto;
    color: #333333;
    font-size: 1.3em;
  }

  .carousel li span.author {
    margin-top:1em;
    margin-bottom: 2em;
    font-size: 1.1em;
    color: #333333;
    font-weight: 900;
    display: block;
  }

  .carousel .slidesNavigation {
    display: block;
    list-style: none;
    text-align: center;
    bottom: 2em;
    /*--- Centering trick---*/
      /* Absolute positioning*/
      position: absolute; 
      /* Abosulte positioning*/
      width: 104px; /*This width  is the addition of the width of all the navigations dots - So in this case is   104 because the navigation dots are 26px (width:10px and 6px marginleft + 6 px marginright) and there are 4 dots so 4x26=104 */
      left: 50%; /*Centering de element*/
      margin-left: -38px; /*adjusting the centering by applying a negative margin of half of the width*/
  }
  .carousel input {
    display: none;
  }
  .carousel .slidesNavigation label {
    float: left;
    margin: 6px;
    display: block;
    height: 10px;
    width: 10px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: solid 2px #333333;
    font-size: 0;
  }
  /* You have to repeat this with each slide
  TODO: make it easier with SCSS
  25% movement 100/slides-num
  */
  #radio-1:checked ~ .slides {
    transform: translateX(0%);
  }
  #radio-2:checked ~ .slides {
    transform: translateX(-25%);
  }
  #radio-3:checked ~ .slides {
    transform: translateX(-50%);
  }
  #radio-4:checked ~ .slides {
    transform: translateX(-75%);
  }
  
  
  .carousel .slidesNavigation label:hover {
     cursor: pointer;
  }
  /* You have to repeat this with each slide/dot */
  .carousel #radio-1:checked ~ .slidesNavigation label#dotForRadio-1,
  .carousel #radio-2:checked ~ .slidesNavigation label#dotForRadio-2,
  .carousel #radio-3:checked ~ .slidesNavigation label#dotForRadio-3,
  .carousel #radio-4:checked ~ .slidesNavigation label#dotForRadio-4 {
    background: #333333;
  }
  
/*==================================
--- FOOTER -------------------------
==================================*/  
.footer {
    background: #333333;
    padding: 1em;
}

.footer .container {
    padding: 1em;
}

.column {
    margin: 2em .8em;
    width: 100%;
}

.column img {
    width: 200px;
    display: block;
    margin: auto;
}

.column h4 {
    padding-bottom: 0.5em;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 700;
    color: #FFEFFE;
}

.column ul {
    margin-top: 1.5em;
    list-style: none;
}

.column ul li {
    display: block;
    padding-bottom: 1em;
    padding-left: .4em;
    color: #FFEFFE;
    font-size: 1.1em;
}

.column ul li a {
    text-decoration: none;
    color: #FFEFFE;
    text-align: center;
    margin: auto;
    transition: .5s;
}

.column ul li a:hover {
    color: #EE2E24;
}

.fa-facebook-square {
    transition: .5s;
}

.fa-facebook-square:hover {
    color: #4267B2;
}

@media only screen and (min-width: 960px) {
    .footer .container {
        padding: 1em 4em;
    }
    .footNav {
        display: flex;
        justify-content: space-around;
    }
}

/*==================================
--- COPYRIGHT ----------------------
==================================*/ 
.copyright {
    background: #EE2E24;
    color: #FFEFFE;
    padding: 1em 2em;
    text-align: center;
    font-size: 0.8em;
}

.cLeft {
    margin: .5em;
}

.cRight {
    margin: .5em;
}

.copyright a {
    text-decoration: none;
    color: #FFEFFE;
    transition: .5s;
}

.copyright a:hover {
    color: #e95048;
}


@media only screen and (min-width: 960px) {
    .copyright {
        display: flex;
        justify-content: space-between;
        padding: 2em 4em;
    }
}

/*==================================
--- PAGE HEADERS -------------------
==================================*/ 
.pageHeader {
    height: 350px;
    position: relative;
    background: #333333;
    color: #FFEFFE;
    display: flex;
    align-items: center;
    width: 100%;
}

.pageHeader .container {
    margin: 80px auto 10px auto;
}

.pageTitle {
    min-width: 80%;
    margin: auto;
    text-align: center;
    line-height: 2;
}

.pageTitle h2 {
    color: #FFEFFE;
    font-size: 3em;
    font-weight: 900;
}

.pageTitle p a {
    text-decoration: none;
    color: #FFEFFE;
    transition: 500ms;
}

.pageTitle p {
  text-decoration: none;
  color: #FFEFFE;
  font-size: 1em;
  font-weight: 900;
  text-transform: uppercase;
}

.pageTitle p span {
    padding: 0 1em;
}

.pageTitle p a:hover {
    color: #EE2E24;
}

#auto {
    background-image: url('../img/pageHeaders/vehicle-tint.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

#res {
    background-image: url('../img/pageHeaders/residential-tint.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

#ind {
    background-image: url('../img/pageHeaders/commercial-tint.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

#about {
    background-image: url('../img/pageHeaders/about-us.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

#ppf {
    background-image: url('../img/pageHeaders/ppf.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

.pageHeader .pageHeaderImg .container {
    max-width: 80%;
}



/*==================================
--- AUTOMOTIVE ---------------------
==================================*/ 
.tintingService {
    background: #FFEFFE;
}

.tintingService .container {
    margin: 2em auto;
    width: 85%;
}

.tintingService .serviceLeft h3 {
    font-size: 1.5em;
    margin-bottom: 1.2em;
}

.tintingService .serviceLeft p {
    margin-bottom: 1.5em;
}

.tintingService .serviceLeft h4 {
    margin-top: 1.5em;
}

.tintingService .serviceLeft ul {
    margin-top: 1.5em;
    
    list-style-type: none;
}

.tintingService .serviceLeft li {
    display: block;
    background: url(../img/tint-r-us-bullet.png) no-repeat left center;
    padding-left: 2em;
    margin-bottom: 1em;
}

/* CAROUSEL */
.serviceCarousel {
    box-sizing: border-box;
    width: 100%;
    position: relative;
    margin: auto;
}

.serviceSlides {
    display: none;
}

.serviceSlides img{
    width: 100%;
    display: block;
    margin-right: 0;
}

.carouselNav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.slideIndicator {
    border: none;
    
    color: #FFEFFE;
    background: #333333;
    font-size: .9em;
    font-weight: 900;
    padding: .5em .8em;
    margin: 0 .5em;
    transition: 0.6s ease;
}

.active, .slideIndicator:hover {
    background: #EE2E24;
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

  @media only screen and (min-width: 960px) {
      .tintingService .container {
          display: flex;
          justify-content: space-between;
          
      }

      .serviceLeft {
        flex-wrap: wrap;
        margin-right: 2em;
      }

      .serviceCarousel {
        flex-wrap: wrap;
        margin-left: 2em;
      }
  } 

/*====================================
--- ABOUT ----------------------------
====================================*/
.who {
   padding: 2em 0;
} 
.who .container {
    margin: 1em;
}

.who h2 {
    font-size: 2em;
    font-weight: 900;
    text-transform: uppercase;
    color: #EE2E24; 
}

.who hr {
    margin: 1em 0;
    color:#B1ABA1;
}

.who .container p {
    font-size: 1.1em;
    line-height: 1.3;
    margin: 0 0 1em 0;
}

.whoR img {
    width: 100%;
    border: 1px solid #B1ABA1;
}

@media only screen and (min-width: 1200px) {
    .who .container {
        max-width: 90%;
        margin: auto;
        display: flex;
    }

    .whoL {
        flex-grow: 1;
        margin-right: 2em;
    }
    
    .whoR {
        flex-shrink: 0;
    }
}

/* STATEMENTS */

.statements {
    padding: 0 0 2em 0;
}

.statements .container {
    margin: 1em 1em 0;
}

.statements .container .block {
    background: #EE2E24;
    padding: 1em;
    text-align: center;
    color: #FFEFFE;
    margin-bottom: 1em;
}

.block h3 {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 1em;
}

.block p {
    font-size: 1.2em;
    line-height: 1.3;
    margin: 0.5em;
    text-transform: italic;
}

@media only screen and (min-width: 960px) {
    .statements .container {
        display: flex;
        justify-content: space-between;
        
    }

    .block {
        
        width: 30%;
    }
}

/*====================================
--- CONTACT---------------------------
====================================*/

.contactInfo {
    background: #FFEFFE;
    padding: 2em 1em;
    margin-bottom: 2em;
}

.contactForm {
    box-sizing: border-box;
    background: #FFEFFE;
    padding: 1em;
}

.contactForm h4 {
    font-size: 1.2em;
    margin-bottom: 1em;
}

input, textarea {
    width: 100%;
    margin-bottom: 1em;
    padding: 0.8em;
    border-radius: .3em;
    background: 1px solid gray;
    box-sizing: border-box;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1em;
}

input[type="submit"] {
    background: #EE2E24;
    color:#FFEFFE;
    font-weight: bold;
    font-size: 1em;
    padding: .8em 1.2em;
    width: unset;
    cursor: pointer;
    border: none;
}

input[type="submit"]:hover {
    opacity: 0.8;
}

.contactDetails {
    box-sizing: border-box;
    width: 100%;
    background: #EE2E24;
    padding: 2em;
}

.contactDetails p {
    color: #FFEFFE;
    line-height: 2.5;
}

.contactDetails p span {
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 900;
    margin-left: 0;
}

.contactDetails a {
    text-decoration: none;
    color: #FFEFFE;
}

.contactDetails a:hover {
    color: rgba(255, 255, 255, 0.5);
}

.contactDetails .fa-facebook-square:hover {
    color: rgba(255, 255, 255, 0.5);
}

@media only screen and (min-width: 960px) {
    .contactInfo .container {
        width: 90%;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }

    .contactForm {
        width: 60%;
    }

    .contactDetails {
        width: 35%;
    }
}


/* MAP */
.map {
 width: 90%;
 margin: 0 auto 2em auto;
 border: 1px solid #B1ABA1;
}

iframe {
    width: 100%;
    height: 450px;
}

/*===============
---MODAL---------
===============*/

    .modal {
        display: none;
        position: absolute;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: #000;
        background-color: rgba(0,0,0,0.4); 
    }

    .modal-open {
        display: block;
        width: 100%;
    }

    .modal-exit {
        float:right;
        font-size: 1.2em;
        font-weight: bold;
        cursor: pointer;
        transition: 500ms;
    }

    .modal hr {
        margin: 1em 0;
    }

    .modal-exit:hover {
        color: #EE2E24;
    }

    .modal-content {
        background: #FFEFFE;
        margin: auto;
        padding: 1em;
        max-width: 450px;
        margin-top: 15%;
    }

    .close {
        color: #333333;
        float: right;
        font-size: 1.3em;
        font-weight: bold;
    }

    .close:hover, .close:focus {
        color: #EE2E24;
        text-decoration: none;
        cursor: pointer;
    }

    select {
        width: 100%;
        margin-bottom: 1em;
        padding: 0.8em;
        border-radius: .3em;
        border: 1px solid gray;
        box-sizing: border-box;
        font-family: 'Nunito Sans', sans-serif;
        font-size: 1em;
    }

    select:required:invalid {
        color: #666;
    }