.rotationFail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .95);
    color: #fff;
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
}

@keyframes spin {
   from {transform:rotate(0deg);}
   to {transform:rotate(359deg);}
}

.rotationFail .fa-sync {
    animation: spin 5s infinite;
    transform-origin: 50% 50%;
    margin-right: 1rem;
}

/* Landscape */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .rotationFail {
        display: flex;
    }
}

/* Landscape */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {
    .rotationFail {
        display: flex;
    }
}

/* Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4)
  and (orientation: landscape) {
    .rotationFail {
        display: flex;
    }
}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
    .rotationFail {
        display: flex;
    }
}

/* Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
    .rotationFail {
        display: flex;
    }
}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .rotationFail {
        display: flex;
    }
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .rotationFail {
        display: flex;
    }
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .rotationFail {
        display: flex;
    }
}

/* Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {
    .rotationFail {
        display: flex;
    }
}

/* Landscape */
@media screen
  and (device-width: 480px)
  and (device-height: 800px)
  and (orientation: landscape) {
    .rotationFail {
        display: flex;
    }
}