@import url('https://fonts.googleapis.com/css?family=Tajawal&display=swap');

/* CSS FOR ALLERT DIALOG */
@keyframes slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -120px 60px;
  }
}

#InfoBanner{
  margin:10px auto;
  text-align: center;
  width: 100%;
  direction:ltr !important;
}
.code{
   border: 3px dashed #940000;
  padding: 2px 5px;
    padding-right: 5px;
    padding-left: 5px;
  margin: 10px auto;
  text-align: center;
  border-radius: 10px;
  color:#333;
  width:94% !important;
}
.code span{
    
  font-weight: bold;
  color: #940000;
}
.reversed {
  display: block;
  padding: 0.6em;
  position: relative;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
  color: #fff;
  font-size: 1em;
  background-color:#f5af0c;
}
.reversed:before, .reversed:after {
}
.reversed:after {
  top: auto;
  bottom: 0;
  border-top: none;
  border-bottom: 0.8em solid #f5af0c;
}
.reversedRight:before, .reversedRight:after{
}
.reversedRight{
  width: 38px;
  border-radius: 5px 5px 0px 0px;
  animation: tilt 2s infinite;
  margin: 0 auto;
}
@keyframes tilt {
  0% {
    left: 0%;
  }
  50% {
    left: 9px;
  }
  100% {
    left: 0px;
  }
}
.reversedLeft{
  border-radius: 5px 5px 5px 5px;
}
.reversedLeft:before, .reversedLeft:after {
}
.reversedLeft:after {
}
.reversedLeft:before {
}

.bgAnimation{
  background-color:#f5af0c;
  background-image: linear-gradient(
    45deg,
    #e57373 25%,
    transparent 25%,
    transparent 75%,
    #e57373 75%,
    #e57373
  ),linear-gradient(
    -45deg,
    #e57373 25%,
    transparent 25%,
    transparent 75%,
    #e57373 75%,
    #e57373
  );
  background-size: 60px 60px;
  animation: slide 4s infinite linear;
}

/* END OF CSS */


@font-face {
    font-family: 'Avenir Arabic';
    src: url('../fonts/AvenirArabic-Medium.woff2') format('woff2'),
        url('../fonts/AvenirArabic-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'chaletlondonnineteeneighty';
    src: url('../fonts/chalet-londonnineteeneighty.woff2') format('woff2'),
         url('../fonts/chalet-londonnineteeneighty.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.s-link{
    color: #bb2d3b !important;
    font-size: 1.1em !important;
}

.bi-tags-fill{
    
  animation-name: spin, depth;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 3s;
}
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}
@keyframes depth {
  0% { text-shadow: 0 0 black; }
  25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black; }
  50% { text-shadow: 0 0 black; }
  75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black; }
  100% { text-shadow: 0 0 black; }
}

.queue .row{
    margin:5px 0;
}

.queue .row1{
    min-height:260px;
}

.queue .row2{
    min-height:320px;
}
.queue img{
    
	object-fit: cover;
	width:100%;
	height:100%;
}
.number-font{
    font-size: 3.6em !important;
    color: #fff;
    text-align: center;
    border-top: 0px !important;
    border-bottom: 0px !important;
    height: 100%;
    
	animation: zoom-in-zoom-out 3s infinite ease;
    line-height: 2.5em;
}
*{
	margin:0px;
	padding:0px;	
}
html{
	direction:rtl;
}
body {
	background-color: #fff;
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	font-family: 'Avenir Arabic','chaletlondonnineteeneighty', 'Tajawal' !important;
	font-size: 13pt;
	color: #293579;
	font-weight: 300;
	line-height: 26px;
	
}
.slick-prev, .slick-next{
    display:none !important;
}
.queue-card{
	background-color: #293579;
	box-shadow: 0 0 10px #293579;
	color: #fff;
	margin-top: 2em !important;
	padding: 10px 20px;
	border-radius: 10px;
	text-align:center;
	animation: zoom-in-zoom-out 3s ease;
}


.bi{
    margin-left: 15px;
    position: relative;
    top: 5px;
}
input[type=checkbox],input[type=radio]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 5px;
  margin: 14px;
}
required{
    color:#940000;
}
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(0.7, 0.7);
  }
  50% {
    transform: scale(1.05, 1.05);
  }
  100% {
    transform: scale(1, 1);
  }
}
#logo{
	text-align:center;
}
.queue{
	text-align: center;
	font-size: 2.8em;
	color: #fff;
	
}

