/* ==========================================================================
   PlentyBits
   ========================================================================== */
/* =Main */

.titSeccionFloat {
  position: absolute;
  top:5%;
  left:0;
  width: 100%;
  text-align: center;  
  z-index: 2;
}

.bcg {       
    position: absolute;
    width: 100%;
    height: 200%;
    top: -100%;
    z-index: 0;
    opacity: 0.7;
}

#slide01 .bcg {background: -webkit-linear-gradient(top left, rgba(20, 226, 205, .85), rgba(122, 86, 244, .85)), url(../images/home/fondo-globalpiso.png) no-repeat center center;background-size: cover;} 
#slide02 .bcg {background: -webkit-linear-gradient(top left, rgba(255, 0, 0, .85), rgba(200, 100, 0, .85)), url(../images/home/fondo-diverscity.jpg) no-repeat center center;background-size: cover;} 
#slide03 .bcg {background: -webkit-linear-gradient(top left, rgba(0, 255, 100, .85), rgba(0, 0, 0, .85)), url(../images/home/fondo-harpofilm.jpg) no-repeat center center;background-size: cover;} 
#slide04{
  background: -webkit-linear-gradient(bottom left, rgba(50, 50, 50, .85), rgba(254,154,46,.7)), url(../images/home/fondo-footer.jpg) no-repeat center center;background-size: cover;
}

/*  #slide02 .bcg {background: url(../images/home/fondo-diverscity.jpg) no-repeat;background-size: cover;} */ 
/* #slide03 .bcg {background: url(../images/home/fondo-harpofilm.jpg) no-repeat;background-size: cover;}  */

#slide01, #slide03, #slide05 {
  background-color: #ddd;
}

#slide02{
  background-color: #fff;
}

.slide {
  position: relative;
  overflow: hidden;
  height: 100vh; 
}
    .slide .pin-wrapper {
        width: 100%;
        height: 100%;
    }
    .slide .wrapper {
        position: absolute;
        top: 30%;
        left: 50%; 
        z-index:2;
    }
    .slide .img {
        z-index: 2;
        position: absolute;
        width:40%;
        height:50%;
        top: 50%;
        left: 55%;
        background: url(../images/home/movil-globalpiso.png) no-repeat top left;
        background-size:contain;
        transform: translate(-80%, -40%); 
    }

    .slide .tituloFl{
      padding:0;
      margin:0;
      font-size:50px;
      color:#333;
      z-index:2;
      font-family: 'Text Me One', sans-serif;
      font-weight: lighter;
    }

    .slide .wrapper .descrip{
      padding:0;
      margin:0;
      width:70%;
      font-size:20px;
      color:#333;
      z-index: 2;
      font-family: 'Text Me One', sans-serif;
      font-weight: lighter;
      text-align: justify;
    }

#slide02 .img {background: url(../images/home/movil-diverscity.png) no-repeat top left;background-size:contain;}
#slide03 .img {background: url(../images/home/movil-harpofilm.png) no-repeat top left;background-size:contain;}

#slide02 .pin-wrapper,#slide03 .pin-wrapper,#slide04 .pin-wrapper {
    -webkit-transform: translateY(-100%);
       -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
         -o-transform: translateY(-100%);
            transform: translateY(-100%);
}

.scrollmagic-pin-spacer {
    position: absolute !important;
    clip: rect(auto,auto,auto,auto);
}


