/* TOP BUTTONS */

.button {

  width: 120px;
  height: 100px;
  display: inline-block;
  /* border: 1px dashed #FFFFFF; */
  cursor: pointer;    
  position: relative;
  top: 20px;
  color: #f6f6f6;
  text-align: center;
  float: right;
  
}

.sub-text {

  font-family: FrutigerLTCom-Condensed;
  text-transform: uppercase;
  margin-top: 30px;
  position: relative;
  width: 100%;
  display: block;
  animation-name: out-sub-text;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  font-size: 11px;
  
}

.main-text {
  font-family: FrutigerLTCom-Condensed;
  text-transform: uppercase;
  font-size: 22px;
  position: relative;
  width: 100%;
  animation-name: out;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
    
}

.arrow {
  background-image: url('../layout/trangle.png');
  background-repeat: no-repeat;
  background-position: center; 
  width: 100%;
  height: 15px;
  display: block;
  position: absolute;
  animation-name: out-arrow;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  margin-top: 73px;

}

.button-active {
  background-image: url('../layout/button-active.png');
  background-repeat: no-repeat;
  background-position: center; 
  width: 100%;
  height: 11px;
  display: block;
  position: absolute;
  animation-name: out-button-active;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  background-color: none;
  
  }

.button:hover > .main-text {

  animation-name: in;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  
}

.button.active > .main-text {

  animation-name: in;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  
}

.button:hover > .sub-text {

  animation-name: in-sub-text;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  opacity: 1.0;
  
}

.button.active > .sub-text {

  animation-name: in-sub-text;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  opacity: 1.0;
  background-color: none;
  
}

.button:hover > .arrow {

  animation-name: in-arrow;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
  opacity: 1.0;  
}

.button.active > .arrow {

  animation-name: in-arrow;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
  opacity: 1.0;
  background-color: none; 
}

.button:hover > .button-active {

  animation-name: in-button-active;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  opacity: 1.0;  
}

.button.active > .button-active {

  animation-name: in-button-active;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  opacity: 1.0;  
  background-color: none;
}

@keyframes in {
    0%   {top:35px;}
    50% {top:-10px;}
    100% {top: 15px;}
}

@keyframes out {
    0%   {top: 15px;}
    50% {top:-10px;}
    100% {top: 35px;}
}

@keyframes in-sub-text {
    0%   {top: 0px; opacity: 0.0;}
    50% {top:-35px; opacity: 0.5;}
    100% {top: -15px; opacity: 1.0;}
}

@keyframes out-sub-text {
    0%   {top: -25px; opacity: 1.0;}
    50% {top:-15px; opacity: 0.3;}
    100% {top: 0px; opacity: 0.0;}
}

@keyframes in-arrow {
    0%   {top: 3px; opacity: 0.0;}
    50% {top: 3px; opacity: 0.5;}
    100% {top: -2px; opacity: 1.0;}
}

@keyframes out-arrow {
    0%   {top: -2px; opacity: 1.0;}
    50% {top: 0px; opacity: 0.5;}
    100% {top: 2px; opacity: 0.0;}
}

@keyframes in-button-active {
    0%   {top: -30px; opacity: 0.0;}
    50% {top: -15px; opacity: 0.5;}
    100% {top: 0px; opacity: 1.0;}
}

@keyframes out-button-active {
    0%   {top: 0px; opacity: 1.0;}
    50% {top: -15px; opacity: 0.5;}
    100% {top: -30px; opacity: 0.0;}
}

@keyframes in-responsive-menu-dropdown {

   0%  {top: -100px; opacity: 0.0;}
   50% {top: 10px; opacity: 0.5;}
   100% {top: 10px; opacity: 1.0;}
}

a.link {
  position: relative;
  text-decoration: none;
  color: #e3e3e3;
}

a.link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #00bbf2;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.1s ease-in-out 0s;
  transition: all 0.1s ease-in-out 0s;
}

a.link:hover {
  color: #e3e3e3;
}

a.link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.side-menu a {

  color: #555555; /* color: #858585; */
  font-weight: 500;
  transition: all 0.3s ease-in;
  
}

.side-menu a:hover {

  color: #ffffff;
  font-weight: bold;
}