/* Slider Styles */
    .the-slider { background-color: coral; box-sizing: border-box; width: 100vw; height: 90vh; min-height: 1px; overflow: hidden; position: absolute; top: 0; left: 0; font-family: sans-serif; -webkit-font-smoothing: antialiased; -moz-webkit-font-smoothing: antialiased; opacity: 0; }        
    .slider-item__wrapper { display: flex; height: 100%; position: absolute; transition: transform 2000ms cubic-bezier(0.075, 0.82, 0.165, 1); }
    .slider-item__container { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; }

    .slider-item { width: 100vw; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: #162133; }
    /* Arrows */
    .nav-arrows__container { height:100%; width: 100%; position: absolute; }
    .arrow { width: 40px; height: 60px; background-color: #272727; z-index: 99; }
    [data-nav="arrow-left"] { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); background: url('/estaticos/2019/10/laliga-11/img/slider/arrow-l.svg') no-repeat center center; background-size: 40%; }
    [data-nav="arrow-right"] { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); background: url('/estaticos/2019/10/laliga-11/img/slider/arrow-r.svg') no-repeat center center; background-size: 40%; }
    [data-nav="arrow-left"], [data-nav="arrow-right"] { background-color: #2466a9; } 
    /* Nav Progress */
    .nav-progress__container { width: 100vw; height: 10px; position: absolute; top: 0; left: 0; z-index: 99; }
    .nav-progress { width: 100%; height: 100%; background-color: #007fff; position: absolute; top: 0; left: 0; transition: transform 900ms cubic-bezier(0.075, 0.82, 0.165, 1); transform: translateX(-100vw); }
    /* Dot Navigation Indicators */
    .dot-nav__container { padding: 20px; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); display: flex; z-index: 99; align-items:center;  }
    .dot { height: 7px; width: 7px; background-color: #464646; border-radius: 50%; margin: 5px; }
    .dot-nav__container .active-dot { border: 1px solid #007fff; background-color: #007fff; }
    
    /* VW Styles */        
    .the-slider { color: white; }
    .the-slider .tit-main { padding-bottom: 20px; font-size: 50px; font-weight: 600; color: #2f7af6; text-align: center; }        
    .the-slider .tit-sub-2 { font-size: 30px; line-height: 1.4; max-width: 420px; text-align: center; font-weight: 200; }
    .content { width: 100%; height: 100%; display: flex; align-items: center; max-width: 1280px; }
    .bg-img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 0; }
    .bg-img img { width: 100%; height: auto; pointer-events: none; max-width: none; }
    .img-container { width: 800px; height: 501px; position: relative; }
    .txt-container { max-width: 40%; padding: 30px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; transform: translateX(-120px); }
    .txt-top { display: flex; align-items: center; padding-bottom: 20px; }
    .txt-top .tit { font-size: 40px; font-weight: 600; }
    .txt-top .tit:nth-of-type(2) { font-size: 30px; }
    .txt-top .line { height: 47px; width: 3px; background-color: #317eff; margin: 0 20px; }
    .paragraph { font-size: 17px; line-height: 1.3; padding-right: 40px; font-weight: 600; } 
    .content-intro { justify-content: center; background:url('../img/slider/intro-img.jpg') no-repeat center center; background-size: cover; position: relative; }
    .content-intro:after { content: ''; height: 100%; width: 100%; background-color: rgba(22,33,51,.9); position: absolute; top: 0; left: 0; }
    .intro-container { position: relative; z-index: 2; }

    /* Animation */
    .animation-grow { animation: grow 5000ms ease forwards; }

    @keyframes grow {
        0%   { transform: scale(1.2); }
        100% { transform: scale(1); }
    }

  /* MQ */
  
  @media screen and (max-width: 414px) {
      
      .content { flex-direction: column; justify-content: center; }
      .txt-container { max-width: none; width: 100%; transform: translateX(0); }
      .img-container { width: 100%; height: 259px; padding: 40px 0; }
      .bg-img img { width: 100%; height: auto; }
      .arrow { width: 25px; height: 35px; }
      .intro-container { max-width: 80%; }
      .the-slider .tit-main { line-height: 1; padding-bottom: 0; font-size: 30px; }
      .the-slider .tit-sub-2 { line-height: 1; }
      .paragraph { padding-right: 20px; font-size: 16px; }
      .bg-b:after { display: none; }

  }
  
  @media screen and (max-width: 320px) {
    #the-slider-1 .tit-sub-2 { font-size: 25px; }
    .dot-nav__container { padding: 7px; }
    .arrow { width: 20px; height: 30px; }
    .txt-top .tit:nth-of-type(1) { font-size: 35px; }
    .txt-top .tit:nth-of-type(2) { font-size: 24px; line-height: 1; }
    .img-container { height: 200px; }
  }

  @media screen and (max-width: 767px) {

    .the-slider { width: 100%; }    
  }

  @media screen 
    and (min-width: 768px)
    and (max-width: 1279px) { 
      
      #the-slider-1 { height: 60vh; }  
    
  }

  @media screen 
    and (min-width: 415px)
    and (max-width: 768px) { 

      .img-container { height: 288px; }
      .txt-container { transform: translateX(-80px); width: 60%; padding: 20px; }
      .paragraph { padding-right: 0; }      

  }

  @media screen 

    and (min-width: 769px)
    and (max-width: 1024px) { 

      .img-container { height: 384px; }

  }


  @media screen and (min-width: 1200px) {
    [data-nav="arrow-left"], [data-nav="arrow-right"] { width: 52px; background-size: 27%; }
    [data-nav="arrow-left"]  { background-position-x: 70%; }
    [data-nav="arrow-right"] { background-position-x: 30%; }
    .content-intro {
      background-size: 100% auto;
    }
  }