/* 																	
	 < PROJECT 		: www.e-shop.mz > 									
	 < FILE_NAME	: e-shop.css >										
	 < LINK_FOR 	: pre_index.php / pc_portable.php >									
	 < DIRECTORY	: C:\wamp64\www\projects\MZ-PROJECTS\e-shop.mz>		
	*/

	/* --------------------------- GLOBAL --------------------------- */
	
	*
	{
		color 		: #1a1a1a ;					/*C*/
		padding 	: 0 ;						/*P*/
		margin		: 0 ; 						/*M*/
		height		: auto ;					/*'H'*/
		
		box-sizing	: border-box  ;				/*BX-SZ*/
		font-family	: Malgun Gothic ;			/*FN-F*/
	}	

	/* ----------------------------- ID ----------------------------- */
	
	#all_content_div
	{
		width		: 100% ;					/*W%*/
		height		: auto ;					/*'H'*/
		display		: inline-block ;			/*D*/
		
		border		: solid 1px #09d2f7 ;		/*♦♦♦*/
		
		padding-left	: 30px ;				/*Pl*/
		margin-top		: 20px ;				/*Mt*/
	}
	
	#header_div
	{	
		width		: 100% ;					/*W%*/
		height		: 136px ;					/*H*/
		
		border		: solid 1px black ;			/*♦♦♦*/
		
		background	: url(pictures/header_bg.jpg) no-repeat ;	/*BG-IMG*/
		
		background-size	: 100% ;				/*BG-S*/	
	}
	
	#left_content_div
	{
		width		: 20%  ;					/*W%*/
		height		: auto ;					/*'H'*/	
		display		: inline-block ;			/*D*/
		float		: left ;					/*F*/
		
		border		: solid 1px yellowred ;		/*♦♦♦*/
	}
	
	#logo_img
	{
		width		: 100px;					/*W*/	
		height		: 100px;					/*H*/	
		margin-top	: 10px ;					/*Mt*/	
		margin-left	: 60px ;					/*Ml*/
		float		: left ;					/*F*/
	}		

	#main_content_div
	{
		width		: 80%  ;					/*W%*/
		height		: auto ;					/*'H'*/	
		padding		: 0px 30px 0px 30px ;		/*P*/
		display		: inline-block ;			/*D*/
		float		: left ;					/*F*/	
		
		border		: solid 1px magenta ;	 	/*♦♦♦*/	
	}
	
	#rayons						
	{
		width		: 184px ;					/*W*/
		display		: inline-block ;			/*D*/
		position	: relative ;				/*POS*//*IMPORTANT*/
	}
	
	#rayons_div
	{
		width		: 1100px ;					/*W*/
		height		: auto ;					/*'H'*/
		position	: relative ;				/*POS*//*IMPORTANT*//*P*/
		z-index		: 1 ;						/*Z*//*IMPORTANT*//*Z*/
		
		background-color	: #ff80aa ;			/*BG-C*/
	}
	
	#rayons_menu									
	{
		width		: 180px;					/*W*/
		height		: auto ;					/*H*/
		margin-top	: 3px  ;					/*Mt*/
		display	 	: none ;					/*D*//*KEY CODE!*/
		float		: left ;					/*F*/
		
		background-color	: #f2f2f2 ;			/*BG-C*/
	}
	
	#search_box
	{
		width		: 300px;					/*W*/
		min-height	: 50px ;					/*mH*/
		max-height	: 50px ;					/*xH*/
		margin-top	: 40px ;					/*Mt*/
		margin-left	: 40px ;					/*Ml*/
		padding		: 14px 20px 12px 45px ;		/*P*/
		float		: left ;					/*F*/	
		font-size	: 16px ;					/*FN-S*/			
		cursor		: pointer ;					/*CS*/
		
		border		: solid 1px black ;			/*♦♦♦*/	
		
		border-radius		: 5px ;				/*♦*/
		background-image	: url('pictures/searching.png');	/*BG-IMG*/
		background-position	: 5px 12px  ;		/*BG-P*/
		background-repeat	: no-repeat ;		/*BG-R*/
	}
	
	#site_menu_div
	{
		height		: 36px ;					/*H*/
		
		margin-bottom	: 0	;					/*Mb*/
		padding-left	: 5% ; 				  	/*Pl*//*WORKING!*/	
		
		background		: url(pictures/menu_bg.gif) repeat-x ;	/*BG-IMG*/
	}
	
	#site_menu_ulist
	{
		display 	: inline-block ;			/*D*/
	}

	/* --------------------------- CLASS ---------------------------- */

	.add_to_chart_btn
	{
		max-width	: 170px ;					/*xW*/
		min-height	: 40px  ;					/*mH*/
		max-height	: 60px  ;					/*xH*/
		border		: none  ;					/*♦♦♦*/
		color		: white ;					/*C*/
		font-size 	: 16px  ;					/*FN-S*/
		padding 	: 5px   ;					/*P*/
		
		border-radius		: 5px ;				/*♦*/
		background-color	: #2AB049 ;			/*BG-C*/
	}
	
	.arrow_label
	{
		float		: right ;					/*F*/
	}
	
	.article_availablity_div
	{
		width		: 25%   ;					/*W%*/
		min-height	: 285px ;					/*mH*/	
		max-height	: 310px ;					/*xH*/
		float		: right ;					/*F*/
		
		border		: solid 1px orange ;	 	/*♦♦♦*/
		
		background-color	: white ;			/*BG-C-WHITE*/
	}
	
	.article_availablity_div *
	{
		margin-bottom		: 10px ;			/*Mb*/
	}
	
	.article_img
	{
		width		: 25%   ;					/*W%*/
		min-height	: 285px ;					/*mH*/
		max-height	: 308px ;					/*xH*/
		float		: left ;					/*F*/
		
		border		: solid 1px orange ;	 	/*♦♦♦*/
	}
	
	.article_link
	{
		text-decoration		: none ;			/*TXT-D*/
		text-align			: center ;			/*TXT-A*/
	}
	
	.article_link *
	{
		color 		: #0066ff ;					/*C*/
		padding-bottom	: 10px ;				/*Pb*/
	}

	.article_row_div
	{
		width		: 100%  ;					/*W%*/
		min-height	: 320px ;					/*mH*/
		height		: auto  ;					/*H*/
		border		: solid 1px #4d94ff ;		/*♦♦♦*/
		clear		: left  ;					/*CL*/
		z-index		: 1 ;						/*Z*/
		
		margin-bottom		: 20px ;		 	/*Mb*/
		background-color	: #f0f0f0 ;			/*BG-C*/
	}
	
	.article_sort
	{
		margin-left	: 15px ;					/*Ml*/
		margin-top	: 15px ;					/*Mt*/
		padding		: 5px  ;					/*P*/
		color		: red  ;					/*C-RED*/
	}
	
	.available_div
	{
		color		: #00D660 ;					/*GREEN*/
		background-color	: #efefef ;			/*LIGHT-GREY*/
	}	
	
	.availablity_div
	{	
		padding		: 0 ;						/*P*/
		border-bottom	: solid 1px lightgray ;	/*♦♦*/
	}
	
	.availability_big_div
	{
		width		: 200px ;					/*W*/
		height		: 80px ;					/*H*/
		
		border		: solid 1px lightgray ;		/*♦♦♦*/
		
		max-width		: 170px ;				/*xW*/
		margin-bottom	: 5px   ;				/*Mb*/		
		border-radius	: 5px ;					/*♦*/
		box-shadow		: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);		/*BX-SH*/
	}
	
	.brand_div
	{
		width		: 100px ;					/*W*/
		height		: 50px  ;					/*H*/
	}
	
	.cart_img
	{
		width		: 30px ;					/*W*/
		height		: 30px ;					/*H*/
	}
	
	.commig_soon_div
	{
		color		: blue ;					/*C*/
		background-color	: #EFEFEF ;			/*BG-C-WHITE*/
	}
	
	.description_div
	{	
		width		: 50% ;						/*W%*/	
		float		: left ;					/*F*/	
		padding		: 10px 20px 10px 20px ;		/*P*/
		overflow	: hidden;					/*O*/
		
		border		: solid 1px red ;	 		/*♦♦♦*/
	}
	
	.discount_amount_div
	{
		color		: white ;					/*C-WHITE*/
		display		: inline-block ;			/*D*/
		
		border-radius		: 5px ;				/*♦*/
		background-color	: red ;				/*BG-C-RED*/
	}
	
	.discount_div
	{
		display		: inline-block ;			/*D*/
		margin-left	: 35px ;					/*Ml*/
		
		text-decoration		: line-through ;	/*TXT-D*/
	}
	
	.div_electromenager
	{
		display		: none ;					/*D*/
	}
	
	.div_gaming
	{
		display		: none ;					/*D*/
	}
		
	.div_impression
	{
		display		: none ;					/*D*/	
	}	
		
	.div_informatique
	{
		display		: none ;					/*D*/
	}
	
	.div_maison
	{
		display		: none ;					/*D*/	
	}
	
	.div_reseau
	{
		display		: none ;					/*D*/	
	}
	
	.div_telephonie
	{
		display		: none ;					/*D*/	
	}
		
	.div_tv
	{
		display		: none ;					/*D*/	
	}
	
	.divider
	{
		width		: 1px ;						/*W*/
		color		: #5B5D5F ;    				/*C-DARK GREY*/
		
		margin-right		: 5px ;				/*Mr*/
		border-right		: dotted 3px white ;/*♦♦*/	
	}
	
	.filter_menu
	{
		list-style-type 	: none ;			/*LS*/
		padding-left		: 20px ;			/*Pl*/
		background-color	: #f0f0f0 ;			/*BG-C-LIGHT GREY*/
	}

	.filter_menu_item
	{
		padding-top			: 5px ;				/*Pt*/
		padding-bottom		: 5px ;				/*Pb*/
	}
	
	.header_links
	{
		float		: right ;					/*F*/
		margin-right		: 15px ;			/*Mr*/
		margin-top			: 95px ;			/*Mt*/
	}
	
	.location_img
	{
		width		: 30px ;					/*W*/
		height		: 30px ;					/*H*/
	}
	
	.menu_button
	{
		float		: left ;					 /*F*/
		display 	: inline-block ;			 /*D*/
	}

	.navigation_bar_div
	{	
		width		: 100% ;					 /*W%*/
		height		: auto ;					 /*H-*/
		border		: solid 1px black ;		 	 /*♦♦♦*/
		padding		: 0px 0px 15px 0px ;
		margin 		: 0 0 20px 0 ;				 /*M*/
		overflow	: hidden ;					 /*O*/
		
		background-color	: #f0f0f0 ;			 /*BG-C-LIGHT GREY*/
	}	

	.page_number
	{
		border		: solid 1px black ;	 		 /*♦♦♦*/
		color		: red ;						 /*C*/
		padding		: 10px 15px 10px 15px ;		
		clear 		: both ;					 /*CL*/
		
		text-decoration		: none ;			 /*TXT-D*/
		background-color	: #ffe6ff;			 /*BG-C-LIGHT PURPLE*/
	}
	
	.pagination_div
	{
		max-width	: 50%   ; 					 /*xW*/	/*VALUES IN PX HAS NO EFFECT!*/
		float		: right ;					 /*F*/
		margin-top	: 20px  ;					 /*Mt*/						
		margin-right: 30px  ;					 /*Mr*/
	}
	
	.price_div
	{
		max-width	: 170px ; 					 /*xW*/
		color		: #DC161D ; 				 /*C*/
		font-weight	: bold ;					 /*Fw*/
		font-size	: 30px ;					 /*Fs*/
		padding		: 0 0 0 25px ;				 /*P*/
		margin		: auto ; 					 /*M*//*NO EFFECT*/	
	}
	
	.rayons_menu_item
	{
		padding			: 10px 10px 10px 10px ;	 /*P*/		
		border-bottom	: solid 1px black ; 	 /*♦♦♦*/
		list-style-type	: none;					 /*LS-S*/
	}
	
	.rayons_sub_menu
	{
		width		: 900px ; 					 /*W*/
		height		: 422px ; 					 /*H*/
		display		: none  ;			  		 /*D*//*KEY CODE*/
		border		: solid 1px black ;		 	 /*♦♦♦*/
		float		: left ;					 /*F*//*NO EFFECT*/
		
		margin-top 			: 2px ;				 /*Mt*/
		background-color	: #ffff99 ;			 /*BG-C-YELLOW*/
	}
	
	.red_txt
	{
		color		: red ;						 /*C*/
		font-weight	: bold;						 /*FN-W*/
	}

	.row_height
	{
		height		: 300px ;					 /*H*/
	}

	.sold_out_div
	{
		color		: red ;							 /*C*/
		background-color	: #EFEFEF ; 		 /*LIGHT GRAY*/
	}
	
	.sub_menu_link
	{
		color		: #ffffff ;						 /*C*/
	}
	
	/* -------------------------- ELEMENTS -------------------------- */

	/* ---------------------- COMBINED SELECTORS -------------------- */
	
	#all_content_div > div
	{
		border-radius	: 5px ;					/*♦*/
	}
	
	#main_content_div > div
	{
		border-radius	: 5px ;					/*♦*/
	}	
	
	#site_menu_div #site_menu_ulist>.menu_button
	{
		display 	: inline-block ;			/*D*/
		padding		: 0px 10px 0px 8px ;		/*p*/	
		margin-top	: 9px ;						/*Mt*/
	}
	
	#site_menu_div #site_menu_ulist li a
	{
		color		:	#ffffff ; 			   	/*C-WHITE*/
		text-decoration	: none ;				/*TXT-D*/			
	}
	
	.brand_div .brand_img
	{
		height		: 100% ;					/*H*/			
		width		: 100% ;					/*W*/
	}
	
	.rayons	ul
	{
		min-width	: 190px ;					/*W*/
		height		: auto  ;					/*H-*/
		border		: solid 3px orange ;		/*♦♦♦*/	/*♦TEST♦*/	
		position	: relative	;				/*P*/	
		top			: 25px 		;				/*Pt*/
	}
	
	.rayons_menu li
	{
		padding			 : 10px 5px 10px 10px;	/*p*/
		border-bottom	 : solid black 1px;		/*♦♦♦*/
		background-color : red ;				/*BG-C-RED*/
	}
	
	ul.filter li
	{
		padding-top		: 10px ;				/*p*/
	}
	
	
	/* --------------------------- EVENTS ---------------------------- */
	
	#search_box:focus
	{
		cursor		: auto ;					/*CS*/
		background-color	: #e6f2ff ; 		/* BLUE SKY*/
	}
	
	.add_to_chart_btn:hover
	{
		width		: 162px ;					/*W*/
		height		: 42px ;					/*H*/
		cursor		: pointer ;					/*CS*/
		font-size	: 18px ;					/*Fs*/
		
		transition-duration 	: 0.4s ;		/*TN*/
	}
	
	.add_to_chart_btn:active
	{
		cursor		: default ;					/*CS*/
		background-color	: #66db81 ;			/*BG-C-GREEN*/
	}
	
	.filter_menu_item:hover
	{
		color		: purple ;					/*C*/
		background-color	: pink ;			/*BG-C-PINK*/
	}

	.rayons_menu_item:hover
	{
		color		: red ;						/*C*/
		cursor		: pointer ;					/*CS*/
	}
	
	/* ----------------- EVENTS & COMBINED SELECTORS ----------------- */	
	
	#rayons:hover #rayons_menu
	{	
		display			: inline-block  ; 		/*D*//*KEY CODE!*/	
	}
	
	#rayons_menu .rayons_menu-item:hover .rayon_sub_menu
	{
		display			: inline-block ; 		/*D*/
	}

	
	#site_menu_div #site_menu_ulist li a:hover
	{
		color		:	#fff366 ; 				/*C-YELLOW*//*#ffcc00 ORANGE*//*#199ECD BLUE*/
	}
	
	#site_menu_div #site_menu_ulist li a:focus
	{
		color		:	red ; 					/*C-RED*/
	}
	
	.article_link h3:hover
	{
		background-color	: #e6f2ff ; 		/*BG-C-LIGHT BLUE*/
	}
	
	.filter_menu_item:hover+.rayons_sub_menu
	{
		display		: inline-block;				/*D*/
	}
	
	.pagination_div .page_number:focus
	{
		background-color	: yellow ;			/*BG-C-LIGHT BLUE*/
	}
	
	.rayons_menu_item:hover .arrow_label
	{
		color		: red ;						/*C*/
	}
	
	/* ------------------------- @KEYFRAMES ------------------------- */
	
	@keyframes Mz_KeyFrame_Name
	{
	  from {opacity: 0.6} 
	  to   {opacity: 1	}
	}
	
	/* --------------------------- @MEDIAS -------------------------- */
	
	/* On smaller screens, decrease "class_txt" size */
	@media only screen and (max-width: 300px)
	{
	  .class_txt {font-size: 11px}
	}
	
	/* -------------------------------♦------------------------------ */