@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap");
@font-face {
    font-family: 'almushaf';
    src: url('media/almushaf.ttf') format('truetype');
}

div.b-mobile {display:none;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;font-family: 'Almarai','Helvetica',Tahoma;
    outline: 0;
    font-size: 100%;
    background: transparent;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    font: 100% "Helvetica", Tahoma, Arial,sans-serif;
    width: 100%;
  background: none scroll 0 0 #21454c;

}
a {
    color: blue;
    outline: 0 none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
html {overflow-y:scroll;}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
.all-wrap{
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
.header{
text-align:center;
}
.header img{
  max-width: 100%;
}
#content {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  padding: 55% 0 0 0;
  font-size: 100%;
}
#content.active{
padding: 16% 0 0 0;
  -webkit-transition-property: padding;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  -moz-transition-property: padding;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: ease;
  -o-transition-property: padding;
  -o-transition-duration: 0.5s;
  -o-transition-timing-function: ease;
  transition-property: padding;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.content-top-block{
  background: url(media/divider.png) no-repeat scroll bottom center transparent;
  padding: 16% 0 0 0;
  background-size: 100%;
}
.all-content{
   background: none scroll 0 0 #21454c;
   background: -moz-linear-gradient(top, #21454c 0%, #3d7f8d 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#21454c), color-stop(100%,#3d7f8d));
   background: -webkit-linear-gradient(top, #21454c 0%,#3d7f8d 100%);
   background: -o-linear-gradient(top, #21454c 0%,#3d7f8d 100%);
   background: -ms-linear-gradient(top, #21454c 0%,#3d7f8d 100%);
   background: linear-gradient(to bottom, #21454c 0%,#3d7f8d 100%);
   padding: 4% 5%;
  font-size: 100%;

}
.nice-slogan {
    font-family: 'almushaf', 'Almarai', 'sans-serif';
    color: whitesmoke;
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1.75;
    line-height: 1.15;
    padding: 10px 0px;
}
.txt-information {
  color: #ffffff;
  text-align: center;
  padding: 22px 0;
  border-bottom: 1px solid #3d7f8d;
  line-height: 20px;
  font-size: 0.95em;
  font-weight: normal;

}


.txt-information span{
  color: #42f8ff;
  font-size: 1em;

}

.question1{
  color: #ffffff;
  font-size: 1em;
  font-weight: normal;
  padding: 20px 0 0 0;
  text-align:Center;
}

.question1 span {
  color: #ffd801;
  font-size: 1.3em;
  font-weight: bold;
}
.buttons{

  height: 70px;
  margin: 0 0 10px;
  padding: 15px 0 0;

}
#btn-no ,#btn-no-second ,#btn-no-third{
  width: 45%;
  height: 65px;
  display: inline-block;
  /* float: left; */
  background: none scroll 0 0 #cec7cb;
   background: -moz-linear-gradient(top, #e0d8dc 0%, #c6bfc2 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0d8dc), color-stop(100%,#c6bfc2));
   background: -webkit-linear-gradient(top, #e0d8dc 0%,#c6bfc2 100%);
   background: -o-linear-gradient(top, #e0d8dc 0%,#c6bfc2 100%);
   background: -ms-linear-gradient(top, #e0d8dc 0%,#c6bfc2 100%);
   background: linear-gradient(to bottom, #e0d8dc 0%,#c6bfc2 100%);
  border: 2px solid #1f4249;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #4c4c4c;
  line-height: 66px;
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}
#btn-no:hover, #btn-no-second:hover, #btn-no-third:hover{
  opacity: 0.9;
}
#btn-yes, #btn-yes-second, #btn-yes-third{
  width: 45%;
  height: 65px;
  display: inline-block;
  /* float: right; */
  background: none scroll 0 0 #7fc827;
   background: -moz-linear-gradient(top, #7fc827 0%, #70b122 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fc827), color-stop(100%,#70b122));
   background: -webkit-linear-gradient(top, #7fc827 0%,#70b122 100%);
   background: -o-linear-gradient(top, #7fc827 0%,#70b122 100%);
   background: -ms-linear-gradient(top, #7fc827 0%,#70b122 100%);
   background: linear-gradient(to bottom, #7fc827 0%,#70b122 100%);
   border: 2px solid #1f4249;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
   color: #4c4c4c;
  line-height: 66px;
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}
#btn-yes:hover, #btn-yes-second:hover, #btn-yes-third:hover{
  opacity: 0.9;
}
#rules{
  opacity:0;
}
h1#access {
 opacity:0;
  color: white;
  font-size: 1.2em;
  padding: 10px 0 20px;
  text-align: center;

}
h1.rules-title{
    color: orange;
    font-size: 1.25em;
    padding: 20px;
    text-align: center;
    font-weight: bold;
}

.rules-block ul li.first {
  background: url(https://blogger.googleusercontent.com/img/proxy/AVvXsEiPhNV8Ld95rOqVoWMT43oQR7FUBWx0WoAZsLddfFiH2hGPdp8cp7QDspUqWSlCbgzZDVfRHNN4nRvG5LDi1Y1u3GHO1O65igVtLpNR84MzadtbsCftClslvz7MBfMR=s0-d) no-repeat scroll left top transparent;

}
.rules-block ul li.second {
  background: url(https://blogger.googleusercontent.com/img/proxy/AVvXsEhFztFiBef4uv66J2axnDZzRhyOk9YeNaj_Q60l3OBl6xGHR00EiO8cTDca_QoTiHSwi5-rJZ-GKNscREaiGftUbRPlgFJv3AreA8Sx_nb-4TJEzdn-2QXpdM3GueyX=s0-d) no-repeat scroll left top transparent;
}
.rules-block ul li.third {
  background: url(https://blogger.googleusercontent.com/img/proxy/AVvXsEgjSQ6WgB6Jfl32GnuCdeLP17DMerUHTdE3ZS_pBFxuddIqC0MFujvvwvK_CN2fHpFdQj04juGfGni11JWDM4uB7sCtxkzujT8hldSdebWihE4p_wKlkiz7omS6KWmv=s0-d) no-repeat scroll left top transparent;
}
.rules-block ul li span {
  color: #FFFFFF;
  display: block;
  font-size: 0.8em;
  height: 55px;
  padding-left: 34px;
}
.i-agree {
  color: #00e600;
  font-size: 0.7em;
  text-align: center;
}
a#agree {
  border: 2px solid #1f4249;
  display: block;
  /*height: 66px;*/
  padding-top:15px;
  padding-bottom:15px;
  margin: 30px auto 0;
  width: 85%;
  background: url(images/btn-bg.jpg) repeat-x scroll 0 0 #77bd25;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #294508;
  font-size: 3em;
  line-height: 33px;
  font-weight: bold;
  text-decoration: none;
  font-family: "Helvetica", Tahoma;
  cursor: pointer;
}
a#agree:hover{
  opacity: 0.9;
}
/*Check transition*/
.container-check ul li{
  margin:0;
  background: url(https://blogger.googleusercontent.com/img/proxy/AVvXsEigfOC5HGiOY3ANfOlGqixE-lSZdfHcKklMRz7cbMFYQAwhD6CSDXE1rrNC_T6rYrLhCZdgtiFBOTDCoaU8ux9Xp3I_lKQB48_jDXKdvevGQHzb2kTnMYJB03oH7_1g=s0-d) no-repeat scroll top left transparent;
  opacity: 0;
}
.container-check ul li span {

  height:30px;
  display: block;
  padding: 0 0 0 31px;
  text-align: center;
  line-height: 20px;
  color: #ffffff;
  font-size: 1em;
}

.container-check ul li#first.alpha{
 opacity: 1;
  -webkit-transition: opacity 0.5s ease;
 -moz-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;

}
.container-check ul li#second.alpha{
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
 -moz-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.container-check ul li#third.alpha{
  opacity: 1;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}
.container-check ul li#fourth.alpha{
  opacity: 1;
   -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
#rules.alpha{
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
#loading {
  display: block;
  margin: 0 auto;
  position: relative;
  top: 28px;
}
/*End Check transition*/