/* 
    Document   : style
    Created on : 16.04.2012, 15:43:44
    Author     : GEN
    Description:
        Purpose of the stylesheet follows.
*/

body {
 font-family: Arial, sans-serif;
 
}
.dws {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.pulse, .bloc, .phone {
 position: absolute;
 width: 90px;
 height: 90px;
 color: white;
 text-align: center;
 border-radius: 50%;
}
.bloc {
 cursor: pointer;
 z-index: 1;
 overflow: hidden;
}



.pulse {
 background: #48975b;
 position: relative;
 transition: .5s;
}
.phone {
 font-size: 50px;
 line-height: 94px;
 animation: phone .9s ease-in-out infinite;
}

.text {
 position: absolute;
 opacity: 0;
 text-transform: uppercase;
 font-weight: 700;
 top: 28px;
 font-size: 15px;
 transform: scaleX(-1);
 transition: .5s ease-in-out;
}
.phone i {
 transition: .5s ease-in-out;
}
.pulse:hover {
 background: lightgreen ;
}
.pulse:hover i {
 transition: .5s ease-in-out;
 transform: scale(0);
}
.pulse:hover .text {
 transform: scaleX(1);
 transition: .5s ease-in-out;
 opacity: 1;
}
.pulse:hover::before,
.pulse:hover::after {
 content: '';
 position: absolute;
 border: 2px solid #29AEE3;
 left: -20px;
 right: -20px;
 top: -20px;
 bottom: -20px;
 border-radius: 50%;
 animation: pulse 1.8s linear infinite;
 opacity: 0;
}
.pulse:hover::after {
 animation-delay: .5s;
}

@keyframes phone {
 0%, 100% {
  transform: rotate(-20deg);
 }
 50% {
  transform: rotate(21deg);
 }
}
@keyframes pulse {
 0% {
  transform: scale(0.5);
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  transform: scale(1.2);
  opacity: 0;
 }
}



@media only screen and (min-width: 600px)
{
    .pulse 
    {
        height: 5em;
        width: 5em;
    }
}

@media only screen and (min-width: 800px)
{
  .pulse
    {
       height: 5em;
        width: 5em;
    }
}