/* 2020-08-19 Updated */
.roaming-block {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    .roaming-block {
      background: none !important; } }
  .roaming-block-bg {
    padding-top: 90px;
    padding-bottom: 90px; }
    @media screen and (max-width: 767px) {
      .roaming-block-bg {
        padding-top: 45px;
        padding-bottom: 45px; } }

.roaming-container {
  position: relative;
  padding: 200px 0; }

.roaming-phone {
  position: absolute;
  max-width: 300px;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -65%);
  -ms-transform: translate(-50%, -65%);
  transform: translate(-50%, -65%);
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 4; }
  .roaming-phone img {
    width: 100%; }

.roaming-device {
  position: relative;
  max-width: 300px;
  z-index: 1; }
  .roaming-devices {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around; }
  .roaming-device img {
    width: 100%; }
  .roaming-device-wifi {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .roaming-device-wifi span {
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      background-color: rgba(218, 218, 218, 0.6);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      z-index: -1;
      opacity: 0;
      -webkit-animation-name: wifi;
      animation-name: wifi;
      -webkit-animation-duration: 3s;
      animation-duration: 3s;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite; }
    .roaming-device-wifi::before, .roaming-device-wifi::after {
      content: '';
      width: 100%;
      height: 100%;
      background-color: rgba(218, 218, 218, 0.6);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: -1;
      opacity: 1;
      -webkit-animation-name: wifi;
      animation-name: wifi;
      -webkit-animation-duration: 3s;
      animation-duration: 3s;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite; }
    .roaming-device-wifi::before {
      -webkit-transform: translate(-50%, -50%) scale(0.75);
      -ms-transform: translate(-50%, -50%) scale(0.75);
      transform: translate(-50%, -50%) scale(0.75);
      -webkit-animation-delay: 1s;
      animation-delay: 1s; }
    .roaming-device-wifi::after {
      -webkit-transform: translate(-50%, -50%) scale(0.5);
      -ms-transform: translate(-50%, -50%) scale(0.5);
      transform: translate(-50%, -50%) scale(0.5);
      -webkit-animation-delay: .5s;
      animation-delay: .5s; }
    .roaming-device-wifi-active span {
      background-color: rgba(109, 198, 255, 0.6); }
    .roaming-device-wifi-active::before, .roaming-device-wifi-active::after {
      background-color: rgba(109, 198, 255, 0.6); }

.roaming-shining {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
  color: #454545;
  display: inline-block;
  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
  -webkit-mask-size: 200%;
  -webkit-animation: shine 2s linear infinite;
  animation: shine 2s linear infinite; }

.roaming-mobile-image img {
  width: 100%;
  height: auto; }

@-webkit-keyframes wifi {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0; }
  50% {
    opacity: .6; }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(3);
    transform: translate(-50%, -50%) scale(3);
    opacity: 0; } }

@keyframes wifi {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0; }
  50% {
    opacity: .6; }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(3);
    transform: translate(-50%, -50%) scale(3);
    opacity: 0; } }

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%; }
  to {
    -webkit-mask-position: -50%; } }

@keyframes shine {
  from {
    -webkit-mask-position: 150%; }
  to {
    -webkit-mask-position: -50%; } }