@import url(iransans/fontiran.css);
@import url("font-awesome.min.css");
@import url("font-awesome.css");
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "IRANSans";
	list-style-type: none;
	text-decoration: none;
	direction:rtl;
	border-collapse: collapse;
}
#myForm {
	display: none;
}
.clear {
	clear: both;
}
body {
	width: 100%;
	margin: 0 auto;
	background-image: url(../img/light-tile.gif);
	background-size: 260px;
}
.set {
	max-width: 1000px;
	margin: 25px auto;
}
.load {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	display: table;
	text-align: center;
	z-index: 5;
	font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}
.load > section {
	display: table-cell;
	vertical-align: middle;
}
.return {
	width: 100px;
	height: 40px;
	color: #000000;
	background-color: #ffffff;
	text-align: center;
	margin-top: 20px;
}
section.hide {
	display: none;
}
.header {
	width: 100%;
	height: 40px;
    background: rgb(243, 243, 243);
}
.header ul li{
	padding: 7px 0;
	display: inline-block;
}
.header ul li a:hover {
	background-color: rgba(254, 1, 107, 0.52);
}
.header ul li a{
	color: #000000;
	padding: 7px 10px 6px 10px;
}
.slider {
	width: 100%;
	overflow: hidden;
}
.slider img {
	width: 1100px;
	position: relative;
	z-index: -2;
	right: -10px;
}
.menu {
	width: 100%;
	background-color: #f7f7f7;
	border: 1px solid #e0e0e0;
}

.menu div {
	width: 16.66%;
	border-left: 1px dotted #bababa;
	text-align: center;
	color: #fe016b;
	float: right;
	height: 135px;
	cursor: pointer;
	padding: 10px 0;
}
.menu div:nth-child(6) {
	 border-left: 0;
 }
