
­­­­­­­­­­­­­­­­­­
<!DOCTYPE html>
<html>
<?php 

include "api.php";


?>

<!DOCTYPE html>
<html lang="en">
<head>
   <title>10 Years Celebration | Autozone Balubaid</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<style>

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.drawbody {
  color: #fff;
  background-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: -19%;
}

.roll {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: white;
  background-color: #314086;
  text-decoration: none;
  font-size: 3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  border: 5px solid #fff;
  padding: 0.5em 2em;
  border-radius: 3em;
  transition: 200ms ease-in-out;
}
.roll:hover {
  background-color: #fff;
  color: #253241;
}

.names {
  font-size: 2.5rem;
}

.winner {
  font-size: 3rem;
  text-align: center;
}
.winner span {
  font-size: 0.35em;
  font-weight: 500;
}

.roll-again {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 17px;
  font-weight: 700;
  padding: 0;
  margin-top: 0.5em;
  color: #ba8751;
  border: none;
  opacity: 0.8;
  transition: 200ms ease-in-out;
}
.roll-again:hover {
  opacity: 1;
}

.hide {
  display: none;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

.drw_bg{
background: transparent url(bg-mbl2.jpg) top center no-repeat; 
background-size: cover;
}	

.mbl{
display:block;	
}
.pc{
display:none;	
}	
	
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

.drw_bg{
background: transparent url(bg-mbl2.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:block;	
}
.pc{
display:none;	
}	
	
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

.drw_bg{
background: transparent url(bg-mbl2.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:none;	
}
.pc{
display:block;	
}	
	
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

.drw_bg{
background: transparent url(bg-pc.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:none;	
}
.pc{
display:block;	
}	
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

.drw_bg{
background: transparent url(bg-pc.jpg) top center no-repeat; 
background-size: cover;
}	

.mbl{
display:none;	
}
.pc{
display:block;	
}
	
}

@font-face {
  font-family: sansarabic;
  src: url(font.woff);
}

div {
  font-family: sansarabic;
}
a:hover{
    text-decoration: none;
}
input:hover{
    text-decoration: none;
}	
input{
outline: none !important;	
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: none;
}
*:focus {
    outline: none;
}

input:-internal-autofill-selected{
background-color:none;
}

</style>

<style>
body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
  to {
    box-shadow: 113px 51.3333333333px #ff1500, -59px -113.6666666667px #0048ff, 105px -62.6666666667px #00ff5e, -125px -390.6666666667px #0088ff, 143px -120.6666666667px #e600ff, 17px 9.3333333333px #c800ff, 42px -59.6666666667px #ff2b00, -170px -393.6666666667px #00ffea, -48px -84.6666666667px #6a00ff, 215px -121.6666666667px #0009ff, 219px -340.6666666667px #80ff00, -159px -0.6666666667px #ff2f00, 132px -308.6666666667px #8000ff, 148px 29.3333333333px #ffaa00, -124px 23.3333333333px #ff0033, -90px -157.6666666667px #ff00bb, 151px 17.3333333333px #ff00ea, -242px 19.3333333333px #0062ff, 232px 65.3333333333px #ff008c, 147px 61.3333333333px #002bff, 63px -320.6666666667px #ffa600, -117px -7.6666666667px #00ffbb, 160px -391.6666666667px #00eaff, 186px 74.3333333333px #5100ff, -238px -81.6666666667px #008cff, -41px 19.3333333333px #b700ff, -136px 66.3333333333px #00ff62, 180px -308.6666666667px #ff0088, 29px -359.6666666667px #0099ff, 36px -397.6666666667px #fff700, 168px -103.6666666667px #ffd900, 15px -273.6666666667px #ff6a00, -169px -349.6666666667px #ff00cc, 80px 46.3333333333px #c400ff, -183px -151.6666666667px #1eff00, 150px -254.6666666667px #aa00ff, 37px -336.6666666667px #00ff8c, -240px -271.6666666667px #00ffea, 129px -48.6666666667px #0040ff, -123px -148.6666666667px #0077ff, 95px -113.6666666667px #ff001e, -34px -365.6666666667px #0066ff, -120px -219.6666666667px #00fff2, -203px -342.6666666667px #7300ff, -73px -88.6666666667px #ff0055, -118px -50.6666666667px #0d00ff, 247px -93.6666666667px #00ff11, 52px -337.6666666667px #00ffcc, -156px -119.6666666667px #ff006f, -64px -217.6666666667px #bf00ff, -132px -230.6666666667px #ff00d5;
  }
}
@-moz-keyframes bang {
  to {
    box-shadow: 113px 51.3333333333px #ff1500, -59px -113.6666666667px #0048ff, 105px -62.6666666667px #00ff5e, -125px -390.6666666667px #0088ff, 143px -120.6666666667px #e600ff, 17px 9.3333333333px #c800ff, 42px -59.6666666667px #ff2b00, -170px -393.6666666667px #00ffea, -48px -84.6666666667px #6a00ff, 215px -121.6666666667px #0009ff, 219px -340.6666666667px #80ff00, -159px -0.6666666667px #ff2f00, 132px -308.6666666667px #8000ff, 148px 29.3333333333px #ffaa00, -124px 23.3333333333px #ff0033, -90px -157.6666666667px #ff00bb, 151px 17.3333333333px #ff00ea, -242px 19.3333333333px #0062ff, 232px 65.3333333333px #ff008c, 147px 61.3333333333px #002bff, 63px -320.6666666667px #ffa600, -117px -7.6666666667px #00ffbb, 160px -391.6666666667px #00eaff, 186px 74.3333333333px #5100ff, -238px -81.6666666667px #008cff, -41px 19.3333333333px #b700ff, -136px 66.3333333333px #00ff62, 180px -308.6666666667px #ff0088, 29px -359.6666666667px #0099ff, 36px -397.6666666667px #fff700, 168px -103.6666666667px #ffd900, 15px -273.6666666667px #ff6a00, -169px -349.6666666667px #ff00cc, 80px 46.3333333333px #c400ff, -183px -151.6666666667px #1eff00, 150px -254.6666666667px #aa00ff, 37px -336.6666666667px #00ff8c, -240px -271.6666666667px #00ffea, 129px -48.6666666667px #0040ff, -123px -148.6666666667px #0077ff, 95px -113.6666666667px #ff001e, -34px -365.6666666667px #0066ff, -120px -219.6666666667px #00fff2, -203px -342.6666666667px #7300ff, -73px -88.6666666667px #ff0055, -118px -50.6666666667px #0d00ff, 247px -93.6666666667px #00ff11, 52px -337.6666666667px #00ffcc, -156px -119.6666666667px #ff006f, -64px -217.6666666667px #bf00ff, -132px -230.6666666667px #ff00d5;
  }
}
@-o-keyframes bang {
  to {
    box-shadow: 113px 51.3333333333px #ff1500, -59px -113.6666666667px #0048ff, 105px -62.6666666667px #00ff5e, -125px -390.6666666667px #0088ff, 143px -120.6666666667px #e600ff, 17px 9.3333333333px #c800ff, 42px -59.6666666667px #ff2b00, -170px -393.6666666667px #00ffea, -48px -84.6666666667px #6a00ff, 215px -121.6666666667px #0009ff, 219px -340.6666666667px #80ff00, -159px -0.6666666667px #ff2f00, 132px -308.6666666667px #8000ff, 148px 29.3333333333px #ffaa00, -124px 23.3333333333px #ff0033, -90px -157.6666666667px #ff00bb, 151px 17.3333333333px #ff00ea, -242px 19.3333333333px #0062ff, 232px 65.3333333333px #ff008c, 147px 61.3333333333px #002bff, 63px -320.6666666667px #ffa600, -117px -7.6666666667px #00ffbb, 160px -391.6666666667px #00eaff, 186px 74.3333333333px #5100ff, -238px -81.6666666667px #008cff, -41px 19.3333333333px #b700ff, -136px 66.3333333333px #00ff62, 180px -308.6666666667px #ff0088, 29px -359.6666666667px #0099ff, 36px -397.6666666667px #fff700, 168px -103.6666666667px #ffd900, 15px -273.6666666667px #ff6a00, -169px -349.6666666667px #ff00cc, 80px 46.3333333333px #c400ff, -183px -151.6666666667px #1eff00, 150px -254.6666666667px #aa00ff, 37px -336.6666666667px #00ff8c, -240px -271.6666666667px #00ffea, 129px -48.6666666667px #0040ff, -123px -148.6666666667px #0077ff, 95px -113.6666666667px #ff001e, -34px -365.6666666667px #0066ff, -120px -219.6666666667px #00fff2, -203px -342.6666666667px #7300ff, -73px -88.6666666667px #ff0055, -118px -50.6666666667px #0d00ff, 247px -93.6666666667px #00ff11, 52px -337.6666666667px #00ffcc, -156px -119.6666666667px #ff006f, -64px -217.6666666667px #bf00ff, -132px -230.6666666667px #ff00d5;
  }
}
@-ms-keyframes bang {
  to {
    box-shadow: 113px 51.3333333333px #ff1500, -59px -113.6666666667px #0048ff, 105px -62.6666666667px #00ff5e, -125px -390.6666666667px #0088ff, 143px -120.6666666667px #e600ff, 17px 9.3333333333px #c800ff, 42px -59.6666666667px #ff2b00, -170px -393.6666666667px #00ffea, -48px -84.6666666667px #6a00ff, 215px -121.6666666667px #0009ff, 219px -340.6666666667px #80ff00, -159px -0.6666666667px #ff2f00, 132px -308.6666666667px #8000ff, 148px 29.3333333333px #ffaa00, -124px 23.3333333333px #ff0033, -90px -157.6666666667px #ff00bb, 151px 17.3333333333px #ff00ea, -242px 19.3333333333px #0062ff, 232px 65.3333333333px #ff008c, 147px 61.3333333333px #002bff, 63px -320.6666666667px #ffa600, -117px -7.6666666667px #00ffbb, 160px -391.6666666667px #00eaff, 186px 74.3333333333px #5100ff, -238px -81.6666666667px #008cff, -41px 19.3333333333px #b700ff, -136px 66.3333333333px #00ff62, 180px -308.6666666667px #ff0088, 29px -359.6666666667px #0099ff, 36px -397.6666666667px #fff700, 168px -103.6666666667px #ffd900, 15px -273.6666666667px #ff6a00, -169px -349.6666666667px #ff00cc, 80px 46.3333333333px #c400ff, -183px -151.6666666667px #1eff00, 150px -254.6666666667px #aa00ff, 37px -336.6666666667px #00ff8c, -240px -271.6666666667px #00ffea, 129px -48.6666666667px #0040ff, -123px -148.6666666667px #0077ff, 95px -113.6666666667px #ff001e, -34px -365.6666666667px #0066ff, -120px -219.6666666667px #00fff2, -203px -342.6666666667px #7300ff, -73px -88.6666666667px #ff0055, -118px -50.6666666667px #0d00ff, 247px -93.6666666667px #00ff11, 52px -337.6666666667px #00ffcc, -156px -119.6666666667px #ff006f, -64px -217.6666666667px #bf00ff, -132px -230.6666666667px #ff00d5;
  }
}
@keyframes bang {
  to {
    box-shadow: 113px 51.3333333333px #ff1500, -59px -113.6666666667px #0048ff, 105px -62.6666666667px #00ff5e, -125px -390.6666666667px #0088ff, 143px -120.6666666667px #e600ff, 17px 9.3333333333px #c800ff, 42px -59.6666666667px #ff2b00, -170px -393.6666666667px #00ffea, -48px -84.6666666667px #6a00ff, 215px -121.6666666667px #0009ff, 219px -340.6666666667px #80ff00, -159px -0.6666666667px #ff2f00, 132px -308.6666666667px #8000ff, 148px 29.3333333333px #ffaa00, -124px 23.3333333333px #ff0033, -90px -157.6666666667px #ff00bb, 151px 17.3333333333px #ff00ea, -242px 19.3333333333px #0062ff, 232px 65.3333333333px #ff008c, 147px 61.3333333333px #002bff, 63px -320.6666666667px #ffa600, -117px -7.6666666667px #00ffbb, 160px -391.6666666667px #00eaff, 186px 74.3333333333px #5100ff, -238px -81.6666666667px #008cff, -41px 19.3333333333px #b700ff, -136px 66.3333333333px #00ff62, 180px -308.6666666667px #ff0088, 29px -359.6666666667px #0099ff, 36px -397.6666666667px #fff700, 168px -103.6666666667px #ffd900, 15px -273.6666666667px #ff6a00, -169px -349.6666666667px #ff00cc, 80px 46.3333333333px #c400ff, -183px -151.6666666667px #1eff00, 150px -254.6666666667px #aa00ff, 37px -336.6666666667px #00ff8c, -240px -271.6666666667px #00ffea, 129px -48.6666666667px #0040ff, -123px -148.6666666667px #0077ff, 95px -113.6666666667px #ff001e, -34px -365.6666666667px #0066ff, -120px -219.6666666667px #00fff2, -203px -342.6666666667px #7300ff, -73px -88.6666666667px #ff0055, -118px -50.6666666667px #0d00ff, 247px -93.6666666667px #00ff11, 52px -337.6666666667px #00ffcc, -156px -119.6666666667px #ff006f, -64px -217.6666666667px #bf00ff, -132px -230.6666666667px #ff00d5;
  }
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
</style> 

<style>
.blink_me1 {
  animation: flash-1 0.4s infinite;
}

.blink_me2 {
  animation: flash-2 0.5s infinite;
}

.blink_me3 {
  animation: flash-3 0.6s infinite;
}

@keyframes flash-1{
		0%,
  100% {
    background: #F9FBEE;
    box-shadow: 0px 4.66667px 24px 3px #F9FBEE;
  }
  50% {
    background: rgba(249, 251, 238, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(249, 251, 238, 0.2);
  }
	}


@keyframes flash-2{
		0%,
  100% {
    background: #ffff00;
    box-shadow: 0px 4.66667px 24px 3px #ffff00;
  }
  50% {
    background: rgba(255, 255, 0, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(255, 255, 0, 0.2);
  }
	}


@keyframes flash-3{
		0%,
  100% {
    background: #30FF00;
    box-shadow: 0px 4.66667px 24px 3px #30FF00;
  }
  50% {
    background: rgba(48, 255, 0, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(48, 255, 0, 0.2);
  }
	}

</style>	
  
</head>
<body class="drw_bg">
<?php 
$ttt = remove_winner_from_draw($_GET['empid']);
$tttt = add_winner($_GET['empname'],$_GET['empid'],$mobile);
?>
<div class="pyro">
  <div class="before"></div>
  <div class="after"></div>
</div>

<div style="height:20px;"></div>
<div style="margin-left:2%;margin-right:2%">
<img src="header_az_draw.png" class="img-fluid mbl" alt="Responsive image">
<img src="header_az_draw_pc.png" class="img-fluid pc" alt="Responsive image">
</div>
<div class="drawbody">

<div style="height:64px;"></div>
<div style="height:64px;"></div>
<div style="height:64px;"></div>
<div style="height:64px;"></div>

<div class="winner winning-lights">
<div style="direction:rtl;">و الفائز هو...</div>
<div>And the winner is...</div>
<div style="color:#ba8751;"><?php echo $_GET['empname']; ?></div>
<div style="color:#ba8751;"><?php echo $_GET['empid']; ?></div>

<!--
<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 380px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 60px;
    left: 380px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 80px;
    left: 380px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 100px;
    left: 380px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 120px;
    left: 380px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 140px;
    left: 380px;
    z-index: 1;"></div> 	

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 160px;
    left: 380px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 180px;
    left: 380px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 200px;
    left: 380px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 220px;
    left: 380px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 240px;
    left: 380px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 260px;
    left: 380px;
    z-index: 1;"></div> 	

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 280px;
    left: 380px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 300px;
    left: 380px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 320px;
    left: 380px;
    z-index: 1;"></div> 	

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 340px;
    left: 380px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 360px;
    left: 380px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 380px;
    left: 380px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 400px;
    left: 380px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 380px;
    z-index: 1;"></div>
	
<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 400px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 420px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 440px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 460px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 480px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 500px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 520px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 540px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 560px;
    z-index: 1;"></div> 	
	
<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 580px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 600px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 620px;
    z-index: 1;"></div> 	
    
<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 640px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 660px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 680px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 700px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 720px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 740px;
    z-index: 1;"></div> 	

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 760px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 780px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 800px;
    z-index: 1;"></div> 	

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 820px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 840px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 860px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 880px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 900px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 920px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 940px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 960px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 980px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 1000px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 1020px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 1040px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 1060px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 1080px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 1100px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 1120px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 1140px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 1160px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 1160px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 60px;
    left: 1160px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 80px;
    left: 1160px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 100px;
    left: 1160px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 120px;
    left: 1160px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 140px;
    left: 1160px;
    z-index: 1;"></div> 	

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 160px;
    left: 1160px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 180px;
    left: 1160px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 200px;
    left: 1160px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 220px;
    left: 1160px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 240px;
    left: 1160px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 260px;
    left: 1160px;
    z-index: 1;"></div> 	

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 280px;
    left: 1160px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 300px;
    left: 1160px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 320px;
    left: 1160px;
    z-index: 1;"></div> 	

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 340px;
    left: 1160px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 360px;
    left: 1160px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 380px;
    left: 1160px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 400px;
    left: 1160px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 420px;
    left: 1160px;
    z-index: 1;"></div>	

	
<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 400px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 420px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 440px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 460px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 480px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 500px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 520px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 540px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 560px;
    z-index: 1;"></div> 	
	
<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 580px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 600px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 620px;
    z-index: 1;"></div> 	
    
<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 640px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 660px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 680px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 700px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 720px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 740px;
    z-index: 1;"></div> 	

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 760px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 780px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 800px;
    z-index: 1;"></div> 	

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 820px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 840px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 860px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 880px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 900px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 920px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 940px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 960px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 980px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 1000px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 1020px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 1040px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 1060px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 1080px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 1100px;
    z-index: 1;"></div> 

<div class="blink_me1" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 1120px;
    z-index: 1;"></div>

<div class="blink_me2" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 1140px;
    z-index: 1;"></div>
    
<div class="blink_me3" style="height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    top: 40px;
    left: 1160px;
    z-index: 1;"></div> 	

		-->



</div>
<div style="height:32px;"></div>
<div style="height:32px;"></div>
<button class="roll-again" style="font-size:25px;background:white;color:#314086;border-radius:45px;padding:15px;font-family: sansarabic;" onclick="rollClick();">أدره مرة أخرى</button>

<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>
<div style="height:30px;"></div>

</div>

<script>
function rollClick(){
	window.location.href = "http://10yearsanniversary.autozone.sa/run-draw.php";
}
</script>

</html>