#landing-page {
  width: 750px;
  height: 590px;
  margin: auto;
}

#landing-page h1 {
  width: 439px;
  height: 195px;
  margin-top: 175px;
}

#landing-page .message {
  clear: both;
  padding-top: 4em;
  text-align: center;
  font-size: 12px;
  color: white;
}

#welcome {
  width: 357px;
  height: 136px;
  background-position: 0 -198px;
  padding: 6px 25px;
  margin: 20px 0 0 60px;
  float: left;
}

#welcome h2 {
  font-family: 'Museo500';
  font-size: 20px;
  font-weight: normal;
  color: #fff;
}

#welcome p {
  font-size: 12px;
  color: #7d6800;
  margin-top: 20px;
}

#menu-home {
  width: 235px;
  float: right;
  position: relative;
  margin-top: -110px;
}

#menu-home .btn {
  position: relative;
  height: 88px;
  margin-top: -44px;
  -webkit-box-shadow: 0 15px 8px -5px rgba(0, 0, 0, 0.4);
          box-shadow: 0 15px 8px -5px rgba(0, 0, 0, 0.4);

  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);

  -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
}

#menu-home .btn:hover {
  -webkit-transform: translateY(-20px);
     -moz-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
          transform: translateY(-20px);
}

/* RECALCULAR */
#menu-home .btn-2 {
  width: 160px;
  background-position: 0 -334px;
}

#menu-home .btn-5 {
  width: 165px;
  background-position: -161px -334px;
}

#menu-home .btn-10 {
  width: 178px;
  background-position: -327px -334px;
}

#menu-home .btn-20 {
  width: 185px;
  background-position: -506px -334px;
}

#menu-home .btn-50 {
  width: 191px;
  background-position: -692px -334px;
}

#menu-home .btn-100 {
  width: 202px;
  background-position: -884px -334px;
}

/* IE7 and IE8 */
.lt-ie8 #welcome{
  width: 310px;
  height: 125px;
}

/**********************
     TABLET
***********************/
@media only screen and (device-width: 768px) {    
  #landing-page {
    width: 672px;
    margin: 0 auto;
    height: auto;
  }

  #landing-page h1 {
    margin: 0 auto;
    background: url(../../img/common/sprite-tablet.png) no-repeat;
    background-size:1500px 500px;
    float:none;
    width:291px;
    height:129px;
    background-position: 0 -260px;
  }

  #landing-page .message {
    display:none;
  }

  #menu-home {
    float:none;
    width:341px;
    height:705px;
    margin:40px auto 0 auto;
  }

  #menu-home .sprite {
    background-image:url(../../img/common/sprite-tablet.png);
    background-size: 1500px 500px;
    -webkit-box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.4);
  }

  #menu-home .btn {
    position: absolute;
  }

  #menu-home .btn-10 {
    background-position: 0 0;
    width:300px;
    height:144px;
    left:21px;
    -webkit-transform: rotate(5.95deg);
    -moz-transform: rotate(5.95deg);
    -ms-transform: rotate(5.95deg);
    transform: rotate(5.95deg);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    top:200px;
  }

  #menu-home .btn-2 {
    background-position: -504px -259px;
    width:265px;
    height:142px;
    top:50px;
    left:15px;
    -webkit-transform: rotate(4.03deg);
    -moz-transform: rotate(4.03deg);
    -ms-transform: rotate(4.03deg);
    transform: rotate(4.03deg);
  }

  #menu-home .btn-5 {
    background-position: -779px -259px;
    width:280px;
    height:144px;
    top:120px;
    left:15px;
    -webkit-transform: rotate(-4.03deg);
    -moz-transform: rotate(-4.03deg);
    -ms-transform: rotate(-4.03deg);
    transform: rotate(-4.03deg);
  }
  #menu-home .btn-20 {
    background-position: -300px 0;
    width:315px;
    height:144px;
    top:300px;
    left:15px;
  }

  #menu-home .btn-50 {
    background-position: -615px 0;
    width:322px;
    height:151px;
    top:405px;
    left:9px;
    -webkit-transform: rotate(-4.03deg);
    -moz-transform: rotate(-4.03deg);
    -ms-transform: rotate(-4.03deg);
    transform: rotate(-4.03deg);
  }

  #menu-home .btn-100 {
    background-position: -937px 0;
    width:341px;
    height:150px;
    top:517px;
    -webkit-transform: rotate(-7.56deg);
    -moz-transform: rotate(-7.56deg);
    -ms-transform: rotate(-7.56deg);
    transform: rotate(-7.56deg);
  }

  #welcome {
    float:none;
    margin: 0 auto;
    width:487px;
    height: 115px;
    background-image:url(../../img/common/sprite-tablet.png);
    background-size: 1500px 500px;
    background-position: 0 -144px;
  }
  .header-separator {
    background-position: 0 -355px;
    width: 643px;
    height: 3px;
    position: absolute;
    left: 0;
    bottom: -11px;
    background-size: 1000px auto;
  }
  .main-navigation {
    margin: 0 auto;
    display: block;
    float: none;
  }
}

