@charset "UTF-8";
/* Tema do cliente */

/* Fonts */
@font-face {
    font-family: 'latolight';
    src: url('../fonts/lato-light-webfont.eot');
    src: url('../fonts/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-light-webfont.woff2') format('woff2'),
         url('../fonts/lato-light-webfont.woff') format('woff'),
         url('../fonts/lato-light-webfont.ttf') format('truetype'),
         url('../fonts/lato-light-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato-regular-webfont.eot');
    src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-regular-webfont.woff2') format('woff2'),
         url('../fonts/lato-regular-webfont.woff') format('woff'),
         url('../fonts/lato-regular-webfont.ttf') format('truetype'),
         url('../fonts/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Pré formatações */
::-moz-selection{
  background: #FF0000;
}
::selection{
  background: #FF0000;
}

a{
  text-decoration: none;
}


/* página */

body{
  background-image: url(../imagens/fundo.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #F05454;
  background-size: cover;
  text-align: center;
}

.logo{
  margin-top: 28px;
}

h2{
  margin-top: 35px;
  font-family: 'latolight';
  font-size: 28px;
  margin-bottom: 50px;
  color: #FFF;
  font-weight: lighter;
}



.loja h1{
  margin-top: 5px;
  font-family: 'latoregular';
  font-weight: bold;
  color: #4A616C;
  font-size: 40px;
  margin-bottom: 10px;
  line-height: 1;
}

.loja span{
  font-family: 'latoregular';
  color: #4A616C;
  font-size: 16px;
  line-height: 1.05;
}

.institucional h1{
  margin-top: 10px;
  font-family: 'latoregular';
  font-weight: bold;
  color: #FFC926;
  font-size: 40px;
  margin-bottom: 10px;
  line-height: 1;
}

.institucional span{
  font-family: 'latoregular';
  color: #FFFFFF;
  font-size: 16px;
  line-height: 1.05;
}

.footer{
  margin-top: 120px;
  margin-bottom: 15px;
  font-family: 'latoregular';
  color: #FFF;
  font-size: 13px;
  font-weight: lighter;
}

/* responsivo */
  /* Large desktops and laptops */
  @media (min-width: 880px) {

    .cta{
      width: 323px;
      height: 358px;
      display: inline-block;
      position: relative;
    }

    .sombra{
      background-image: url(../imagens/sombra.png);
      width: 393px;
      height: 16px;
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: -37px;
    }

    .holder{
      width: 50%;
      float: left;
      height: 358px;
      position: relative;
    }

    .cta{
      width: 323px;
      height: 242px;
      /*height: 286px;*/
      /*height: 358px;*/
      display: inline-block;
      background-image: url(../imagens/smartphone.png);
      padding-top: 72px;
      margin: 0 75px;  
      transition: all .2s linear;
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .holder + .holder .cta{
      left: 0;
    }

    .cta:hover{
      height: 286px;
    }

    .cta:hover .institucional{
      height: 269px;
    }

    .cta:hover .loja{
      height: 261px;
    }

    .institucional{
      background-image: url(../imagens/fundo-institucional.png);
      width: 286px;
      height: 225px;
      /*height: 286px;*/
      display: inline-block;
      padding-top: 17px;
      transition: all .2s linear;
    }

    

    .loja{
      background-image: url(../imagens/fundo-loja.png);
      width: 286px;
      height: 217px;
      /*height: 261px;*/
      /*height: 286px;*/
      display: inline-block;
      padding-top: 25px;
      transition: all .2s linear;
    }

  }

  /* Portrait tablets and medium desktops */
  @media (min-width: 0px) and (max-width: 879px) {

    body{
      padding: 0 20px;
    }

    .logo{
      max-width: 100%;
      height: auto;
    }

    h2{
      margin-bottom: 20px;
      margin-top: 15px;
      font-size: 25px;
    }

    .institucional{
      background-image: url(../imagens/fundo-institucional.png);
      background-position: center center;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      padding: 15px;
      margin-bottom: 20px;
      position: relative;
    }

    .cta h1{
      font-size: 30px;
    }

    .loja{
      background-image: url(../imagens/fundo-loja.png);
      background-position: center center;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      padding: 15px;
      margin-bottom: 20px;
    }

    .footer{
      margin-top: 50px;
    }

    h1 br{
      display: none;
    }

  }

  
/* /responsivo */