/* CONFIGURATION
Style and configure example page with hero container
*/



.hero {
   width: 100%;
  
   top: 0;
   bottom: 0;
   overflow: hidden;
   
   background-color: black;
   
display: flex;
    top:0;
    align-items: center;
    height: 100vh;
    z-index: 1;
    text-align: center;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



/* IMAGES 
   Style and animate - this example forgoes JS, 
   so the slideshow is timed using only keyframes
*/
.hero img {  
   width: 100%;
  
   z-index: 1;
  
   position: absolute;
   top: 0;
   left: 0;
  
   object-fit: cover;
   opacity: 1.0;
}

.slideshow-img-anim {
   animation-duration: 30s;
   animation-delay: 0s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
}

#slideshow-img-1 {
   animation-name: img1;
} #slideshow-img-2 {
   animation-name: img2;
} #slideshow-img-3 {
   animation-name: img3;
} #slideshow-img-4 {
   animation-name: img4;
}

@keyframes img1 {
   0%{width:150%;top:0;left:0;opacity:0;}
   1%{width:148.75%;top:-1;left:0;opacity:0.125;}
   2%{width:147.5%;top:-2;left:0;opacity:0.25;}
   3%{width:146.25%;top:-3;left:0;opacity:0.375;}
   4%{width:145%;top:-4;left:0;opacity:0.5;}
   5%{width:143.75%;top:-5;left:0;opacity:0.625;}
   6%{width:142.5%;top:-6;left:0;opacity:0.75;}
   7%{width:141.25%;top:-7;left:0;opacity:0.875;}
   8%{width:140%;top:-8;left:0;opacity:1;}
   9%{width:138.75%;top:-9;left:0;opacity:1;}
   10%{width:137.5%;top:-10;left:0;opacity:1;}
   11%{width:136.25%;top:-11;left:0;opacity:1;}
   12%{width:135%;top:-12;left:0;opacity:1;}
   13%{width:133.75%;top:-13;left:0;opacity:1;}
   14%{width:132.5%;top:-14;left:0;opacity:1;}
   15%{width:131.25%;top:-15;left:0;opacity:1;}
   16%{width:130%;top:-16;left:0;opacity:1;}
   17%{width:128.75%;top:-17;left:0;opacity:0.875;}
   18%{width:127.5%;top:-18;left:0;opacity:0.75;}
   19%{width:126.25%;top:-19;left:0;opacity:0.625;}
   20%{width:125%;top:-20;left:0;opacity:0.5;}
   21%{width:123.75%;top:-21;left:0;opacity:0.375;}
   22%{width:122.5%;top:-22;left:0;opacity:0.25;}
   23%{width:121.25%;top:-23;left:0;opacity:0.125;}
   24%{width:120%;top:-24;left:0;opacity:0;}
   100%{width:150%;top:0;left:0;opacity:0;}
}

@keyframes img2 {
   0%{width:120%;top:-32;left:0;opacity:0;}
   16%{width:120%;top:-32;left:0;opacity:0;}
   17%{width:121.25%;top:-31;left:0;opacity:0.125;}
   18%{width:122.5%;top:-30;left:0;opacity:0.25;}
   19%{width:123.75%;top:-29;left:0;opacity:0.375;}
   20%{width:125%;top:-28;left:0;opacity:0.5;}
   21%{width:126.25%;top:-27;left:0;opacity:0.625;}
   22%{width:127.5%;top:-26;left:0;opacity:0.75;}
   23%{width:128.75%;top:-25;left:0;opacity:0.875;}
   24%{width:130%;top:-24;left:0;opacity:1;}
   25%{width:131.25%;top:-23;left:0;opacity:1;}
   26%{width:132.5%;top:-22;left:0;opacity:1;}
   27%{width:133.75%;top:-21;left:0;opacity:1;}
   28%{width:135%;top:-20;left:0;opacity:1;}
   29%{width:136.25%;top:-19;left:0;opacity:1;}
   30%{width:137.5%;top:-18;left:0;opacity:1;}
   31%{width:138.75%;top:-17;left:0;opacity:1;}
   32%{width:140%;top:-16;left:0;opacity:1;}
   33%{width:141.25%;top:-15;left:0;opacity:1;}
   34%{width:142.5%;top:-14;left:0;opacity:1;}
   35%{width:143.75%;top:-13;left:0;opacity:1;}
   36%{width:145%;top:-12;left:0;opacity:1;}
   37%{width:146.25%;top:-11;left:0;opacity:1;}
   38%{width:147.5%;top:-10;left:0;opacity:1;}
   39%{width:148.75%;top:-9;left:0;opacity:1;}
   40%{width:150%;top:-8;left:0;opacity:1;}
   41%{width:151.25%;top:-7;left:0;opacity:0.875;}
   42%{width:152.5%;top:-6;left:0;opacity:0.75;}
   43%{width:153.75%;top:-5;left:0;opacity:0.625;}
   44%{width:155%;top:-4;left:0;opacity:0.5;}
   45%{width:156.25%;top:-3;left:0;opacity:0.375;}
   46%{width:157.5%;top:-2;left:0;opacity:0.25;}
   47%{width:158.75%;top:-1;left:0;opacity:0.125;}
   48%{width:160%;top:0;left:0;opacity:0;}
   100%{width:160%;top:0;left:0;opacity:0;}
}

