.ath-viewport * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ath-viewport {
  position: relative;
  z-index: 2147483641;
  pointer-events: none;

  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}

.ath-modal {
  pointer-events: auto !important;
  background: rgba(0,0,0,0.6);
}

.ath-mandatory {
  background: #000;
}

.ath-container {
  pointer-events: auto !important;
  position: absolute;
  z-index: 2147483641;
  padding: 0.7em 0.6em;
  width: 18em;

  background: #333333;
  background-size: 100% auto;

  box-shadow: 0 0.2em 0 #cb4727;

  font-family: sans-serif;
  font-size: 15px;
  line-height: 1.5em;
  text-align: center;
}

.ath-container small {
  font-size: 0.8em;
  line-height: 1.3em;
  display: block;
  margin-top: 0.5em;
}

.ath-ios.ath-phone {
  bottom: 1.8em;
  left: 50%;
  margin-left: -9em;
}

.ath-ios6.ath-tablet {
  left: 5em;
  top: 1.8em;
}

.ath-ios7.ath-tablet {
  left: 0.7em;
  top: 1.8em;
}

.ath-ios8.ath-tablet {
  right: 0.4em;
  top: 1.8em;
}

.ath-android {
  bottom: 1.8em;
  left: 50%;
  margin-left: -9em;
}

/* close icon */
.ath-container:before {
  content: '';
  position: relative;
  display: block;
  float: right;
  margin: -0.7em -0.6em 0 0.5em;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAMAAABmmnOVAAAAdVBMVEUAAAA5OTkzMzM7Ozs3NzdBQUFAQEA/Pz8+Pj5BQUFAQEA/Pz8+Pj5BQUFAQEA/Pz9BQUE+Pj4/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8+Pj4/Pz8+Pj4/Pz8/Pz8/Pz8/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8/Pz9AQEA/Pz+fdCaPAAAAJnRSTlMACQoNDjM4OTo7PEFCQ0RFS6ytsbS1tru8vcTFxu7x8vX19vf4+C5yomAAAAJESURBVHgBvdzLTsJAGEfxr4C2KBcVkQsIDsK8/yPaqIsPzVlyzrKrX/5p0kkXEz81L23otc9NpIbbWia2YVLqdnhlqFlhGWpSDHe1aopsSIpRb8gK0dC3G30b9rVmhWZIimTICsvQtx/FsuYOrWHoDjX3Gu31gzJxdki934WrAIOsAIOsAIOiAMPhPsJTgKGN0BVsYIVsYIVpYIVpYIVpYIVpYIVpYIVpYIVpYIVlAIVgEBRs8BRs8BRs8BRs8BRs8BRs8BRs8BRTNmgKNngKNngKNngKNngKNhiKGxgiOlZoBlaYBlaYBlaYBlaYBlaYBlaYBlaYBlZIBlBMfQMrVAMr2KAqBENSHFHhGEABhi5CV6gGUKgGUKgGUKgGUFwuqgEUvoEVsoEVpoEUpgEUggF+gKTKY+h1fxSlC7/Z+RrxOQ3fcEoAPPHZBlaYBlaYBlaYBlZYBlYIhvLBCstw7PgM7hkiWOEZWGEaWGEaWGEaIsakEAysmHkGVpxmvoEVqoEVpoEVpoEVpoEVpoEVpoEVkoEVgkFQsEFSsEFQsGEcoSvY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnmbNAUT2c2WAo2eAo2eAo2eAo2eAo2eArNEPFACjZ4CjZ4CjZ4CjaIird/rBvFH6llNCvewdli1URWCIakSIZesUaDoFg36dKFWk9zCZDei3TtwmCj7pC22AwikiIZPEU29IpFNliKxa/hC9DFITjQPYhcAAAAAElFTkSuQmCC);
  background-color: #cb4727;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 2.7em;
  height: 2.7em;
  text-align: center;
  overflow: hidden;
  color: #ffffff;
  z-index: 2147483642;
}

