.button-application {
  height: 180px;
  text-align: left;
  position: relative;
  margin-top: 1em;
  display: block;
  width: 100%;
  background-color: #337ab7;
  color: #ffffff;
  overflow: hidden;
  border: none;
  padding: 10px 15px;
}
.button-application .application-list-item-icon-background {
  top: 0px;
  overflow: hidden;
  position: absolute;
  height: 170px;
  width: 80%;
}
.button-application .application-list-item-icon-background span {
  font-size: 300px;
  color: #377ebb;
  position: absolute;
  bottom: 0px;
 -webkit-transition: bottom 2s ease; /* Safari */
  transition: bottom 2s ease;
}
.button-application:hover .application-list-item-icon-background span {
  bottom: -80px
}

.button-application .application-list-item-icon {
  top: 30px;
  right: 10px;
  overflow: hidden;
  position: absolute;
  font-size: 120px;
  color: #266fac;
  height: 168px;
 -webkit-transition: right 2s ease; /* Safari */
  transition: right 2s ease;
}
.button-application:hover .application-list-item-icon {
  right: -30px;
}
.button-application .application-list-item-name {
  position: absolute;
  top: 0px;
}
.button-application .application-list-item-description {
  position: absolute;
  top: 65px;
  white-space: normal;
  display: none;
}
.button-application:hover .application-list-item-description {
  display: block;
}
.button-application:hover .application-list-item-name {
  width: 98%;
  border-bottom: 2px solid #3c83c0;
  padding-bottom: 10px;
}
.button-application:hover  {
  border-left: 10px solid #266fac;
  padding-left: 5px;
}
body {
  background: url("./images/bg-center.jpg") repeat scroll 0 0 transparent;
}

.product-name-area {
  box-shadow: 0 0 5px #333333;
  background-color: #337ab7;
  color: white;
  font-size: 5em;
  border-radius: 10px;
  width: 100%;
  min-height: 100px;
}

#loginLockIconSmall {
    display: none;
}

#loginGearSmall {
  display: none;
}

#loginLanguageMenuSmall {
  display: none;
}

#loginGearDiv {
  margin-top: 2px;
}

@media (max-width: 600px), (max-height: 690px) {
  .product-name-area {
      box-shadow: 0 0 5px #333333;
      font-size: 3em;
      min-height: 3em;
  }
}

@media (max-width: 500px), (max-height: 670px) {
  .product-name-area {
      box-shadow: 0 0 5px #333333;
      font-size: 2em;
      min-height: 2em;
  }
  .top-content .inner-bg {
    padding: 0px 0 0px 0 !important;
  }
}

@media (max-width: 400px), (max-height: 620px) {
  .product-name-area {
      box-shadow: 0 0 5px #333333;
      font-size: 1.5em;
      min-height: 1.5em;
  }
    
  #enterLoginData {
      display: none;
  }
  
  #loginChoice {
      display: none;
  }
  
  #loginLockIcon {
      display: none;
  }
  
  #loginLockIconSmall {
      display: block;
  }

  #loginGear {
    display: none;
  }
  
  #loginGearSmall {
    display: block;
  }
  
  #loginGearDiv {
    margin-top: -12px;
  }
  
  #loginLanguageMenuSmall {
    display: block;
  }

  #loginLanguageMenu {
    display: none;
  }
  
  .top-content .inner-bg {
    padding: 0px 0 0px 0 !important;
  }
  
  .button-application {
    max-height: 80px;
  }
  
  .button-application h3 {
    font-size: 20px;
  }

  .button-application h5 {
    display: none !important;
  }
}