@keyframes img3 {
   0%{width:160%;top:0;left:0;opacity:0;}
   40%{width:160%;top:0;left:0;opacity:0;}
   41%{width:158.75%;top:-0.5;left:-0.2;opacity:0.125;}
   42%{width:157.5%;top:-1;left:-0.4;opacity:0.25;}
   43%{width:156.25%;top:-1.5;left:-0.6;opacity:0.375;}
   44%{width:155%;top:-2;left:-0.8;opacity:0.5;}
   45%{width:153.75%;top:-2.5;left:-1;opacity:0.625;}
   46%{width:152.5%;top:-3;left:-1.2;opacity:0.75;}
   47%{width:151.25%;top:-3.5;left:-1.4;opacity:0.875;}
   48%{width:150%;top:-4;left:-1.6;opacity:1;}
   49%{width:148.75%;top:-4.5;left:-1.8;opacity:1;}
   50%{width:147.5%;top:-5;left:-2;opacity:1;}
   51%{width:146.25%;top:-5.5;left:-2.2;opacity:1;}
   52%{width:145%;top:-6;left:-2.4;opacity:1;}
   53%{width:143.75%;top:-6.5;left:-2.6;opacity:1;}
   54%{width:142.5%;top:-7;left:-2.8;opacity:1;}
   55%{width:141.25%;top:-7.5;left:-3;opacity:1;}
   56%{width:140%;top:-8;left:-3.2;opacity:1;}
   57%{width:138.75%;top:-8.5;left:-3.4;opacity:1;}
   58%{width:137.5%;top:-9;left:-3.6;opacity:1;}
   59%{width:136.25%;top:-9.5;left:-3.8;opacity:1;}
   60%{width:135%;top:-10;left:-4;opacity:1;}
   61%{width:133.75%;top:-10.5;left:-4.2;opacity:1;}
   62%{width:132.5%;top:-11;left:-4.4;opacity:1;}
   63%{width:131.25%;top:-11.5;left:-4.6;opacity:1;}
   64%{width:130%;top:-12;left:-4.8;opacity:1;}
   65%{width:128.75%;top:-12.5;left:-5;opacity:0.875;}
   66%{width:127.5%;top:-13;left:-5.2;opacity:0.75;}
   67%{width:126.25%;top:-13.5;left:-5.4;opacity:0.625;}
   68%{width:125%;top:-14;left:-5.6;opacity:0.5;}
   69%{width:123.75%;top:-14.5;left:-5.8;opacity:0.375;}
   70%{width:122.5%;top:-15;left:-6;opacity:0.25;}
   71%{width:121.25%;top:-15.5;left:-6.2;opacity:0.125;}
   72%{width:120%;top:-16;left:-6.4;opacity:0;}
   100%{width:120%;top:-16;left:-6.4;opacity:0;}
}

