#banner{
 margin:30px auto;
 
 height: 200px;
 position: fixed;
 top: 150px;
 right: 0px;
 z-index:9999;
}

h4{
  text-align: center; 
  font-family: monospace;
  cursor: pointer;
  color:#000;
  position:fixed;
  bottom:5px;
  right:5px;
  z-index:-1;
}

 svg{
  cursor: pointer !important;
   margin:px auto;

}
 /* End of Global Styling  */ 





 /* Ex1 Styling  */ 
.Banner1{
  display:none;
}

.Biggest, .ShopNow, .Sales { /* ex 1 texts  */
  display:none;
  color: red;
    animation-name: example;
    animation-duration: 4s;
}

.BannerBorderLine, .BannerBorder {
   display:none;
}

.BannerHolder{
 display:none;
}

.BorderAnimationEx1 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: BannerBorder 1s linear forwards;
  animation-delay: 2s;
}
 /* End of Ex1 Styling  */ 




 /* Ex2 Styling  */ 
.Banner2{
  display:none;
}

.Mega, .ShopNowEx2,.SalesEx2,.X {/* ex 2 texts  */
 display:none;
}

.BannerBorderLineEx2, .BannerBorderEx2{
   display:none;
}

.BannerHolderEx2{
 display:none;
}

.BorderAnimationEx2 {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation:BannerBorder 50s linear alternate infinite;
  animation-delay: 0s;
}

 /* End of Ex2 Styling  */ 





 /* Ex3 Styling  */ 
.Banner3{
  display:none;
}

.Best,.SalesEx3, .Limited .X {/* ex 3 texts  */
 display:none;
}

.BannerBorderLineEx3, .BannerBorderEx3{
   display:none;
}

.BannerHolderEx3{
 display:none;
}

.BorderAnimationEx3 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: BannerBorder 3s linear alternate infinite;
  animation-delay: 0s;
}

 /* End of Ex3 Styling  */ 


 /* Ex4 Styling  */ 
.Banner4{
  display:none;
}

.SaleEx4, .BestEx4 {/* ex 4 texts  */
   display:none;
}

.OffEx4 {/* ex 4 texts  */
   display:none;
   -webkit-animation: fadeinout 1s linear forwards;
  animation: fadeinout 1s linear alternate infinite;
  animation-delay: 0s;
}
 

.BannerBorderLineEx4, .BannerBorderEx4{
   display:none;
}

.BannerHolderEx4{
 display:none;
}

.circleEx4{
  display:none; 
}

.triangle1Ex4{
  display:none; 
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 3s linear alternate infinite;
  animation-delay: 2s;
}

.triangle2Ex4{
  display:none; 
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 2s linear alternate infinite;
  animation-delay: 3s;
}

.triangle3Ex4{
  display:none; 
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 1s linear alternate infinite;
  animation-delay: 4s;
}

.BorderAnimationEx4 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: BannerBorder 2s linear forwards;
  animation-delay: 0s;
}

 /* End of Ex4 Styling  */ 


/* Ex5 Styling  */ 
.Banner5{
  display:none;
}

.SaleEx5, .BestEx5 {/* ex 5 texts  */
   display:none;
}

.OffEx5 {/* ex 5 texts  */
   display:none;
   -webkit-animation: fadeinout 1s linear forwards;
  animation: fadeinout 1s linear alternate infinite;
  animation-delay: 0s;
}
 

.BannerBorderLineEx5, .BannerBorderEx5{
   display:none;
}

.BannerHolderEx5{
 display:none;
}

.circleEx5{
  display:none; 
}

.triangle1Ex5, .Oval1Ex5 {
  display:none; 
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 3s linear alternate infinite;
  animation-delay: 2s;
}

.triangle2Ex5, Oval2Ex5{
  display:none; 
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 2s linear alternate infinite;
  animation-delay: 3s;
}

.triangle3Ex5, .Oval3Ex5{
  display:none;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 1s linear alternate infinite;
  animation-delay: 4s;
}

.triangle4Ex5{
  display:none; 
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 1s linear alternate infinite;
  animation-delay: 4s;
}

.BorderAnimationEx5 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: BannerBorder 2s linear forwards;
  animation-delay: 0s;
}

 /* End of Ex5 Styling  */ 


/* Ex6 Styling  */ 
.Banner6{
  display:none;
}

.SaleEx6 {/* ex 6 texts  */
   display:none;
}

.OffEx6 {/* ex 6 texts  */
   display:none;
}
 

.BannerBorderLineEx6, .BannerBorderEx6{
   display:none;
}

.BannerHolderEx6{
 display:none;
}

.circleEx6{
  display:none; 
}

.circleEx6Shadow, .OffTextEx6 {
  -webkit-animation: fadeinout 1s linear forwards;
  animation: fadeinout 4s linear alternate infinite;
  animation-delay: 0s;
}

.BorderAnimationEx6 {
 stroke-dasharray: 4;
  stroke-dashoffset: 4;
  animation: BannerBorder 200s linear alternate infinite;
  animation-delay: 0s;
}

 /* End of Ex6 Styling  */ 


 /* Global Border Animation   */ 
@keyframes BannerBorder {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 1;
  }
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}


@keyframes example {
    from {color: red;}
    to {color: yellow;}
}