.queue-table{
	text-align: center;
	font-size: 3.5em;
	color: #fff;
	
}
.queue-table table{
    border-collapse: separate;
    border-spacing: 0 15px;
}

.tr{
	background-color: #293579;
    margin:4px 0;
}
.name{
	text-align: center;
	margin: 5px 0;
	font-size: 1em;
}
.promotions{
	margin:20px 0px !important;
	padding:0px !important;
}
.main-categroy {
    /*background: #fddb00;*/
    border-radius: 40px;
    padding: 5px 2px;
    width: 100%;
    display: table;
}
/*.main-categroy span.active {
    color: #293579;
    background: #fff;
    border-radius: 40px;
    padding: 2px;
}
.main-categroy span {
    cursor: pointer;
    color: #293579;
    display: table-cell;
    text-align: center;
	font-size: 0.9em !important;
}*/
.main-categroy span.active {
    color: #fddb00;
    background: #293579;
    border-radius: 40px;
    padding: 2px;
}
.main-categroy span {
    cursor: pointer;
    color: #293579;
    display: table-cell;
    text-align: center;
	font-size: 0.9em !important;
}
.slick-slide img{
	object-fit: cover;
	width:200px;
	height:200px;
}
.slick-initialized .slick-slide {
    display: block;
    width: 220px;
    box-shadow: 0 0 10px #ccc;
    height: 375px;
    text-align: center;
    margin: 10px;
    padding: 5px;
    border-radius: 10px;
}
.item{
	
}
.item img{
	
}
.item .label{
	position: absolute;
	top: 25px;
	background-color: #940000;
	border-radius: 5px;
	padding: 2px 5px;
	color: #fff;
}
.item .title{
	
}
.item .title span{
	color: #940000;
}
.item .sku{
	position: relative;
	top: -25px;
	background-color: #293579;
	color:#fff;
	border-radius:5px;
}
.item .price{
	position: absolute;
	bottom: 10px;
}
.slick-slide a,.promo-item a{
    color:#333 !important;
}

.promo{
	margin: 5px;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
    padding: 2px;
    text-align:center;
}
.promo img{
	
	object-fit: cover;
	width:220px;
	height:220px;
}
.promo .label{
	background-color: #940000;
	border-radius: 5px;
	padding: 2px 5px;
	color: #fff;
}
.promo .title span{
	color: #940000;
    text-align:right;
}
.promo .price{
    
    text-align:left;
}
.promo .sku{
	background-color: #293579;
	color:#fff;
	border-radius:5px;
	text-align: center;
}
li{
	margin: 0 10px;
}
h2{
    color: #293579;
	border-top: 1px solid #293579;
	text-align: center;
	padding: 2px 0;
	border-bottom: 1px solid #293579;
	font-size: 1.2em !important;
	font-weight:bold !important;
}

h3{
	font-size: 1.3em !important;
	font-weight:bold !important;
}
h4{
	font-size: 1.2em !important;
	font-weight:bold !important;
}
h5{
	font-size: 1.1em !important;
	font-weight:bold !important;
}
h6{
	font-size: 1em !important;
	font-weight:bold !important;
}
.social-media{
    color: #293579;
	text-align: center;
	padding: 2px 0;
	margin-bottom:10px;
}
a{
	color: #fddb00 !important;
	text-decoration:none !important;
	font-size:0.9em !important;
}
.services-categroy {
    padding: 5px 2px;
    width: 100%;
    display: table;
}
.services-categroy span.active {
    color: #fddb00;
    background: #293579;
    border-radius: 40px;
    padding: 2px;
}
.services-categroy span {
    cursor: pointer;
    color: #293579;
    display: table-cell;
    text-align: center;
	font-size: 0.9em !important;
}
table,.table-hover > tbody > tr:hover > *{
    color:#fff !important;
}

@media only screen and (max-width: 600px) {

    .promo .price{
        font-size:0.8em !important;
    }
    .promo .title{
    	
        font-size:0.8em !important;
    }
}