@keyframes img4 {
   0%{width:130%;top:-3.6;left:-1.6;opacity:1;}
   1%{width:128.75%;top:-3.15;left:-1.4;opacity:0.875;}
   2%{width:127.5%;top:-2.7;left:-1.2;opacity:0.75;}
   3%{width:126.25%;top:-2.25;left:-1;opacity:0.625;}
   4%{width:125%;top:-1.8;left:-0.8;opacity:0.5;}
   5%{width:123.75%;top:-1.35;left:-0.6;opacity:0.375;}
   6%{width:122.5%;top:-0.9;left:-0.4;opacity:0.25;}
   7%{width:121.25%;top:-0.45;left:-0.2;opacity:0.125;}
   8%{width:120%;top:0;left:0;opacity:0;}
   9%{width:176.25%;top:-20.25;left:-9;opacity:0;}
   64%{width:176.25%;top:-20.25;left:-9;opacity:0;}
   65%{width:175%;top:-19.8;left:-8.8;opacity:0.125;}
   66%{width:173.75%;top:-19.35;left:-8.6;opacity:0.25;}
   67%{width:172.5%;top:-18.9;left:-8.4;opacity:0.375;}
   68%{width:171.25%;top:-18.45;left:-8.2;opacity:0.5;}
   69%{width:170%;top:-18;left:-8;opacity:0.625;}
   70%{width:168.75%;top:-17.55;left:-7.8;opacity:0.75;}
   71%{width:167.5%;top:-17.1;left:-7.6;opacity:0.875;}
   72%{width:166.25%;top:-16.65;left:-7.4;opacity:1;}
   73%{width:165%;top:-16.2;left:-7.2;opacity:1;}
   74%{width:163.75%;top:-15.75;left:-7;opacity:1;}
   75%{width:162.5%;top:-15.3;left:-6.8;opacity:1;}
   76%{width:161.25%;top:-14.85;left:-6.6;opacity:1;}
   77%{width:160%;top:-14.4;left:-6.4;opacity:1;}
   78%{width:158.75%;top:-13.95;left:-6.2;opacity:1;}
   79%{width:157.5%;top:-13.5;left:-6;opacity:1;}
   80%{width:156.25%;top:-13.05;left:-5.8;opacity:1;}
   81%{width:155%;top:-12.6;left:-5.6;opacity:1;}
   82%{width:153.75%;top:-12.15;left:-5.4;opacity:1;}
   83%{width:152.5%;top:-11.7;left:-5.2;opacity:1;}
   84%{width:151.25%;top:-11.25;left:-5;opacity:1;}
   85%{width:150%;top:-10.8;left:-4.8;opacity:1;}
   86%{width:148.75%;top:-10.35;left:-4.6;opacity:1;}
   87%{width:147.5%;top:-9.9;left:-4.4;opacity:1;}
   88%{width:146.25%;top:-9.45;left:-4.2;opacity:1;}
   89%{width:145%;top:-9;left:-4;opacity:1;}
   90%{width:143.75%;top:-8.55;left:-3.8;opacity:1;}
   91%{width:142.5%;top:-8.1;left:-3.6;opacity:1;}
   92%{width:141.25%;top:-7.65;left:-3.4;opacity:1;}
   93%{width:140%;top:-7.2;left:-3.2;opacity:1;}
   94%{width:138.75%;top:-6.75;left:-3;opacity:1;}
   95%{width:137.5%;top:-6.3;left:-2.8;opacity:1;}
   96%{width:136.25%;top:-5.85;left:-2.6;opacity:1;}
   97%{width:135%;top:-5.4;left:-2.4;opacity:1;}
   98%{width:133.75%;top:-4.95;left:-2.2;opacity:1;}
   99%{width:132.5%;top:-4.5;left:-2;opacity:1;}
   100%{width:131.25%;top:-4.05;left:-1.8;opacity:1;}
}



/* DECORATIVE TEXT BOX
   This content will have no effect on the slideshow
   and can be ignored without compromising the 
   functionality of this example
*/
.textbox-ctr {
   padding: 15px 21px;
   width: 40%;
  
   display: block;
   z-index: 2;
  
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   
   border: 0.5em solid red;
   border-radius: 2em;
  
   
   background: rgba(139,0,0,0.60);
   box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.50);
}

@media screen and (max-width: 600px) {
  div.slideshowmeme {
    display: none;
  }