<!-- 
The DIV below has the data-pompous-player-stage attribute, which makes it a pompous player "stage".

The data-design-width="1920" data-design-height="1080" attributes define the presentation display ratio. 1920x1080, also known as 1080p, is the most popular choice, as it fits well on most of the screens.

The web-fonts="..." attribute specifies which web fonts will be used in this example.

The data-skin="none" means that there will be no navigation buttons (we'll add them later).
-->
<div data-pompous-player-stage
     data-skin="carousel"  data-auto-start="true"
     data-design-width="1920" data-design-height="1080"
    data-web-fonts='{"google": {"families":["Srisakdi:700"]}}'
    class="pompous-stage" tabindex="0">
    
    <div class="text-stay" data-classes="show bounceInRight delay-0s">Stay</div>
    <div class="text-at-home" data-classes="show bounceInLeft delay-0s">at home</div>
    <div class="text-safe" data-classes="fade-in flipIn delay-0.7s">s
a
f
e
    </div>
    
    <div class="text-during-the" data-classes="show bounceInRight delay-1.0s">during the</div>
    <div class="text-coronavirus" data-classes="fade-in flipInX delay-2.1s">coronavirus</div>
    <div class="text-outbreak" data-classes="fade-in flipIn delay-2.7s">o
u
t
b
r
e
a
k
    </div>
    <!-- Example of how to apply more-than-one animations on an "actor": just separate the animation classes with a "," -->
    <div class="text-exclamation" data-classes="show rotateInLeft delay-3s, scale-exclamation delay-5s">!</div>
    <div class="covid-image" data-classes="fade-in delay-6s"><img src="https://storage.googleapis.com/pompous-photos-static/sample-images/misc/covid19-red.svg"></img>

</div>

.pompous-stage 
{
  all: initial;
  position: absolute;
  width: 800px;
  height: 0px;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  margin: auto;
  overflow: hidden;
  z-index: 1;
  transform: translate(-50%, -50%) scale(1.0);
  transform-origin: center center;
  outline: none;
  -webkit-user-select: none;        
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  perspective: 1000px;
  background-color: black;
}

/* ================= Slideshow css begin ================= */

/* Animate the opacity from 0 to 1 for 1 seconds */
.fade-in
{
  visibility: visible;
  --pp-opacity-from: 0;
  opacity: 1;
  transition-property: opacity;
  transition-timing-function: ease-out;
  transition-duration: 1s;
}

.show
{
  visibility: visible;
}

.bounceInRight
{
  transition-property: transform;
  --pp-transform-from: translateX(1000px);
  transform: translateX(0px);
  --pp-transition-timing-function: easeOutBack;
  transition-duration: 1.5s;
}

.rotateInLeft
{
  transition-property: transform;
  --pp-transform-from: translateX(-1000px) rotate(0deg);
  transform: translateX(0px) rotate(1800deg);
  --pp-transition-timing-function: easeOutBack;
  transition-duration: 2.0s;
}

.flipIn
{
  transition-property: transform;
  --pp-transform-from: perspective(400px) rotateY(-360deg);
  transform: perspective(400px) rotateY(0deg);
  --pp-transition-timing-function: easeOutCubic;
  transition-duration: 1.5s;
}

.flipInX
{
  transition-property: transform;
  --pp-transform-from: perspective(400px) rotateX(90deg);
  transform: perspective(400px) rotateX(0deg);
  --pp-transition-timing-function: easeOutBounce;
  transition-duration: 1s;
}

.bounceInLeft
{
  transition-property: transform;
  --pp-transform-from: translateX(-1000px);
  transform: translateX(0px);
  --pp-transition-timing-function: easeOutBack;
  transition-duration: 1.5s;
}

.text-stay
{
  position: absolute;
  visibility: hidden;
  top: 163px;
  left: 355px;
  width: auto;
  height: auto;
  padding: 0px 20px 0px 20px;
  font-family: 'Srisakdi';
  font-weight: 700;
  font-style: normal;
  font-size: 142px;
  text-align: left;
  color: #0ea8cc;
  white-space: pre;
  word-break: break-word;
  line-height: 1;
  border-style: none;
}

.text-safe
{
  position: absolute;
  visibility: hidden;
  top: 0px;
  left: 496px;
  width: auto;
  height: auto;
  padding: 0px 20px 0px 20px;
  font-family: 'Srisakdi';
  font-weight: 700;
  font-style: normal;
  font-size: 142px;
  text-align: left;
  color: #0ea8cc;
  white-space: pre;
  word-break: break-word;
  line-height: 1.1;
  border-style: none;
  color: green;
}

.text-at-home
{
  position: absolute;
  visibility: hidden;
  top: 474px;
  left: 68px;
  width: auto;
  height: auto;
  padding: 0px 20px 0px 20px;
  font-family: 'Srisakdi';
  font-weight: 700;
  font-style: normal;
  font-size: 142px;
  text-align: left;
  color: #0ea8cc;
  white-space: pre;
  word-break: break-word;
  line-height: 1;
  border-style: none;  
}

.text-during-the
{
  position: absolute;
  visibility: hidden;
  top: 628px;
  left: 505px;
  width: auto;
  height: auto;
  padding: 0px 20px 0px 20px;
  font-family: 'Srisakdi';
  font-weight: 700;
  font-style: normal;
  font-size: 142px;
  text-align: left;
  color: #0ea8cc;
  white-space: pre;
  word-break: break-word;
  line-height: 1;
  border-style: none;
}

.text-outbreak
{
  position: absolute;
  visibility: hidden;
  top: 0px;
  left: 1078px;
  width: auto;
  height: auto;
  padding: 0px 20px 0px 20px;
  font-family: 'Srisakdi';
  font-weight: 700;
  font-style: normal;
  font-size: 142px;
  text-align: left;
  color: #0ea8cc;
  white-space: pre;
  word-break: break-word;
  line-height: 0.9;
  border-style: none;
}


.text-coronavirus
{
  position: absolute;
  visibility: hidden;
  top: -7px;
  left: 870px;
  width: auto;
  height: auto;
  padding: 0px 20px 0px 20px;
  font-family: 'Srisakdi';
  font-weight: 700;
  font-style: normal;
  font-size: 142px;
  text-align: left;
  color: #0ea8cc;
  white-space: pre;
  word-break: break-word;
  line-height: 1;
  border-style: none;
  color: rgb(211,0,0);
}

.text-exclamation
{
  position: absolute;
  visibility: hidden;
  top: 900px;
  left: 1180px;
  width: auto;
  height: auto;
  padding: 0px 20px 0px 20px;
  font-family: 'Srisakdi';
  font-weight: 700;
  font-style: normal;
  font-size: 142px;
  text-align: left;
  color: #0ea8cc;
  white-space: pre;
  word-break: break-word;
  line-height: 1;
  border-style: none;
  color: rgb(211,0,0);
}

.scale-exclamation 
{
  transition-property: transform;
  --pp-transform-from: translateX(0px) translateY(0px) scale(1);
  transform: translateX(30px) translateY(-110px) scale(3);
  transition-duration: 1.5s;
}

.covid-image
{
  position: absolute;
  visibility: hidden;
  width: 90px;
  height: 90px;
  top: 940px;
  left: 1183px;
}

/**
No Javascript code needed :)

Note: we added the following JS source in the JS "settings":
https://www.pompousphotos.com/js/pompous-player/26/pp-all-in-one.min.js
*/