.menu > div:hover {
	background-color: #bfbfbf;
	color: #ffffff;
}
.menu div:hover img {
	filter: brightness(0) invert(1);
}
.menu div:hover p {
	color: #ffffff;
}
.menu div.active {
	background-color: #fe016b;
}
.menu div.active img {
	filter: brightness(0) invert(1);
}
.menu div.active p {
	color: #ffffff;
}
.content {
	width: 100%;
	padding: 10px 0 0 0;
	display: none;
}
.bargain {
	width: 45%;
	height: 430px;
	background-color: rgba(255,200,0,0.32);
	float: right;
    border: 1px solid #e8c642;
}
.charge-type-container {
	padding: 0 15px;
}
.charge-type-container section {
	width: 120px;
	display: inline-block;
	padding: 10px 0;
}
.bargain > section > div:first-child {
	padding: 0 10px;
	padding-top: 10px;
	text-align: right;
}
.operator, .giftcard-types, .antivirus-types {
	width: 80px;
	height: 80px;
	background-repeat: no-repeat;
	display: inline-block;
	background-size: cover;
	cursor: pointer;
	filter: grayscale(100%);
	opacity: 0.7;
}
.giftcard-types, .antivirus-types {
	display: none;
}
.operator {
	background-image: url(../img/operator.png);
}
.giftcard-types {
	background-image: url(../img/giftcards.png);
}
.antivirus-types {
	background-image: url(../img/antivirus-logo.png);
}
.operator.active, .giftcard-types.active, .antivirus-types.active {
	filter: grayscale(0%);
	opacity: 1;
}
.MTN {
	background-position: -240px 0;
}
.MCI {
	background-position: -160px 0;
}.Rightel {
	background-position: -80px 0;
}
.Talia {
	background-position: 0 0;
}
.charge-type {
	cursor: pointer;
}
.iTunes {
	background-position: 0 0;
}
.GooglePlay {
	background-position: -640px 0;
}
.XBox {
	background-position: -320px 0;
}
.Amazon {
	background-position: -720px 0;
}
.PlayStation {
	background-position: -240px 0;
}
.Steam {
	background-position: -400px 0;
}
.Spotify {
	background-position: -480px 0;
}
.PlayStationPlus {
	background-position: -80px 0;
}
.Microsoft {
	background-position: -160px 0;
}
.Skype {
	background-position: -560px 0;
}
.eset {
	background-position: -0px 0;
}
.bitdefender {
	background-position: -80px 0;
}
.kaspersky {
	background-position: -160px 0;
}
.norton {
	background-position: -240px 0;
}
.mcafee {
	background-position: -320px 0;
}
.avira {
	background-position: -400px 0;
}
.avg {
	background-position: -480px 0;
}
.avast {
	background-position: -560px 0;
}
.credit-info {
	display: block!important;
}
.charge-type input  {
	float: right;
	margin-top: 6px;
    margin-left: 6px;
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.charge-type div {
	width: 10px;
    height: 10px;
    background-color: #0c8e64;
    border-radius: 50%;
    position: relative;
    top: 9px;
    right: -19px;
    z-index: 3;
	display: none;
	float: right;
	margin-left: -11px;
}
.magiccharge, .nonecredit-mtn, .wimax {
	padding: 10px 15px 0 0;
}
.magiccharge input, .nonecredit-mtn input, .wimax input, .magiccharge label, .nonecredit-mtn label, .wimax label {
	cursor: pointer;
}
.pin-counter {
	width: 180px;
	height: 40px;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 15px;
	margin-bottom: 10px;
}
.increase, .decrease {
	width: 40px;
	height: 40px;
	background-image: url("../img/count.png");
	float: right;
	cursor: pointer;
}
.increase {
	background-position: -40px 0;
}
.counter {
	width: calc(100% - 80px);
	height: 40px;
	border: 0;
	float: right;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

.list , .package {
	padding: 0 15px;
	overflow: auto;
	height: 220px;
	direction: ltr;
}
.list::-webkit-scrollbar, .package::-webkit-scrollbar {
	margin-left: 30px;
	float: left;
	width: 8px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}
.list::-webkit-scrollbar-track, .package::-webkit-scrollbar-track  {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}
.list::-webkit-scrollbar-thumb, .package::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #f56a49;
}
.list {
	height: 170px;
}
.list section div:first-child {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	padding-left: 10px;
}
.info {
	width: 55%;
	float: left;
	padding-right: 10px;
}
.pay-part {
	width: 100%;
}
.information {
	width: 100%;
	height: 180px;
	background-color: rgba(0, 90, 255, 0.32);
	text-align: center;
	padding: 36px 0;
	margin-bottom: 10px;
    border: 1px solid #5c8ede;
}
.invoice {
	width: calc(50% - 5px);
    height: 240px;
    background-color: rgba(90, 20, 226, 0.32);
    float: right;
	padding-right: 20px;
	padding-left: 20px;
	border: 1px solid #a27de4;
}
.payment {
	width: calc(50% - 5px);
	height: 240px;
	background-color: rgba(0, 189, 66, 0.32);
	float: left;
    border: 1px solid #64d685;
}
.invoice h3 {
	margin: 10px 0 10px 0;
}
.invoice li {
	margin-bottom: 15px;
}
.invoice p, .invoice span {
	display: inline-block;
	font-size: 14px;
}
.invoice .bill-payment {
	display: none;
}
.invoice .internet-package ul {
	padding: 30px 0;
}
div.cellphone, .mail {
	max-width: 380px;
	padding-bottom: 10px;
	margin: 0 auto;
}
.cellphone p, .mail p {
	width: 100px;
	float: right;
	padding: 5px 0;
}
.cellphone input, .mail input {
	width: calc(100% - 100px);
    height: 37px;
	float: left;
    direction: ltr;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    color: #000000;
    font-family: "IranSans";
}
div.cellphone input:focus, .mail input:focus, .bill-payment > input:focus {
	box-shadow: none;
	outline: none;
}
.hint-cell, .hint-mail {
    max-width: 386px;
	font-size: 12px;
    margin: 0 auto;
    margin-top: -10px;
    padding-right: 5px;
	display: none;
}
.hint-cell p, .hint-mail p {
	width: calc(100% - 104px);
	background-color: rgba(255,255,255,0.3);
    text-align: right;
    color: red;
	margin-left: 4px;
	padding-right: 5px;
	margin-right: 100px;
}
.save {
	max-width: 380px;
    height: 37px;
	text-align: right;
	margin: 0 auto;
}
.save label {
	margin-right: 100px; 
}
.save input, .save p {
	display: inline-block;
	cursor: pointer;
}
.gateways-container {
	width: 100%;
	margin: 10px auto;
	padding: 0 10px;
	text-align: center;
}
.gateway {
	width: 48px;
	height: 48px;
	background-color: #ffffff;
	background-image: url("../img/payment-gateways.png");
	background-repeat: no-repeat;
	margin: 2px 5px;
	cursor: pointer;
	display: none;
	position: relative;
}
.parsian {
	background-position: 0 2px;
}
.mellat {
	background-position: -44px 3px;
}
.saman {
	background-position: -89px 3px;
}
.melli {
	background-position: -135px 2px;
}
.fanava {
	background-position: -179px 3px;
}
.zarrinpal {
	background-position: -224px 3px;
}

.parsian.active {
	background-position: -272px 2px;
}
.mellat.active {
	background-position: -316px 3px;
}
.saman.active {
	background-position: -361px 3px;
}
.melli.active {
	background-position: -407px 2px;
}
.fanava.active {
	background-position: -451px 2px;
}
.zarrinpal.active {
	background-position: -496px 2px;
}
.attention {
	width: 100%;
	margin: 10px auto;
	padding: 0 20px;
}
.attention p {
    font-size: 10px;
    display: inline-block;
}
.attention img {
    margin: 0px 0 0 5px;
    display: inline-block;
    position: relative;
    top: 3px;
}
.payment-button, .bill-check {
	width: 100%;
    margin: 0 auto;
    cursor: pointer;
    text-align: center;
	margin-bottom: 10px;
}
.submit, .check {
	border: 0;
	width: 177px;
	height: 47px;
	background-color: #fbfbfb;
	color: #000000;
	font-family: "IranSans";
	font-size: 24px;
	cursor: pointer;
}
.submit:hover {
	box-shadow: 0 5px #00490f;
}
.check:hover {
	box-shadow: 0 5px #9e7f03;
}
.submit:active {
	box-shadow: 0 2px #00490f;
	transform: translateY(5px);
}
.check:active {
	box-shadow: 0 2px #9e7f03;
	transform: translateY(5px);
}
.submit:focus , .check:focus {
	outline: none;
}
.payment p {
	font-size: 11px;
	max-width: 200px;
    text-align: center;
	margin: 0 auto;
    margin-top: -7px;
    margin-bottom: 7px;
}
.internet-package select {
	width : calc(100% - 20px);
	height: 40px;
	margin: 0 10px;
	font-weight: bold;
}
.sim-type {
	margin: 10px 0;
	padding-right: 20px;
}
.sim-type section {
	width: 50%;
	height: 40px;
	float: right;
}
.package {
	padding-right: 15px;
	height: 220px;
	overflow-y: auto;
}
section.product-type {
	width: 48px;
	height: 48px;
	background-image: url('../img/bill-operators.png');
	display: none;
	position: relative;
	top: 20px;
	right: 10px;
}
section.product-type.water {
	background-position: 0 0;
}
section.product-type.electricity {
	background-position: -48px 0;
}
section.product-type.gas {
	background-position: -96px 0;
}
section.product-type.telephone {
	background-position: -144px 0;
}
section.product-type.cellphone {
	background-position: -192px 0;
}
section.product-type.mayoralty {
	background-position: -240px 0;
}
section.product-type.police {
	background-position: -288px 0;
}
.bargain .bill-payment {
	padding: 0 10px;
	padding-top: 40px;
}
.bargain .bill-payment > p {
	margin-bottom: 15px;
}
.bargain .bill-payment > input {
	margin-bottom: 25px;
	width: 100%;
    height: 40px;
    direction: ltr;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    color: #000000;
}
.bargain .bill-payment > div.hint-pay , .bargain .bill-payment > div.hint-bill {
	width: 100%;
    height: 40px;
	background-color: rgba(255,255,255,0.3);
	color: #ff0000;
	padding: 7px 0;
	padding-right: 10px;
	display: none;
}
.invoice .bill-payment ul {
	padding-top: 5px;
	padding-right: 5px;
}
.invoice .bill-payment ul li:first-child {
	margin-bottom: 60px;
}
.bill-check {
	margin-top: 30px;
	margin-bottom: 15px;
}
.list section, .package section {
	width: 100%;
	height: 40px;
	cursor: pointer;
	padding: 7px 10px;
}
.list section:hover, .list section.active, .package section:hover, .package section.active {
	background-color: #ffeeee;
}
.list section.active, .package section.active {
	background-color: #ffffff;
}
.list section div:first-child {
	float: right;
	overflow: hidden;
}
.list section div:nth-child(2) {
	float: left;
}
.package section div:first-child {
	float: right;
	width: 100%;
	overflow: hidden;
	padding-left: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
	font-size: 14px;
}
.package section div {
	font-size: 12px;
}
.text {
	width: calc(100% - 85px);
    text-align: center;
    display: inline-block;
    vertical-align: top;
    height: 80px;
	padding: 30px 0;
}
.sticky-menu {
	width: 25px;
	position:fixed;
	left: 27px;
	top: 50%;
	z-index: 4;
}
.sticky-menu div {
	transform: rotate(-90deg);
	height: 32px;
	width: 70px;
	text-align: center;
	border-radius: 0 0 5px 5px;
	cursor: pointer;
}
.sticky-menu div.help {
	background-color: rgba(230, 221, 221, 0.7);
	margin-top: -105px;
}
.sticky-menu div.support {
	background-color: rgba(205, 243, 214, 0.7);
}
.sticky-menu div.help:hover {
	background-color: rgba(167, 159, 159, 0.7);
	margin-top: -105px;
}
.sticky-menu div.support:hover {
	background-color: rgb(159, 239, 178);
}
.sticky-menu a {
	color: #000000;
	
}
.sticky-menu a:focus {
	outline: none;
}
input.cellphone::-webkit-input-placeholder, input.email::-webkit-input-placeholder {
	font-size: 12px;
	direction:rtl;
}
input.cellphone::-moz-placeholder, input.email::-moz-placeholder {
	font-size: 12px;
	direction:rtl;
}

@media screen and (max-width: 1000px) {
	.set {
		margin: 0;
	}
	.slider img {
		width: 100%;
		right: 0;
		margin-bottom: -10px;
	}
}
@media screen and (max-width: 800px) {
	.set {
		margin: 0;
	}
	.content {
		padding: 10px;
	}
	.bargain {
		width: 100%;
		height: auto;
		float: right;
		padding: 0;
	}
	.info {
		width: 100%;
		float: left;
		display: block;
		padding: 0;
		padding-top: 10px;
	}
	
}
@media screen and (max-width: 680px) {
	.set {
		margin: 0;
	}
	.menu div img {
		width: 50px;
	}
	.menu div p {
		font-size: 12px;
	}
}
@media screen and (max-width: 500px) {
	.set {
		margin: 0;
	}
	.menu {
		border-top: 1px solid #b3b3b3;
	}
	.menu div {
		width: 50%;
		border-bottom: 1px solid #b3b3b3;
		padding: 0;
		display: table;
	}
	.menu div:nth-child(3n) {
		margin-left: 0;
	}
	.menu div section {
		display: table-cell;
		vertical-align: middle;
	}
	.menu div img {
		margin-bottom: -7px;
	}
	.menu div p {
		margin-top: -1px;
	}
	.payment, .invoice {
		width: 100%;
		height: auto;
	}
	.invoice {
		margin-bottom: 10px; 
	}
	.slider img {
		width: 132%;
		right: -9%;
	}
	.gateways-container {
		margin: 10px auto!important;
	}
}
@media screen and (max-width: 440px) {
	.header ul {
		font-size: 14px;
	}
	.header ul li {
		padding: 8px 0;
	}
	.header ul li a {
		padding: 8px 7px;
	}
}
@media screen and (max-width: 400px) {
	.set {
		margin: 0;
	}
	.list section {
		font-size: 11px;
	}
	.list section div:first-child {
		width: calc(100% - 65px);
		float: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.list section div:nth-child(2) {
		width: 65px;
	}
	.package section div:first-child {
		font-size: 11px;
		padding-top: 5px;
	}
	.cellphone, .mail, .save {
		padding-right: 10px;
		padding-left: 10px;
	}
	.cellphone p, .mail p {
		display: none;
	}
	.cellphone input, .mail input {
		width: 100%;
		float: none;
	}
	.save label {
		margin-right: 0;
	}
	.sim-type p {
		font-size: 11px;
	}
	.charge-type input {
    margin-top: 4px;
    width: 12px;
    height: 12px;
	}
	.charge-type-container p {
		font-size: 12px;
	}
	.pin-counter {
		width: 140px;
		height: 30px;
	}
	.increase, .decrease {
		width: 30px;
		height: 30px;
		background-size: cover;
	}
	.increase {
		background-position: -30px 0;
	}
	.counter {
	    width: calc(100% - 60px);
		height: 30px;
	}
	.text {
		width: calc(100% - 65px);
		text-align: center;
		display: inline-block;
		vertical-align: top;
		height: 60px;
		padding: 20px 0;
		font-size: 12px;
	}
	
	
	.operator, .giftcard-types, .antivirus-types {
		width: 60px;
		height: 60px;
	}
	.MTN {
		background-position: -180px 0;
	}
	.MCI {
		background-position: -120px 0;
	}.Rightel {
		background-position: -60px 0;
	}
	.Talia {
		background-position: 0 0;
	}
	.iTunes {
		background-position: 0 0;
	}
	.PlayStationPlus {
		background-position: -60px 0;
	}
	.Microsoft {
		background-position: -120px 0;
	}
	.PlayStation {
		background-position: -180px 0;
	}
	.XBox {
		background-position: -240px 0;
	}
	.Steam {
		background-position: -300px 0;
	}
	.Spotify {
		background-position: -360px 0;
	}
	.Skype {
		background-position: -420px 0;
	}
	.GooglePlay {
		background-position: -480px 0;
	}
	.Amazon {
		background-position: -540px 0;
	}
	
	.eset {
		background-position: -0px 0;
	}
	.bitdefender {
		background-position: -60px 0;
	}
	.kaspersky {
		background-position: -120px 0;
	}
	.norton {
		background-position: -180px 0;
	}
	.mcafee {
		background-position: -240px 0;
	}
	.avira {
		background-position: -300px 0;
	}
	.avg {
		background-position: -360px 0;
	}
	.avast {
		background-position: -420px 0;
	}
	
	.hint-cell, .hint-mail {
		width: 100%;
		padding: 0 10px;
	}
	.hint-cell p, .hint-mail p {
		width: 100%;
		margin-left: 0;
		margin-right: 0
	}
	
}