.q-svg-container{
  width: 100%;
  height: 350px;
}
.q-svg-span{
  opacity: 0;
  position: relative;
}
.q-svg-ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  height: 100%;
  position: relative;

}
.q-svg-ul li{
  position: absolute;
  width: 100%;
  height: 100%;
}
.q-svg-ul li span{
  width: inherit;
  height: inherit;
  display: block;
}
.q-svg-ul li span svg{
  width: 100%;
  height: 100%;
}

.q-svg-animation{
  -webkit-transition: all .8s cubic-bezier(.19,1,.22,1);
  transition: all .8s cubic-bezier(.19,1,.22,1);
  -moz-transition: all .8s cubic-bezier(.19,1,.22,1);
  -o-transition: all .8s cubic-bezier(.19,1,.22,1);
}
.q-svg-logo-stroke{

   stroke-width:1px;
     fill:none;
     stroke-miterlimit:10;
       stroke:rgba(0,0,0,0.9);
       opacity: 0;
  }
.q-svg-phone-stroke,.f-stroke{
      stroke-width:2px;
        fill:none;
        stroke-miterlimit:10;
          stroke:rgba(0,0,0,0.9);
          opacity: 0;
  }

  .q-svg-logo-fill,.q-svg-dot-fill{

    opacity: 0;
  }

  .q-offset-fill{
    opacity: 0;
  -webkit-transform:translate(0px,6px);
  -ms-transform:translate(0px,6px);
  -moz-transform:translate(0px,6px);
  -o-transform:translate(0px,6px);
  transform:translate(0px,6px);
  }

  .q-reveal-fill{
    opacity: 1;
    transform:translate(-0.3px,-0.7px);
  -webkit-transform:translate(-0.3px,-0.7px);
  -ms-transform:translate(-0.3px,-0.7px);
  -moz-transform:translate(-0.3px,-0.7px);
  -o-transform:translate(-0.3px,-0.7px);
  }

.q-child-phone-svg{
    width: 100%;
    height: 100%;

margin: auto;
position: absolute;
top:0%;
left: 0%;
z-index: -1;
  }

#q-svg-phone-friend-right{
  opacity: .7;
transform: rotate(13deg) scale(0.8) translate(42.9px, -59.5px);
-webkit-transform: rotate(13deg) scale(0.8) translate(42.9px, -59.5px);
-ms-transform: rotate(13deg) scale(0.8) translate(42.9px, -59.5px);
-moz-transform: rotate(13deg) scale(0.8) translate(42.9px, -59.5px);
-o-transform: rotate(13deg) scale(0.8) translate(42.9px, -59.5px);
}


#q-svg-phone-friend-left{
  opacity: .3;
  transform: rotate(-30deg) scale(0.5) translate(-82px, -145.5px);
  -webkit-transform:rotate(-30deg) scale(0.5) translate(-82px, -145.5px);
  -ms-transform: rotate(-30deg) scale(0.5) translate(-82px, -145.5px);
  -moz-transform: rotate(-30deg) scale(0.5) translate(-82px, -145.5px);
  -o-transform: rotate(-30deg) scale(0.5) translate(-82px, -145.5px);
}

.q-hide-child-svg{
opacity: 0 !important;
transform: rotate(0) translate(0px, 5px) !important;
-webkit-transform:  rotate(0) translate(0px, 5px) !important;
-ms-transform:  rotate(0) translate(0px, 5px) !important;
-moz-transform:  rotate(0) translate(0px, 5px) !important;
-o-transform:  rotate(0) translate(0px, 5px) !important;
}

.q-child-svg-animation{
  -webkit-transition: all .4s cubic-bezier(.19,1,.22,1);
  transition: all .4s cubic-bezier(.19,1,.22,1);
  -moz-transition: all .4s cubic-bezier(.19,1,.22,1);
  -o-transition: all .4s cubic-bezier(.19,1,.22,1);
}


@media (min-width: 768px) {
  .q-svg-container{
    height: 500px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  #q-svg-phone-friend-right{

  transform: rotate(30deg) scale(0.8) translate(136.3px, -65.5px);
  -webkit-transform: rotate(30deg) scale(0.8) translate(136.3px, -65.5px);
  -ms-transform: rotate(30deg) scale(0.8) translate(136.3px, -65.5px);
  -moz-transform: rotate(30deg) scale(0.8) translate(136.3px, -65.5px);
  -o-transform: rotate(30deg) scale(0.8) translate(136.3px, -65.5px);
  }


  #q-svg-phone-friend-left{
    transform: rotate(-30deg) scale(0.6) translate(-121.8px, -145.5px);
    -webkit-transform: rotate(-30deg) scale(0.6) translate(-121.8px, -145.5px);
    -ms-transform: rotate(-30deg) scale(0.6) translate(-121.8px, -145.5px);
    -moz-transform: rotate(-30deg) scale(0.6) translate(-121.8px, -145.5px);
    -o-transform: rotate(-30deg) scale(0.6) translate(-121.8px, -145.5px);
  }
}

  @media (min-width: 992px) {
    .q-svg-container{
      height: 100%;
      padding-top: 0;
      padding-bottom: 0;
    }
  }