@charset "UTF-8";
/* MGBC Modal */

html.modal-active, body.modal-active {
  overflow: hidden;
}
#phoneContainer, #emailContainer {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 101;
}
hr {
  border: 0; 
  height: 1px; 
  background-image: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(75, 40, 67, 1) 50%,rgba(0,0,0,0) 100%);
  margin: 10px 0;
}
#phoneContainer.phone, #emailContainer.email {
  transform: scaleY(0.01) scaleX(0);
  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#phoneContainer.phone .contactBack .modal, #emailContainer.email .contactBack .modal {
  transform: scale(0);
  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#phoneContainer.phone.out, #emailContainer.email.out {
  transform: scale(1);
  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#phoneContainer.phone.out .contactBack .modal, #emailContainer.email.out .contactBack .modal {
  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#phoneContainer .contactBack, #emailContainer .contactBack {
  display: table-cell;
  background: rgba(75, 40, 67, 0.9);
  text-align: center;
  vertical-align: middle;
}
#phoneContainer .contactBack .modal, #emailContainer .contactBack .modal {
  background: rgba(225, 225, 225, 0.9);
  padding: 20px;
  display: inline-block;
  border-radius: 3px;
  position: relative;
}
#phoneContainer .contactBack .modal h2, #emailContainer .contactBack .modal h2 {
  font-size: 20px;
  font-weight: bold;
  color:#333
}
#phoneContainer .contactBack .modal p a, #emailContainer .contactBack .modal p a {
  font-size: 18px;
  font-weight: normal;
  color: #4B2843;
  text-decoration: none;
  -webkit-transition-property: text-decoration ease;
  transition-property: text-decoration ease;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}
#phoneContainer .contactBack .modal p a:hover, #emailContainer .contactBack .modal p a:hover {
  text-decoration: underline;
}
@keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
@keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}