.ath-container.ath-icon:before {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  float: none;
}

.ath-mandatory .ath-container:before {
  display: none;
}

.ath-container.ath-android:before {
  float: left;
  margin: -0.7em 0.5em 0 -0.6em;
}

.ath-container.ath-android.ath-icon:before {
  position: absolute;
  right: auto;
  left: 0;
  margin: 0;
  float: none;
}


/* applied only if the application icon is shown */
.ath-container.ath-icon {

}

.ath-action-icon {
  display: inline-block;
  vertical-align: middle;
  background-position: 50%;
  background-repeat: no-repeat;
  text-indent: -9999em;
  overflow: hidden;
}

.ath-ios7 .ath-action-icon,
.ath-ios8 .ath-action-icon {
  width: 1.6em;
  height: 1.6em;
  background-image:url(../img/addtohomescreen/action-icon-ios7.png);
  margin-top: -0.3em;
  background-size: auto 100%;
}

.ath-ios6 .ath-action-icon {
  width: 1.8em;
  height: 1.8em;
  background-image:url(../img/addtohomescreen/action-icon-ios6.png);
  margin-bottom: 0.4em;
  background-size: 100% auto;
}

.ath-android .ath-action-icon {
  width: 1.4em;
  height: 1.5em;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEVmZmb///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZW6fJrAAAAEXRSTlMAAAYHG21ub8fLz9DR8/T4+RrZ9owAAAB3SURBVHja7dNLDoAgDATQWv4gKve/rEajJOJiWLgg6WzpSyB0aHqHiNj6nL1lovb4C+hYzkSNAT7mryQFAVOeGAj4CjwEtgrWXpD/uZKtwEJApXt+Vn0flzRhgNiFZQkOXY0aADQZCOCPlsZJ46Rx0jhp3IiN2wGDHhxtldrlwQAAAABJRU5ErkJggg==);
  background-size: 100% auto;
}

.ath-container p {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2147483642;
  text-shadow: 0 0.1em 0 #231F20;
  color: #ffffff;
  font-size: 1.1em;
}

.ath-ios.ath-phone:after {
  content: '';
  background: #333333;
  position: absolute;
  width: 2em;
  height: 2em;
  bottom: -0.9em;
  left: 50%;
  margin-left: -1em;
  -webkit-transform: scaleX(0.9) rotate(45deg);
  transform: scaleX(0.9) rotate(45deg);
  box-shadow: 0.2em 0.2em 0 #cb4727;
}

.ath-ios.ath-tablet:after {
  content: '';
  background: #333333;
  position: absolute;
  width: 2em;
  height: 2em;
  top: -0.9em;
  left: 50%;
  margin-left: -1em;
  -webkit-transform: scaleX(0.9) rotate(45deg);
  transform: scaleX(0.9) rotate(45deg);
  z-index: 2147483641;
}

.ath-application-icon {
  position: relative;
  padding: 0;
  border: 0;
  margin: 0 auto 0.2em auto;
  height: 6em;
  width: 6em;
  z-index: 2147483642;
}

.ath-container.ath-ios .ath-application-icon {
  border-radius: 1em;
  box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.3),
    inset 0 0.07em 0 rgba(255,255,255,0.5);
  margin: 0 auto 0.4em auto;
}

@media only screen and (orientation: landscape) {
  .ath-container.ath-phone {
    width: 24em;
  }

  .ath-android.ath-phone {
    margin-left: -12em;
  }

  .ath-ios.ath-phone {
    margin-left: -12em;
  }

  .ath-ios6:after {
    left: 39%;
  }

  .ath-ios8.ath-phone {
    left: auto;
    bottom: auto;
    right: 0.4em;
    top: 1.8em;
  }

  .ath-ios8.ath-phone:after {
    bottom: auto;
    top: -0.9em;
    left: 68%;
    z-index: 2147483641;
    box-shadow: none;
  }
}