@charset "utf-8";

@font-face {

   font-family: myFirstFont;

   src: url(../fonts/DroidKufi-Regular.ttf), url(../fonts/DroidKufi-Regular.eot) format('truetype');

}
*:focus {
  outline: none;
}
body{margin:0px; padding:0px; font-family: 'myFirstFont', serif; font-size:12px; font-weight: 100}

a{text-decoration: none; color: royalblue;}

.body{position: relative; width: 100%; min-height: calc(100vh - 0px); background-color: #ffffff; direction: rtl; text-align: right;}
.contant{max-width: 1300px; margin: auto; left: 0px; right: 0px; position: relative;
}

.outer-block { 
    margin-top:10px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.div-top{
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

.overlay{position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 149; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */}

.shadow{box-shadow: 0 3px 6px -2px gray;}

.table {width: 100%; display: table; table-layout: fixed; position: relative}
.table .table_row{width: 100%; display: table-row; position: relative}
.table .table_row .table_cell{ display: table-cell; position: relative; vertical-align: middle;}

.padding-5px{padding: 5px;}

.fas{font-size: 1.1em;}
.far{font-size: 1.1em;}
.spinner{position: fixed; z-index: 1000; left: calc(50% - 45px); top: 50%; bottom: 50%; color: #cdad3c;}

.hint{font-size:10px; color: #b0b0b8; }


.alert{
    position: fixed;
    width: 80%;
    min-height: 100px;
    max-height: 75%;
    border: 3px solid indigo;
    z-index: 150;
    border-radius: 5px;
    background-color: lightcyan;
    margin: auto;
    top: 15%;
    left: 0;
    right: 0;
    display: none;
}
.alert #alert_title{color: lightcyan; text-align: center;}
.alert #alert_body{text-align: center; position: relative; max-height: 600px; overflow: auto;}
.alert button{margin: 3px;}
.alert .red{background-color: tomato; color: lightcyan;}

/* <!------------------------------------- top header --------------------------------> */
#topHeader{ position: relative; height: 30px; line-height: 30px; font-size: 10px; width: 100%; color: #231f20; direction: rtl;}
#topHeader .right{position: absolute; margin: auto; right: 0px; top: 0px; text-align: right;}
#topHeader .left{position: absolute; margin: auto; left: 0px; top: 0px; text-align: left;}
#topHeader ul{margin: 0px; padding: 0px;}
#topHeader ul li{display: inline; margin: 0px; padding: 0px; padding: 5px; cursor: pointer;}
/* <!------------------------------------- top header --------------------------------> */

/* <!------------------------------------- mid header --------------------------------> */
#midHeader{ position: relative; line-height: 30px; font-size: 10px; width: 100%; color: #cdad3c; background-color: #231f20; min-height: 120px; }
#midHeader .left{text-align: left;}
#midHeader .right{text-align: right;}
#midHeader .center{text-align: center;}
#midHeader img{max-height: 100px; padding: 0px; margin-top: 10px;}
#midHeader ul{margin: 0px; padding: 0px;}
#midHeader ul li{display: inline; margin: 0px; padding: 0px; padding: 5px;}
/* <!------------------------------------- mid header --------------------------------> */

/* <!------------------------------------- mid header fixed --------------------------------> */
#midHeaderFixed{ position: fixed; line-height: 30px; font-size: 10px; width: 100%; margin: auto; left: 0px; right: 0px; top: 0px; background-color: #231f20; z-index: 50; overflow: hidden; display: none; color: #cdad3c;}
#midHeaderFixed .left{text-align: left;}
#midHeaderFixed .right{text-align: right;}
#midHeaderFixed .center{text-align: center;}
/* <!------------------------------------- mid header fixed --------------------------------> */

/* <!------------------------------------- footer --------------------------------> */
#footer{ width: 100%; min-height: 100px; color: rgb(112, 112, 112); background-color: #231f20;}
/* <!------------------------------------- footer --------------------------------> */


/* <!------------------------------------- menu --------------------------------> */
#menu{
   background: #333;
    color: #fff;
    position: fixed;
    right: 0;
    top: 0px;
    width: 300px;
    height: 100vh;
    z-index: 150;
    margin-right: -300px;
}
/* <!------------------------------------- menu --------------------------------> */

.inline_div{
  display: inline-block;
  width: 50%;
  vertical-align: top;
  margin-top: 5px;
}
.inline_div_body{
  width: 90%;
  padding: 5px;
  position: relative;
  border: 1px solid #cdad3c;
  border-radius: 5px;
  margin-bottom: 5px;
}
.inline_div_title{
  font-size: 12pt;
  margin-bottom: 5px;
  background-color: #cdad3c;
  padding: 2px;
  padding-right: 5px;
  border-radius: 5px;
}
.inline_div_content{
  position: relative;
  margin: auto;
  left: 0;
  right: 0;
}

.item_v1{
  position: relative;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.item_v1 img{
  width: 100px;
}

.item_v1 .title{font-weight: bold; font-size: 1.2em;}

.item_v1 .price{font-size: 1.3em;}

.item_v1 .soled{background-color: tomato; width: 100%; color: black; font-weight: bold; text-align: center; display: none;}

.item_v1 .prepaid{background-color: gold; width: 100%; color: darkred; font-weight: bold; text-align: center; display: none;}

.item_v1 .spoffer{background-color: gold; width: 100%; color: darkred; font-weight: bold; text-align: center; display: none;}

.item_v1 .offer{background-color: green; width: 100%; color: white; font-weight: bold; text-align: center; display: none;}

.item_v1 .price .price_name{font-size: 0.8em;}

.item_v1 .priceFrom{float: left; color: tomato; text-decoration: line-through; display: none;}

.item_v1 .priceFrom .price_from_name{font-size: 0.5em;}

.cursor{ cursor: pointer;}

input[type=text],[type=password],[type=tel],[type=email], select ,textarea {

  /* Remove First */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none !important;

   width: 100%;

   padding: 5px 20px;

   margin: 8px 0;

   border: 1px solid rgba(0, 0, 0, 0.5);

   box-sizing: border-box;

  text-align:right;

  font-family: 'myFirstFont';

  border-radius: 20px;

  direction: rtl;

}

.button {
    background-color: #231f20;
    width: 100%;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    cursor: pointer;
    border-radius: 36px;
    height: 36px;
    font-family: 'myFirstFont';
  }

  .button:hover {
    background-color: #312f30;
  }

.payment_logo{
  cursor: pointer;
  display: inline-block;
  padding: 10px;
}

  
.searchlogo{position: absolute; margin: auto; top: calc(50% - 9px); left: -5px; font-size: 18px; cursor: pointer; border-right: 1px solid rgba(0, 0, 0, 0.5); width: 30px;}

.menu_slider {
  margin: auto;
  top: 0px;
  position: relative;
	margin: 0px;
	padding: 0px;
  width: 100%;
    /*overflow-x: scroll;*/
    /*background: #8ebbc1;*/
    /*white-space: nowrap;*/

  color: #FFFFFF;
  background-color: #ceae3d;
	direction: rtl;
	text-align: right;
}

.menu_slider li {
    display: inline-block;
	vertical-align: middle;
    margin: 5px;
    padding: 2px 5px 2px 5px;
    /* if you need ie7 support */
    *display: inline;
    background-color: #cdad3c; /*fac4c6*/
    border-radius: 5px;
    cursor: pointer;
    
}
.menu_slider li:hover
{
    background-color: #231f20;
    color: #fff;
}

.menu_slider .select
{
    background-color: #231f20;
    color: #fff;
}



h2{ color:#cdad3c;}

hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

.iBox{position: relative; display:inline-block; width: 202px; height: 230px; margin: 4px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; background-color: #fff; overflow: hidden; direction: rtl;
	-ms-touch-action: manipulation;	/* IE10  */
   touch-action: manipulation;		/* IE11+ */
   cursor: pointer;
}

.iBox:hover{border: 1px solid #cdad3c;}

.item_box{position: relative; width: 100%; height: 100%;}

.item_box .img{position: relative; margin: auto; top: 0; width: 100%; height: 140px; overflow: hidden; white-space: nowrap;
    background-image: url('../images/latulipe50.png');
    background-position: 50% 50%; 
    background-size: 40%;           
    background-repeat:no-repeat;}

.item_box .img img{position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; max-width: 100%; max-height: 100%; vertical-align: middle; border-radius: 0 0 5px 5px;}

.item_box .title{position: relative; width: 90%;  overflow: hidden; white-space: nowrap; text-overflow:ellipsis; margin: auto; left: 0px; right: 0px; height: 40px; line-height: 40px; font-weight: bold}

.item_box .price{position: absolute; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; text-align: left; margin: auto; left: 10px; bottom: 2px; font-size: 1.3em;}

.item_box .price .price_name{font-size: 0.8em;}

.item_box .priceFrom{position: absolute; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; text-align: left; margin: auto; left: 11px; bottom: 13px; color: tomato; text-decoration: line-through; display: none;}

.item_box .priceFrom .price_from_name{font-size: 0.5em;}

.iBox .more{position: absolute; width: 20px; text-overflow:ellipsis; margin: auto; bottom: 5px; right: 5px; height: 30px; line-height: 30px; z-index: 5; font-size: 1.5em;}

.iBox .more i{position: absolute; margin-top: 8px; margin-right: -8px;}

.iBox .soled{position: absolute; z-index: 10; margin: auto; left: 0; top:5px; background-color: tomato; width: 100%; color: black; display: none;}

.iBox .prepaid{position: absolute; z-index: 10; margin: auto; right:5px; bottom:80px; background-color: gold; width: 35px; height:35px ;color: darkred; font-weight: bold; border-radius: 50%; text-align: center; font-size: 10px; padding: 3px; display: none;}

.iBox .offer{position: absolute; z-index: 11; margin: auto; left: 5px; top:5px; background-color: #FF7476; width: 35px; height:35px ;color: darkred; font-weight: bold; border-radius: 35px; line-height: 35px; text-align: center; display: none;}

.card .iBox{width: 170px; height: 220px;}
.card .item_box .img{width: 100px;}

.bggray{ background-color: #DFDFDF; border-radius: 5px; position: relative; width: 98%; margin: auto; left: 0; right: 0; margin-top: 5px;}


.inline{margin: 0px; width: 49%; display: inline-block; min-height: 100px;  vertical-align: top; float: none;}

#items-images{position: relative; }
#items-images .fas{position: absolute; margin: auto; bottom: 5px; left: 5px; z-index: 10; font-size: 1.2em; color: #edf4f5}
#items-images .fram-img{width: 120px; height: 120px; border: 1px solid #8ebbc1; border-radius: 5px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; margin-bottom: 4px; background-color: rgba(0, 0, 0, 0.05);}
#items-images .fram-img img{max-width: 115px; max-height: 115px; position: absolute; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; display:none; }
#items-details{ text-align: right}


.card{margin-bottom: 10px; border: 1px solid #cdad3c; border-radius: 5px; padding: 0px; position: relative;}
.card header{background-color: #cdad3c; padding: 5px; position: relative; color: #FFFFFF;}
.card header .far{font-size: 1.5em;}
.card header .fas{font-size: 1.5em;}
.card .cbody{padding: 5px; position: relative;  margin-left: 0px;}

.expandable{position: relative;}
.expandable .fas{font-size: 0.5em; margin: 5px; color: darkgrey;}
.expandable .expandable-header{position: relative; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); height: 40px; line-height: 40px; cursor: pointer; font-size: 1.3em;}
.expandable .expandable-header:hover{font-weight: bold; color: green; background-color: #DFDFDF;}
.expandable .expandable-header .right{position: relative; margin: auto; right: 0px; display: inline-block; float: right;}
.expandable .expandable-header .left{position: relative; margin: auto; left: 5px; display: inline-block; float: left;}
.expandable .expandable-content{display: none; padding: 5px; background-color: #edf4f5; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.mylist{position: relative; width: 100%; direction: rtl;}
.mylist .item{position: relative; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); min-height: 40px; line-height: 40px; font-size: 1em;}
.mylist .item:hover{font-weight: bold; color: green; background-color: #DFDFDF;}
.mylist .item .right{position: relative; margin: auto; right: 0px; display: inline-block; float: right;}
.mylist .item .left{position: relative; margin: auto; left: 0px; display: inline-block; float: left;}
.mylist .item .center{position: relative; margin: auto; left: 0px; display: inline-block; width: 100%;}
.mylist .item .list-item__thumbnail{height: 40px; width: 40px; position: relative; border-radius: 50%; overflow: hidden;}


.padge{position: absolute; width: 1.5em; height: 1.5em; color: #edf4f5; background-color: red; font-size: 1em; text-align: center; line-height: 1.5em; border-radius: 50%; margin-top: -8px; margin-right: -7px; font-weight: bold; padding: 3px; display: none; cursor: pointer;}
.padge_fav{ color: #edf4f5; background-color: tomato; text-align: center; font-weight: bold; padding: 0 5px 0 5px; float: left; }


#login{position: fixed; width: 100%; height: 100vh; background-color: #fff; z-index: 1001; display: none;}
#login .loginbody{ width: 50%; height: 80%; position: absolute; margin: auto; left: 0; right: 0; top: 100px; bottom: 0; text-align: center; padding: 10px;}

#siteLock{position: fixed; width: 100%; height: 100vh; background-color: #fff; z-index: 1000; display: none;}
#siteLock .siteLockbody{ width: 50%; height: 80%; position: absolute; margin: auto; left: 0; right: 0; top: 100px; bottom: 0; text-align: center; padding: 10px;}

#slideAds{ width:100%; height:100%; position: relative; overflow: hidden; white-space: nowrap; text-align: center; } /*margin-bottom: -12px;*/

#slideAds .slideAdsDiv{position: relative; width:100%; display: inline-block; padding: 0px; }

#slideAds .background{background-size:cover; -webkit-filter: blur(30px); -moz-filter: blur(30px); -o-filter: blur(30px); -ms-filter: blur(30px); filter: blur(30px); width: 100%; height: calc(100% - 80px); position: absolute; }

#slideAds .slideAdsDiv img{margin: auto; left: 0; right:0; max-width:100%; max-height: 100%; position: relative; z-index: 1; padding: 0px; margin: 0px; bottom: 0px;}


#popup{position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 149; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */}
#popup .popup_contant{background-color: whitesmoke; height: calc(100vh - 100px); width: calc(100vw - 100px); position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; border-radius: 10px; z-index: 150;}
#popup .popup_contant .popup_head{position: absolute; margin: auto; top: 0; height: 50px; line-height: 50px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); width: 100%; font-size: 1.3em; color: rgba(0, 0, 0, 0.7);;}
#popup .popup_contant .popup_head .right{position: relative; margin: auto; right: 10px; display: inline-block; float: right;}
#popup .popup_contant .popup_head .left{position: relative; margin: auto; left: 10px; display: inline-block; float: left;}
#popup .popup_contant .popup_body{position: absolute; margin: auto; top: 51px; width: 100%; font-size: 0.9em; overflow-y: auto; height: calc(100vh - 160px); direction: rtl; text-align: right;}
#popup .popup_contant .popup_body .popup_description{padding: 5px;}


.card_in_paskit {position: relative}
.card_in_paskit .close {position: absolute; height: 30px;  width: 30px; vertical-align: middle; margin: auto; top: 5px; left: 5px; font-size: 22px; color: tomato; font-weight: 100; text-align: center; line-height: 30px; z-index: 100;}
.card_in_paskit .price {position: absolute; height: 20px; vertical-align: middle; margin: auto; bottom: 35px; left: 5px; font-size: 18px; font-weight: bold}
.card_in_paskit .img {position: relative; height: 80px;  width: 80px; vertical-align: middle;}
.card_in_paskit .cont {position: relative; height: 80px; vertical-align: top; text-align: right; direction: rtl; padding-right: 10px}
.card_in_paskit .table_cell img{position: absolute; margin: auto; right: 0px; left: 0px; top:0px; bottom: 0px; max-height: 80px; max-width: 80px; border-radius: 5px}
.card_in_paskit .vat_include_string{position: absolute; margin: auto; bottom: 5px; left: 5px;}
.card_in_paskit .countdown{position: absolute; margin: auto; top: 35px; left: 5px;}

#alert_message{width: 93%; position: fixed; margin: auto; top: 20px; left: 0; right: 0; padding: 15px; color: white; z-index: 100; border-radius: 5px; font-size: 1.5em; text-align: center; display: none;}






.g_slide {
  position: relative;
  width: 100%;
  max-height: 200px;
  overflow: hidden;
}

.g_slide .item {
    width: 100%;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}

.g_slide .item img { 
    width:100%;
    max-height:200px;
}

.switch_main { position: relative; }

.g_slide .switch_nav {
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 10px;
  z-index: 11;
  text-align: center;
}

.g_slide .switch_nav_item {
  display: inline-block;
  margin: 0 10px 0 0;
  width: 13px;
  height: 13px;
  line-height: 200px;
  overflow: hidden;
  font-size: 0;
  border-radius: 100%;
  background: #b7b7b7;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.g_slide .switch_nav_item:hover { text-decoration: none; }

.g_slide .switch_nav_item_current { background: #eb6100; }

.g_slide .prev,
.g_slide .next {
  position: absolute;
  top: 50%;
  z-index: 10;
  margin-top: -15px;
  width: 18px;
  height: 30px;
  overflow: hidden;
  background: url(slide.png) no-repeat;
  transition: margin-left .3s ease, margin-right .3s ease;
}

.g_slide .prev {
  left: -18px;
  _left: 10px;
}

.g_slide .next {
  right: -18px;
  _right: 10px;
  background-position: -19px 0;
}

.g_slide .prev:hover { background-position: 0 -70px; }

.g_slide .next:hover { background-position: -19px -70px; }

.g_slide:hover .prev { margin-left: 28px; }

.g_slide:hover .next { margin-right: 28px; }

.scroll {
  position: relative;
  width: 100%;
  height: 117px;
  border: solid 1px #dfdfdf;
  overflow: hidden;
}

.switch_main { position: relative; }

.scroll .item {
  float: left;
  width: 250px;
  height: 100%;
  border-right: solid 1px #dfdfdf;
}

.scroll .switch_item {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.scroll .prev,
.scroll .next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 19px;
  height: 39px;
  overflow: hidden;
  background: url(slide.png) no-repeat;
}

.scroll .prev {
  left: 0;
  background-position: 0 -31px;
}

.scroll .next {
  right: 0;
  background-position: -20px -31px;
}

.scroll .prev:hover { background-position: 0 -101px; }

.scroll .next:hover { background-position: -20px -101px; }


/* Dropdown Button */
.dropbtn {
  background-color: #cdad3c;
  color: white;
  padding: 6px;
  border: none;
  font-family: 'myFirstFont', serif;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #a28930;}







@media screen and (max-width: 1080px) {
  .inline{margin: 0px; width: 98%; display: inline-block; min-height: 100px;  vertical-align: top;}
  .iBox{width: 47%; height: 230px; margin: 2px; margin-bottom: 4px;}
  #login .loginbody{ width: 80%;}

  .contant{width: 98%; margin: auto; left: 0px; right: 0px; position: relative;}
  
  #midHeader{margin-bottom: 12px;}
  
  /* <!------------------------------------- mid header fixed --------------------------------> */
#midHeaderFixed{ border-radius: 0px;}
#midHeaderFixed .left{text-align: left;}
#midHeaderFixed .right{text-align: right;}
#midHeaderFixed .center{text-align: center;}
/* <!------------------------------------- mid header fixed --------------------------------> */

#popup .popup_contant{width: calc(100vw - 50px);}

.menu_slider{ position: relative; overflow-x: auto; white-space:nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; padding: 0px; margin: 0px;}

.inline_div{
  width: 100%;
}

.outer-block { 
    margin-top:10px;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}


}