/*= Fade in text*/
    .slide div .tituloFl,
    .slide div .descrip,
    .slide div .btDescarga{
        -webkit-transition: all 0.3s ease-in;
           -moz-transition: all 0.3s ease-in;
            -ms-transition: all 0.3s ease-in;
             -o-transition: all 0.3s ease-in;
                transition: all 0.3s ease-in;
        opacity: 0;
        visibility: hidden;
    }

    .slide div.fade-in .tituloFl{
      -webkit-transition: all 0.3s ease-in;
           -moz-transition: all 0.3s ease-in;
            -ms-transition: all 0.3s ease-in;
             -o-transition: all 0.3s ease-in;
                transition: all 0.3s ease-in;
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
    }

    .slide div.fade-in .descrip {
        -webkit-transition: all 0.5s ease-in;
           -moz-transition: all 0.5s ease-in;
            -ms-transition: all 0.5s ease-in;
             -o-transition: all 0.5s ease-in;
                transition: all 0.5s ease-in;
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
    }

    .slide div.fade-in .btDescarga {
        -webkit-transition: all 0.3s ease-in;
           -moz-transition: all 0.3s ease-in;
            -ms-transition: all 0.3s ease-in;
             -o-transition: all 0.3s ease-in;
                transition: all 0.3s ease-in;
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
    }

    .slide div .tituloFl {
        -webkit-transform: translateX(300px);
           -moz-transform: translateX(300px);
            -ms-transform: translateX(300px);
             -o-transform: translateX(300px);
                transform: translateX(300px);
    }

    .slide div .descrip {
        -webkit-transform: translateX(400px);
           -moz-transform: translateX(400px);
            -ms-transform: translateX(400px);
             -o-transform: translateX(400px);
                transform: translateX(400px);
        -webkit-transition-delay: 0.3s;
           -moz-transition-delay: 0.3s;
            -ms-transition-delay: 0.3s;
             -o-transition-delay: 0.3s;
                transition-delay: 0.3s;
    }

    .slide div .btDescarga {
        -webkit-transform: translateY(300px);
           -moz-transform: translateY(300px);
            -ms-transform: translateY(300px);
             -o-transform: translateY(300px);
                transform: translateY(300px);
        -webkit-transition-delay: 0.5s;
           -moz-transition-delay: 0.5s;
            -ms-transition-delay: 0.5s;
             -o-transition-delay: 0.5s;
                transition-delay: 0.5s;
    }


  
  .btDescarga{
    display: inline-block;
    margin-top: 30px;
    margin-right: 15px;
  }

   .btDescarga img:hover{
    opacity: 0.7;
  }

  .btDescarga img {
    width: 200px;
  }

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media screen and (max-width: 640px){
    .slide{
      height:auto; 
      padding: 50px 0; 
    }

    .slide .img {
        position: absolute;
        width: 200px;
        height:60%;
        top: 50%;
        left: 35%;
        transform: translate(-80%, -40%); 
    }

    .pin-wrapper{display:none;}
    
    .titSeccionFloat{
      position:relative;
      width: 90%;
      margin:auto;
    }
    .slide .wrapper {
        top: auto;
        left: auto;
        position: relative;
        width: 100%;
        z-index:inherit;
    }

    .slide .tituloFl {
      margin-top:0px;
      font-size:50px;
      text-align: center;
    }

    .slide .wrapper .descrip{
      font-size:20px;
      width: 80%;
      margin: auto;
      text-align: justify;
    }

    .slide .wrapper .btDescargaCt{
      text-align: center;
    }

     .slide .wrapper .btDescargaCt img{
      width: 120px;
    }

    .grande{
      width: 100%;
      position: relative;
      overflow: hidden;
      height: 100vh; 
    }
}

@media screen and (min-width: 640px) and (max-width: 980px){
  .slide .img {
        position: absolute;
        width: 200px;
        height:60%;
        top: 50%;
        left: 35%;
        transform: translate(-80%, -40%); 
    }
    
    .pin-wrapper{display:inline-block;}

    .slide .wrapper {
        top: 25%;
    }

    .grande{
      width: 100%;
      position: relative;
      overflow: hidden;
      height: 100vh; 
    }

    .slide .wrapper .btDescargaCt{
      text-align: left;
    }

     .slide .wrapper .btDescargaCt img{
      width: 120px;
    }
}

@media screen and (min-width: 981px) and (max-width: 1100px){
  .slide .img {
        position: absolute;
        width: 250px;
        height:60%;
        top: 50%;
        left: 35%;
        transform: translate(-80%, -40%); 
    }

    .slide .wrapper {
        top: 30%;
    }
}

@media screen and (min-width: 1101px){
  .slide .img {
        position: absolute;
        width: 300px;
        height:70%;
        top: 50%;
        left: 35%;
        transform: translate(-80%, -40%); 
    }

    .slide .tituloFl {
      font-size:70px;

    }

    .slide .wrapper .descrip{
      font-size:26px;
      
    }

    .slide .wrapper {
        top: 30%;
    }
}