.donebutton {
    margin: 0;
    position: absolute;
    font-size: 30px;
    top: 50%;
    left: 98%;
    -ms-transform: translate(-50%, -98%);
    transform: translate(-50%, -98%);
    cursor: pointer;
}
.prevbutton {
    margin: 0;
    position: absolute;
    font-size: 30px;
    top: 50%;
    right: 95%;
    -ms-transform: translate(-50%, -95%);
    transform: translate(-50%, -95%);
    cursor: pointer;
}
.prevbutton:click, .donebutton:click {
  background-color: rgba(0,0,0,0.8);
}
.pagenumber {
    margin: 0;
    position: absolute;
    top: 98%;
    left: 50%;
    -ms-transform: translate(-98%, -98%);
    transform: translate(-98%, -98%);
    font-family: Trebuchet MS;
}
.pageTitle {
    font-family: Trebuchet MS;
    font-weight: bold;
    font-size: 25px;
}
.pageSubTitle {
    font-family: Trebuchet MS;
    font-size: 20px;
}
.centered {
    padding-top: 10%;
    max-height: 100%;
    text-align: center;
}
.centered .promo {
    position: relative;
    top: 10%;
    /*left: 35%;*/
    height: 80%;
    /*width: 350px;*/
}
.centered .imgslide {
    /*top: 20% !important;*/
    height: 140px;
    width: 140px;
    position: relative;
}

@media only screen and (orientation:portrait) {   
  .donebutton {
      margin: 0;
      position: absolute;
      font-size: 30px;
      top: 50%;
      left: 95%;
      -ms-transform: translate(-50%, -95%);
      transform: translate(-50%, -95%);
      cursor: pointer;
      opacity: 0.5;
  }
  .prevbutton {
      margin: 0;
      position: absolute;
      font-size: 30px;
      top: 50%;
      right: 87%;
      -ms-transform: translate(-50%, -87%);
      transform: translate(-50%, -87%);
      cursor: pointer;
      opacity: 0.5;
  }
  .pagenumber {
      margin: 0;
      position: absolute;
      top: 98%;
      left: 55%;
      -ms-transform: translate(-98%, -98%);
      transform: translate(-98%, -98%);
      font-family: Trebuchet MS;
  }
  .pageTitle {
      font-family: Trebuchet MS;
      font-weight: bold;
      font-size: 22px;
  }
  .pageSubTitle {
      font-family: Trebuchet MS;
      font-size: 15px;
      margin-right: 10px;
      margin-left: 10px;
  }
  .centered {
      padding-top: 20%;
      max-height: 100%;
      text-align: center;
  }
  .centered .promo {
      padding-top: 12% !important;
      height: 380px;
      width: 240px;
      /*position: relative;*/
  }
  .centered .imgslide {
      padding-top: 30%;
      /*margin-top: 25%;*/
      height: 180px;
      width: 180px;
      position: relative;
  }
}

@media only screen and (orientation:landscape) {   
  .donebutton {
      margin: 0;
      position: absolute;
      font-size: 190%;
      top: 50%;
      left: 96%;
      -ms-transform: translate(-50%, -96%);
      transform: translate(-50%, -96%);
      cursor: pointer;
      opacity: 0.5;
  }
  .prevbutton {
      margin: 0;
      position: absolute;
      font-size: 190%;
      top: 50%;
      right: 92%;
      -ms-transform: translate(-50%, -92%);
      transform: translate(-50%, -92%);
      cursor: pointer;
      opacity: 0.5;
  }
  .pagenumber {
      margin: 0;
      position: absolute;
      top: 98%;
      left: 50%;
      -ms-transform: translate(-50%, -98%);
      transform: translate(-50%, -98%);
      font-family: Trebuchet MS;
      font-size: 16px;
  }
  .pageTitle {
      font-family: Trebuchet MS;
      font-weight: bold;
      font-size: 130%;
  }
  .pageSubTitle {
      font-family: Trebuchet MS;
      font-size: 100%;
      margin-right: 10%;
      margin-left: 10%;
  }
  .centered {
      padding-top: 5%;
      height: 90%;
      text-align: center;
  }
  .centered .promo {
      /*left: 37%;*/
      position: relative;
      height: 50%;
      width: 25%;
  }
  .centered .imgslide {
      padding-top: 6%;
      height: 8%;
      width: 24%;
      /*position: relative;*/
  }
}