.fa {
 <!-- padding: 20px; -->
  font-size: 20px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}


.buttonpadding{
	position:absolute;
	bottom:10px;
	width:100%
	
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container .btn:hover {
  background-color: black;
}


.column {
  float: left;
  width:50%;
  padding: 10px;
  height: 100%; /* Should be removed. Only for demonstration */
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 450px;
  margin: auto;
  text-align: center;
  font-family: arial;
  height: 530px;
}



.price {
  color: grey;
  font-size: 22px;
}

.card button {
  border: none;
  outline: 0;
  padding: 8px;
  color: white;
     background: -webkit-linear-gradient(top, #36a9ea 0%,#127fd2 100%);
  text-align: center;
  cursor: pointer;
  width: 30%;
  font-size: 18px;
  border-radius: 3px;

}

.card button:hover {
  opacity: 0.7;
}



@-webkit-keyframes zoom {
    from {
    	-webkit-transform: scale(1,1);
    }
    to {
    	-webkit-transform: scale(1.5,1.5);
    }
}

/* Standard syntax */
@keyframes zoom {
  0% {
        transform: scale(1,1);
   }
   50% {
        transform: scale(0.5,0.5);
   }
}


.classic{
    -webkit-animation: zoom 1s; /* Chrome, Safari, Opera */
    animation: zoom 1s;
	animation-duration: 2s;
}

.classicA{
    -webkit-animation: zoom 1s; /* Chrome, Safari, Opera */
    animation: zoom 1s;
	animation-duration: 6s;
}
.classicB{
    -webkit-animation: zoom 1s; /* Chrome, Safari, Opera */
    animation: zoom 1s;
	animation-duration: 9s;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}
.slideDownA{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 6s;	
	-webkit-animation-duration: 6s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}
.slideDownB{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 9s;	
	-webkit-animation-duration: 9s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}

@keyframes slideDown {
	from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideDown {
	from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  padding: 10px;
  }
  .rotateInDownLeftA {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  padding: 10px;
  }
   .rotateInDownLeftB {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  padding: 10px;
  }
  
  
  @-webkit-keyframes rotateInDownLeft {
  0% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  }
  @keyframes rotateInDownLeft {
  0% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  } 




       .rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  padding: 10px;
  }
        .rotateInDownRightA {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  padding: 10px;
  }
        .rotateInDownRightB {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  padding: 10px;
  }
  
  
  @-webkit-keyframes rotateInDownRight {
  0% {
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  }
  @keyframes rotateInDownRight {
  0% {
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  } 
  
        #zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes zoomIn {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  50% {
  opacity: 1;
  }
  }
  @keyframes zoomIn {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  50% {
  opacity: 1;
  }
  } 
  
  

.close:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.modal-header .close {
    padding: 0rem;
    margin: 1rem 1rem -1rem auto;
}
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
.close {
    background: #ff0707;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
}



