@import url('https://fonts.googleapis.com/css?family=Roboto');


.wrapper {
 position: absolute;
 top: 90%;
 left: 90%;
 transform: translate(-90%, -90%);
}  

.pulse {
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 width: 90px;
 height: 90px;
 color: #fff;
 text-align: center;
 background: #f39c12;
 border-radius: 50%;
 transition: .5s;
 cursor:pointer;
 padding-top: 20%;
} 

.phone {
 position: absolute;
 font-size: 50px;
 text-align: center;
 width: 90px;
 height: 90px;
 line-height: 94px;
 opacity: 1;
 animation: phone .9s ease-in-out  infinite;
} 

.phone i {
 transition: .5s ease-in-out;
} 

.pulse:hover i{
 transition: .5s ease-in-out;
 transform: scale(0);
 opacity: 0;
}  

.pulse:hover {
 background: #f39c12;
}  

.text {
 position: absolute;
 text-transform: uppercase;
 letter-spacing: 0.3px;
 font-weight: 700;
 top: 23px;
 font-size: 0.9rem;
 transform: scaleX(-1);
 transition: .5s ease-in-out;
 opacity: 0;
} 

.pulse:hover .text {
  transform: scaleX(1);
  transition: .5s ease-in-out;
  opacity: 1;
}

.pulse:hover::before,
.pulse:hover::after {
 content: '';
 position: absolute;
 border: 1px solid #f39c12;
 left: -20px;
 right: -20px;
 top: -20px;
 bottom: -20px;
 border-radius: 50%;
 animation: pulse 1.8s linear infinite;
} 

.pulse:hover::after {
 animation-delay: .5s;
}    

@keyframes pulse {
 0% {
  transform: scale(0.5);
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  transform: scale(1.2);
  opacity: 0;
 }
}   

@keyframes phone {
 0%, 100% {
  transform: rotate(-20deg);
 }
 50% {
  transform: rotate(21deg);
 }
}  

/*----------------------------*/

.btn-modal {
  cursor: pointer;
  margin: auto;
  width: 120px;
  height: 40px;
  font-size: 1.2rem;
  border: 1px solid #cedf90;
  border-radius: 20px;
  background: #cedf90;
  color: #1e0e20;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: 150ms;
}

.btn-modal:hover, .btn-modal:focus {
  cursor: pointer;
  outline: none;
  background: #b7c656;
  border-color: #b7c656;
  transition: 0.6s;
}

.btn-danger:hover, .btn-danger:focus {
  cursor: pointer;
  outline: none;
  background: #ba1e12;
  border-color: #ba1e12;
  transition: 0.6s;
}

.btn-danger {
  cursor: pointer;
  margin: auto;
  width: 120px;
  height: 40px;
  font-size: 1.2rem;
  border: 1px solid #ba3341;
  border-radius: 20px;
  background: #ba3341;
  color: #facc53;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: 150ms;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  cursor: pointer;
  color: #f4f4f4;
  font-size: 3rem;
  font-weight: bold;
  transition: 300ms;
}

.close:hover, .close:focus {
  color: #bbb;
  text-decoration: none;
}

.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding-top: 100px;
  top: 0px;
  left: 0px;
  overflow: auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.9);
}

.modal2 {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding-top: 100px;
  top: 0px;
  left: 0px;
  overflow: auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  background-color: #ebebeb;
  border: 1px solid #1e0e20;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.modal-text {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
}

.frm {
  padding: 20px 0;
}

.frm-input {
  line-height: 3rem;
  border: none;
  border-radius 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 0 10px;
  font-size: 1.2rem;
}

.frm-input:focus {
  outline: none;
}