/*------------------------------------ Tags ------------------------------------*/
*
{
	box-sizing:border-box;
}
html
{
	direction:rtl;
}
body
{
	color:#000;
	margin:0;
}
body,p,ul,ol,li
{
	font:400 13px 'Gothic','DroidKufi','Tahoma';
}
h1
{
	text-align:center;
}
a:link
{
	text-decoration:none;
	transition:all 0.2s;
}
a:link,a:visited,a:active
{
	color:#111;
}
a:hover,a:focus
{
	color:#00f;
}
hr
{
	height:1px;
	border:none;
	background:#ddd;
	max-width:1000px;
	width:96%;
	margin:5px auto;
}
b
{
	letter-spacing:0.5px;
}
img
{
	max-width:100%;
	height:auto;
}
iframe
{
	font:400 15px 'Gothic','DroidKufi','Tahoma';
	color:#111;
	border:none;
	background:#FFF;
}
audio
{
	width:100%;
	max-width:700px;
	outline:none;
}
video
{
	width:100%;
	max-width:1000px;
	outline:none;
}
@media only screen and (min-width:992px)
{
	body,p,ul,ol,li	{ font-size:15px; }
}
/*------------------------------------ Main ------------------------------------*/
.hidden
{
	display:none;
}
img.border
{
	border-radius:15px;
}
img.print
{
	max-width:500px;
}
div#loading,div#loading img
{
	height:50px;
}
div.captcha
{
	height:50px;
}
div.clearfix::after
{
	content:"";
	clear:both;
	display:table;
}
div#backtotop
{
	color:#444;
	position:fixed;
	bottom:100px;
	right:15px;
	padding:0;
	cursor:pointer;
	transition:color 0.3s;
}
div#backtotop:hover
{
	color:#000;
}
div#backtotop::after
{
	font:400 36px 'FontAwesome';
	content:"\f35b";
}
/*------------------------------------ Forms ------------------------------------*/
form
{
	margin:0;
}
input,textarea,select
{
	font:400 13px 'DroidKufi','Tahoma';
	color:#111;
	border:none;
	width:100%;
	max-width:500px;
	background:#EDF2FF;
	padding:8px 10px;
	margin:5px 0;
	display:block;
	transition:all 0.4s;
	border-radius:3px;
}
input:hover,input:focus,textarea:hover,textarea:focus,select:hover,select:focus
{
	color:#000;
	background:#B6CBFF;
	outline:none;
}
textarea::placeholder,input::placeholder
{
	color:#111;
}
input[type=image],input.widthauto
{
	width:auto;
}
input[type=radio]
{
	width:auto;
	display:inline;
	vertical-align:text-bottom;
	margin:5px 7px;
	outline:none;
}
input[type=checkbox]
{
	width:auto;
	display:inline;
	vertical-align:text-bottom;
	margin:5px 7px;
	width:16px;
	height:16px;
}
button,input.button,a.button,input[type=submit],input[type=reset]
{
	font:400 13px 'DroidKufi','Tahoma';
	color:#000;
	border:none;
	background:#FED100;
	padding:4px 12px;
	margin:0;
	display:inline-block;
	width:auto;
	outline:none;
	cursor:pointer;
	transition:all 0.2s;
	border-radius:3px;
}
button:hover,input.button:hover,a.button:hover,input[type=submit]:hover,input[type=reset]:hover
{
	background:#555;
	color:#fff;
	outline:none;
}
label
{
	cursor:pointer;
}
.smallbutton
{
	padding:2px 5px;
	font-size:13px;
}
.inline
{
	display:inline-block;
}
div.pagination input[type=submit]
{
	padding:3px 5px;
	margin:3px;
}
@media only screen and (min-width:992px)
{
	input,textarea,select,button,input.button,a.button,input[type=submit],input[type=reset]	{ font-size:15px; }
	div.pagination input[type=submit] { padding:3px 7px; margin:4px; }
}
/*------------------------------------ Modal ------------------------------------*/
img.imagemodal
{
	cursor:pointer;
}
div.modal
{
	display:none;
	position:fixed;
	z-index:10;
	padding-top:25px;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgba(0,0,0,0.85);
}
span.closemodal
{
	color:#fff;
	position:absolute;
	top:5px;
	right:35px;
	font-size:50px;
	font-weight:bold;
	transition:color 0.4s;
	cursor:pointer;
}
span.closemodal:hover,span.closemodal:focus
{
	color:#999;
}
img.bigimagemodal
{
	height:90%;
	max-width:1200px;
	display:block;
	margin:auto;
}
div.captionmodal
{
	color:#fff;
	margin:auto;
	display:block;
	width:90%;
	max-width:1000px;
	text-align:center;
	padding:15px 0;
	font-size:20px;
}
img.bigimagemodal,div.captionmodal
{    
	animation:zoom 0.6s;
}
@media only screen and (max-width:768px)
{
	div.modal
	{
		padding-top:50px;
	}
	img.bigimagemodal
	{
		width:100%;
	}
	span.closemodal
	{
		top:5px;
		left:20px;
		font-size:34px;
	}
}
/*-------------------- Badges --------------------*/
.badge
{
	border-radius:25px;
	text-align:center;
	display:inline;
	padding:2px 8px;
}
/*-------------------- Backgrounds --------------------*/
.graybg		{ background:#777; color:#fff; }
.redbg		{ background:#f00; color:#fff; }
.greenbg	{ background:#080; color:#fff; }
.bluebg		{ background:#00f; color:#fff; }
.magentabg	{ background:#f0f; color:#fff; }
/*------------------------------------ Colors ------------------------------------*/
.green		{ color:#080; }
.blue		{ color:#00f; }
.red		{ color:#f00; }
.magenta	{ color:#f0f; }
.navy		{ color:#008; }
.white		{ color:#fff; }
.gray		{ color:#777; }
.gray2		{ color:#ccc; }
/*------------------------------------ Directions ------------------------------------*/
.center		{ text-align:center; }
.right		{ text-align:right; }
.left		{ text-align:left; }
.middle		{ vertical-align:middle; }
.english	{ direction:ltr; }
/*------------------------------------ Sizes ------------------------------------*/
.width100	{ max-width:100px; }
.width150	{ max-width:150px; }
.width200	{ max-width:200px; }
.width250	{ max-width:250px; }
.width300	{ max-width:300px; }
.width400	{ max-width:400px; }
.width500	{ max-width:500px; }
.width600	{ max-width:600px; }
.width700	{ max-width:700px; }
.width800	{ max-width:800px; }
.width900	{ max-width:900px; }
.height100	{ min-height:100px; }
.height200	{ min-height:200px; }
/*------------------------------------ Margins ------------------------------------*/
.marginx5	{ margin-right:5px; margin-left:5px; }
.marginx10	{ margin-right:10px; margin-left:10px; }
.marginx15	{ margin-right:15px; margin-left:15px; }
.marginx20	{ margin-right:20px; margin-left:20px; }
.marginx25	{ margin-right:25px; margin-left:25px; }
.marginy5	{ margin-top:5px; margin-bottom:5px; }
.marginy10	{ margin-top:10px; margin-bottom:10px; }
.marginy15	{ margin-top:15px; margin-bottom:15px; }
.marginy20	{ margin-top:20px; margin-bottom:20px; }
.marginy25	{ margin-top:25px; margin-bottom:25px; }
/*------------------------------------ Padding ------------------------------------*/
.paddingx5	{ padding-right:5px; padding-left:5px; }
.paddingx10	{ padding-right:10px; padding-left:10px; }
.paddingx15	{ padding-right:15px; padding-left:15px; }
.paddingx20	{ padding-right:20px; padding-left:20px; }
.paddingx25	{ padding-right:25px; padding-left:25px; }
.paddingy5	{ padding-top:5px; padding-bottom:5px; }
.paddingy10	{ padding-top:10px; padding-bottom:10px; }
.paddingy15	{ padding-top:15px; padding-bottom:15px; }
.paddingy20	{ padding-top:20px; padding-bottom:20px; }
.paddingy25	{ padding-top:25px; padding-bottom:25px; }
/*------------------------------------ Fonts ------------------------------------*/
.smallest	{ font-size:11px; }
.small		{ font-size:13px; }
.big		{ font-size:17px; }
.biggest	{ font-size:19px; }
.number		{ font-family:'Tahoma'; font-weight:700; }
/*------------------------------------ Control Buttons ------------------------------------*/
a.control
{
	font:900 22px 'FontAwesome';
	color:#777;
	cursor:pointer;
	transition:all 0.1s;
	display:inline-block;
	vertical-align:middle;
}
a.control:hover		{ transform:scale(1.1); }
a.download:before	{ content:"\f358"; color:#555; }
@media only screen and (min-width:768px)
{
	a.control	{ font-size:26px; }
}
/*------------------------------------ Shopping Cart ------------------------------------*/
div.shoppingcart
{}
div.shoppingcart img
{
	width:75px;
	height:75px;
	vertical-align:middle;
}
button.cart
{}
button.cart::after
{
	font:900 18px 'FontAwesome';
	content:" \f07a";
}
button.cart2
{
	background:#888;
	outline:none;
}
button.cartplus,button.cartminus,button.cartdelete
{
	font:900 28px 'FontAwesome';
	background:none;
	color:#666;
	padding:0;
}
button.cartplus:hover,button.cartminus:hover,button.cartdelete:hover
{
	color:#000;
}
button.cartplus::after
{
	content:"\f0fe";
}
button.cartminus::after
{
	content:"\f146";
}
button.cartdelete::after
{
	content:"\f1f8";
}
/*------------------------------------ Animations ------------------------------------*/
.light			{ opacity:1; transition:opacity 0.3s; }
.light:hover	{ opacity:0.7; }
.dark			{ opacity:0.7; transition:opacity 0.3s; }
.dark:hover		{ opacity:1; }
.dark2			{ filter:brightness(75%); transition:filter 0.3s; }
.dark2:hover	{ filter:none; }
.enlarge		{ transition:transform 0.2s; }
.enlarge:hover	{ transform:scale(1.3); }
.enlarge2		{ transition:transform 0.2s; }
.enlarge2:hover	{ transform:scale(1.1); }
.rotate			{ transition:transform 0.5s; }
.rotate:hover	{ transform:rotate(360deg); }
.rotatex		{ transition:transform 0.5s; }
.rotatex:hover	{ transform:rotateX(360deg); }
.rotatey		{ transition:transform 0.5s; }
.rotatey:hover	{ transform:rotateY(360deg); }
.fade			{ animation:fade 2s; }
.totop			{ animation:totop 1s; }
.tobottom		{ animation:tobottom 1s; }
.toright		{ animation:toright 1s; }
.toleft			{ animation:toleft 1s; }
.zoom			{ animation:zoom 1s; }
@keyframes fade
{
	from	{ opacity:0.4; }
	to		{ opacity:1; }
}
@keyframes totop
{
	from	{ top:100px; opacity:0; }
	to		{ top:0px; opacity:1; }
}
@keyframes tobottom
{
	from	{ bottom:100px; opacity:0; }
	to		{ bottom:0px; opacity:1; }
}
@keyframes toright
{
	from	{ right:100px; opacity:0; }
	to		{ right:0px; opacity:1; }
}
@keyframes toleft
{
	from	{ left:100px; opacity:0; }
	to		{ left:0px; opacity:1; }
}
@keyframes zoom
{
	from	{ transform:scale(0.1); } 
	to		{ transform:scale(1); }
}
/*------------------------------------ Fonts ------------------------------------*/
@font-face
{
	font-family:'DroidKufi';
	src:url('../fonts/droidkufi.woff') format("woff");
}
@font-face
{
	font-family:'DroidKufi';
	src:url('../fonts/droidkufi-bold.woff') format("woff");
	font-weight:900;
}
@font-face
{
	font-family:'HacenAlgeriaHd';
	src:url('../fonts/hacenalgeriahd.ttf') format("truetype");
}
@font-face
{
	font-family:'Gothic';
	src:url('../fonts/gothic.woff') format("woff");
}
@font-face
{
	font-family:'Gothic';
	src:url('../fonts/gothic-bold.woff') format("woff");
	font-weight:900;
}
@font-face
{
	font-family:'FontAwesome';
	font-weight:400;
	src:url("../fonts/fontawesomeregular400.woff") format("woff");
}
@font-face
{
	font-family:'FontAwesome';
	font-weight:900;
	src:url("../fonts/fontawesomesolid900.woff") format("woff");
}
@font-face
{
	font-family:'FontAwesome';
	font-weight:400;
	src:url("../fonts/fontawesomebrands400.woff") format("woff");
}