/**********************
     SMARTPHONE
***********************/
@media only screen and (max-device-width: 320px) {
  #menu-home .btn-2:hover,
  #menu-home .btn-5:hover,
  #menu-home .btn-10:hover,
  #menu-home .btn-20:hover,
  #menu-home .btn-50:hover,
  #menu-home .btn-100:hover {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }

  #landing-page {
    width: 300px;
    margin: 0 auto;
    height: auto;
  }

  #menu-home {
    float:none;
    width:198px;
    height:125px;
    margin:42px auto 0 auto;
  }

  #menu-home .sprite {
    background-image:url(../../img/common/sprite-phone.png);
    background-size: 375px auto;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  #menu-home .btn-2 {
    background-position: -150px -150px;
    width:132px;
    height:71px;
    margin-left: -150px;
  }

  #menu-home .btn-5 {
    background-position: -287px -150px;
    width:141px;
    height:71px;
    margin: -20px 0 0 -155px;
  }

  #menu-home .btn-10 {
    background-position: 0 0;
    width:151px;
    height:73px;
    margin: -20px 0 0 -159px;
  }

  #menu-home .btn-20 {
    background-position: -162px 0;
    width:159px;
    height:73px;
    margin: -175px 0 0 -4px;
  }

  #menu-home .btn-50 {
    background-position: -325px 0;
    width:163px;
    height:76px;
    margin: -21px 0 0 -5px;
  }

  #menu-home .btn-100 {
    background-position: -500px 0;
    width:170px;
    height:75px;
    margin:-29px 0 0 -8px;
  }

  #menu-home a {
    background-size: 750px auto!important;
    z-index:5;
    left:50%;
    right: auto;
    top:30px;
    overflow: visible;
  }

  #landing-page h1 {
    margin: 0 auto;
    background: url(../../img/common/sprite-phone.png) no-repeat;
    background-size:750px 250px;
    float:none;
    width:146px;
    height:65px;
    background-position: 0 -137px;
  }

  #landing-page .message {
    display:none;
  }

  #welcome {
    float:none;
    margin: 0 auto;
    width:243px;
    height: 57px;
    background: url(../../img/common/sprite-phone.png) no-repeat;
    background-size:750px 250px;
    background-position: 0 -75px;
    font-size: 14px;
    color:#7d6800;
    margin-top:10px;
    padding:3px 12px;
  }

  #welcome h2 {
    font-size:10px;
  }

  #welcome p {
    font-size:8px;
    line-height:10px;
    margin-top:8px
  }

  footer {
    margin-top: 90px !important;
  }
}


@media screen and (max-device-width: 320px) and (-webkit-device-pixel-ratio: 2) {
  #landing-page h1,
  #menu-home .sprite,
  #menu-home .active:after,
  #welcome {
    background-image: url(../../img/common/sprite-phone2x.png);
  }
}