/* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video 
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
} 
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section 
{
    display: block;
}
body 
{
    line-height: 1;
}
ol, ul 
{
    list-style: none;
}
blockquote, q 
{
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after 
{
    content: '';
    content: none;
}
table 
{
    border-collapse: collapse;
    border-spacing: 0;
}
/* End of CSS Reset */   
/*--------------------------------------------------------------------*/
@font-face {
  font-family: Vazir;
  src: url('fonts/Vazir.eot');
  src: url('fonts/Vazir.eot?#iefix') format('embedded-opentype'),
       url('fonts/Vazir.woff') format('woff'),
       url('fonts/Vazir.ttf') format('truetype');
  font-weight: normal;
}
      
@font-face {
  font-family: Vazir;
  src: url('fonts/Vazir-Bold.eot');
  src: url('fonts/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/Vazir-Bold.woff') format('woff'),
       url('fonts/Vazir-Bold.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: Vazir;
  src: url('fonts/Vazir-Light.eot');
  src: url('fonts/Vazir-Light.eot?#iefix') format('embedded-opentype'),
       url('fonts/Vazir-Light.woff') format('woff'),
       url('fonts/Vazir-Light.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: Shabnam;
  src: url('fonts/Shabnam.eot');
  src: url('fonts/Shabnam.eot?#iefix') format('embedded-opentype'),
       url('fonts/Shabnam.woff') format('woff'),
       url('fonts/Shabnam.ttf') format('truetype');
  font-weight: normal;
}
      
@font-face {
  font-family: Shabnam;
  src: url('fonts/Shabnam-Bold.eot');
  src: url('fonts/Shabnam-Bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/Shabnam-Bold.woff') format('woff'),
       url('fonts/Shabnam-Bold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: Shabnam;
  src: url('fonts/Shabnam-Light.eot');
  src: url('fonts/Shabnam-Light.eot?#iefix') format('embedded-opentype'),
       url('fonts/Shabnam-Light.woff') format('woff'),
       url('fonts/Shabnam-Light.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: BTitrBold;
  src: url('fonts/BTitrBold.eot');
  src: url('fonts/BTitrBold.eot?#iefix') format('embedded-opentype'),
       url('fonts/BTitrBold.woff') format('woff'),
       url('fonts/BTitrBold.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: 'b koodak';
  src: url('fonts/BKoodakBold.eot');
  src: url('fonts/BKoodakBold.eot?#iefix') format('embedded-opentype'),
       url('fonts/BKoodakBold.woff') format('woff'),
       url('fonts/BKoodakBold.ttf') format('truetype');
}
/*----------------------------------------------------------*/
*
{
	box-sizing: border-box;
}
body
{
    background-color: white;
}
ul
{
    position: absolute;
    padding: 0;
    margin: 0;
    list-style-type: none;    
    font-size: 1.2vw;
    direction: rtl;
}                                       
li
{
    display: inline;
    cursor: pointer; 
    direction: rtl;
}
a
{
	color: transparent;
	width: 0px;
}
a,body,h1,h2,h3,h4,h5,h6,p,span,input,textarea,ul,li,ol,div 
{
    font-family: "Vazir", "Shabnam", "BTitrBold", "tahoma";
}
/*-------------------------------------------------------------*/
:root
{
    --header_background_color: #2e344e;
    --header_foreground_color: white;
    --body_background_color: #d20039;
    --body_foreground_color: white;
    --seperator_color: transparent;
}
.class_color_transparent
{
	color: transparent;
}
.class_link_no_underline
{
	text-decoration: none;
}
.col-s-0{width: 0%;}
.col-s-1{width: 8.33%;}
.col-s-2{width: 16.66%;}
.col-s-3{width: 25%;}
.col-s-4{width: 33.33%;}
.col-s-5{width: 41.66%;}
.col-s-6{width: 50%;}
.col-s-7{width: 58.33%;}
.col-s-8{width: 66.66%;}
.col-s-9{width: 75%;}
.col-s-10{width: 83.33%;}
.col-s-11{width: 91.66%;}
.col-s-12{width: 100%;}
[class*="col-"]
{
	float: right;
}
/*-------------------------------------- section header ---------*/
.class_header
{               
    position: relative;
	width: 100%;
    left: 0px;
    top: 0px;	
    border-top: 1px solid white;	
    background-color: var(--header_background_color);
    color: var(--header_foreground_color);
    padding-top: 3vw;
    padding-bottom: 3vw;
}
.class_header_logo
{
    position: relative;
	margin: auto;
	left: 0px;
    top: 0px;
    width: 100%;
   
}
.class_header_logo_image
{
	display: block;
    position: relative;
	margin: auto;
    width: calc(10% + 250px);
    height: 100%;	
}
.class_header_logo_text /* no use*/
{
    position: relative;	
	font-family: Shabnam;
	font-weight: bold;
	font-size: calc(10% + 30px);/*30px + 0.390625vw);*/
	height: auto;
	color: #e10044;
    text-shadow: 1px 1px black;
	display: block;
	text-align: center;
	padding-top: 2vw;
	margin-bottom: 3vw;
}
/*--------------------------------------- section menu ------------*/
.class_menu_item
{
	position: relative;
	float: right;
	text-align: center;
}
.class_menu_link
{
    font-family: 'b koodak';
	position: relative;	
    color: white; /*#e10043;*/
    /*text-shadow: 0px 0px white  ;*/
	line-height: 50px; /* vertically center */
	text-decoration: normal;	
	font-size: calc(50% + 0.7vw);
}
.class_menu_link:hover
{
	cursor: pointer;
    text-shadow: 0px 0px white;
}
.class_menu_top
{               
    position: relative;
	width: 100%;
    height: 50px;    
	background-color: var(--header_background_color);
    color: var(--header_foreground_color);
	border-bottom: 1px solid white;	
	direction: rtl;
}
/*-------------------------------------------------- side_bar --------------------*/
.class_side_bar_image
{
	position: relative;
	left: 0px;
	top: 0px;
	width: 30px;
	height: 30px;
}
.class_side_bar_image:hover
{	
	left: 1px;
	top: 1px;
}
#id_side_bar_1
{
	border-top: 1px solid gray;
}
.class_side_bar_items
{
	position: relative;
	background-color: transparent;
	color: white;
	font-size: 24px;
	height: 70px;
	padding-top: 20px;
	padding-right: 20px;
	text-align: right;
	border-bottom: 1px solid gray;
}
.class_side_bar_items:hover
{
	background-color: gray;
}
#id_side_bar
{
	position: relative;
	direction: rtl;	
	height: 450px;
	padding-top: 70px;
	width: 70%;
	margin: auto;
}
/*-------------------------------------------- section categorization --------------*/
.class_categorization
{
	position: relative;
	width: 100%;
	left: 0px;
	top: 0px;
	height: 370px;
	direction: rtl;
	padding: 20px;
	background-color: var(--body_background_color);
    color: var(--body_foreground_color);
    z-index: 1000;
	/*background-image: linear-gradient(slategray, slategray, slategray);*/
	/*
	background-image: url("images/categorization_background.png");
	background-size: cover;
	background-repeat: no-repeat;
    border-bottom: 1px solid white;
	*/
	
}
.class_categorization_items
{
	display:block;
	position: relative;
	height: 150px;
	line-height: 1.8;
	text-align: right;
	margin-bottom: 20px;
	box-shadow: 3px 3px 3px 0px black;
	border-radius: 5px;
    background-color: var(--header_background_color);
    color: var(--header_foreground_color);
    direction: rtl;
}
.class_categorization_items:hover
{
	left: 1px;
	top: 1px;
}
/*
#id_categorization_2
{
	background-image: linear-gradient(white 10%, lightgreen);
}
#id_categorization_4
{
	background-image: linear-gradient(white 10%, lightblue);
}
#id_categorization_6
{
	background-image: linear-gradient(white 10%, coral);
}
*/
/*------------------------------------------- section advertises ------------*/
.class_advertises
{
	position: relative;
    width: 100%;
    height: 300px;  
	left: 0px;
	top: 0px;
	direction: ltr;
    background-color: var(--body_background_color);
    color: var(--body_foreground_color);
	border-bottom: 1px solid white;
}
.class_frame_advertises
{
	position: relative;  
	display: block;
	height: 250px;
	overflow: scroll;
	overflow-y: hidden;
	overflow-x: hidden;
	scroll-behavior: smooth;
	top: 8%;	
	border: 2px solid transparent;
	box-shadow: 0px 0px 2px 2px var(--header_background_color);	
    
	/*
	border: 60px solid transparent;
	border-image: url("images/border_categorization.png") 120 round;
	*/
}
.class_main_advertises
{
	position: relative;	
	display: block;
	height: 250px;
	right: 0px;	
	background-color: var(--header_background_color);
    color: var(--header_foreground_color);
}
.class_advertise
{
    position: relative;
	float: right;
	height: 200px;
	width: 200px;	
	top: 9%;
	margin-left: 20px;
	border: 1px solid white;
}
#id_advertise_1
{
	margin-right: 20px;
}
.class_scroll_advertises
{
    position: relative;
	width: 46px; 
	height: 46px;
	left: calc(50% - 23px);
	top: calc(50% - 23px);
	background-color: transparent;
}
.class_scroll_container
{
	height: 100%;
}
.class_image_scroll_advertises
{
	position: relative;
	width: 46px; 
	height: 46px;
	border: 1px solid transparent; /* for simple moving animation*/
}
.class_image_scroll_advertises:hover
{
	border: 2px solid transparent;
}
.class_image_advertise
{
    position: relative;	
	width: 100%; 
	height: 100%;
}
.class_image_advertise:hover
{
    box-shadow: 0px 0px 5px 5px var(--body_background_color);
}
/*----------------------------------------------- page home ------------*/	
.class_page_home
{
    position: relative;
	left: 0px;
    z-index:0;
    width: 100%;  
    height: auto;              
    background-color: var(--body_background_color);
    color: var(--body_foreground_color);          
    display:  block;
    direction: ltr;
} 
.class_slider
{
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 100%;
    border-bottom: 1px solid var(--seperator_color);
}	
/*------------------------------------ page downloads -------------*/
.class_page_downloads
{
    position: relative;
    line-height: 1;
    background-color: var(--body_background_color);
    color: var(--body_foreground_color);          
    width: 100%;
    padding-left: 20%;
    padding-right: 20%;
    font-size: 22px;
    display:  block;
    direction: ltr;
	border-bottom: 1px solid var(--seperator_color);
}   
.class_image_downloads
{
    position: relative;
    float: right;
    width: 50%;
    right: 0%;
    margin-bottom: 50px;    
} 
.class_text_download
{
    line-height: 1.8; 
    margin-bottom: 100px; 
    text-align: right;
    direction: rtl;
}

.class_links_downloads
{
	position: relative;
	text-align: left;
	left: 20%;
	width: 80%;
	padding-bottom: 100px;
    color: green;
} 
.class_link_downloads
{
	position: relative;
	text-align: left;
	color: var(--header_foreground_color);
} 
.class_link_downloads:hover
{
	color: var(--header_background_color);	
}  
/*------------------------------------------ page about ------*/
.class_page_about
{
    position: relative;    
    padding-bottom: 40px; 
    background-color: var(--body_background_color);
    color: var(--body_foreground_color);          
    width: 100%;   
    font-size: 14px;
    display:  block;
	border-bottom: 1px solid var(--seperator_color);
}    
.class_text_about
{
	position: relative;
	line-height: 1.9; 
	direction: rtl;
	text-align: right;
	display: block;
	width: 60%;
	height: 100%;
	left: 20%;
	letter-spacing: 0px;
    margin-bottom: 50px;
}
.class_titr_about
{
    font-size: 18px;
    font-weight: bold;
}
.class_image_about
{
    position: relative;
    float: right;
    width: 50%;
    right: 0%;
    margin-bottom: 50px;    
} 
/*-------------------------------------- page contact --------------*/
.class_page_contact
{
    position: relative;
    text-align: center;
    background-color: var(--body_background_color);
    color: var(--body_foreground_color);          
    width: 100%; 
	left: 0px;
    display:  block;
	border-bottom: 1px solid var(--seperator_color);
}
.class_logo_contact
{
	position: relative;
	width: 30%;
	height: 40%;
}
.class_image_contact
{
    position: relative;
	width: 50%;
} 
.class_contact_text
{
	position: relative;
	text-align: right;
	line-height: 1.9; 
	direction: rtl;
	right: 5%;
	padding-top: 2%;
}  
.class_contact_items
{
	position: relative;
	right: 5%;
}
/*------------------------------------------------ page products -------*/
.class_page_products
{
    position: relative;
    background-color: var(--body_background_color);
    color: var(--body_foreground_color);                  
    width: 100%; 
    direction: ltr;
	border-bottom: 1px solid var(--seperator_color);
	
}
.class_contain_list_products
{
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}
.class_all_list_products
{
	position: relative;
	width: 90%;	
	margin: auto;
    margin-bottom: 100px;
}
.class_list_products
{
	position: relative;
	width: 100%;
	height: 250px;
	border: 1px solid white;
	/*background-image: url('images/products_background.png?version_id=62');*/
	background-color: white;
    border: 1px solid transparent;
    box-shadow: 3px 3px 3px 0px black;
    border-radius: 10px;
    
	margin-bottom: 20px;
}
.class_text_products
{     
    position: relative;
	line-height: 2;
	direction: rtl;
    font-size: 18px; 
    font-weight: bold;
	color: navy;
	text-align: center;
	top: calc(50% - 50px);
    
}
.class_text_products:hover
{     
    font-size: 19px;     
}
.class_image_products
{
    position: relative;	
	width: 200px;
	height: 200px;
	left: calc(50% - 100px);
	top: calc(50% - 100px);
}
.class_image_products:hover
{
	border: 2px solid transparent;
	box-shadow: 0px 0px 5px 5px transparent;
}
.class_products_containter
{
	position: relative;	
	float: right; 
	width: 40%;
	height: 250px;
}
.class_products_containter_empty
{
	position: relative;	
	float: right; 
	width: 10%;
	height: 250px;
}
.class_image_products_mini
{
    position: relative;	
    float: right;
	
}
.class_image_products_logo
{
    position: relative;
    float: right;
    right: 0%;
    margin-bottom: 50px;    
} 
/*--------------------------------------------- page product --------------------*/
.class_page_product
{
    position: relative;
    background-color: var(--body_background_color);
    color: var(--body_foreground_color);                 
    width: 100%;            
	padding-top: 50px;
	direction: rtl;
	border-bottom: 1px solid var(--seperator_color);
}
.class_product
{
	position: relative;
	display: block;
    background-color: var(--body_background_color);
    color: var(--body_foreground_color);                
    width: 90%;
	/*padding-left: 10%;
	padding-right: 10%;
	*/
	margin: auto; /*horizontally center*/
    font-size: 14px;            
	direction: rtl;
}
.class_titr_product
{
	position: relative;
	line-height: 1.5;
    font-size: 18px;
    font-weight: bold;
	text-align: right;
	margin-bottom: 50px;
}
.class_video_product
{
	position: relative;	
	margin-bottom: 80px;
	padding: 20px;
} 
.class_text_product
{
	position: relative;	
	line-height: 1.9; 
	direction: rtl;
	text-align: right;	
}
.class_link_product /* use for product 9 (Four Axes Controller) because of two images */
{
	position: relative;
	text-decoration: none;
}
.class_show_image_product
{
	position: relative;
    padding: 5px;
	width: 100%;
}
.class_image_product
{
	position: relative;
    padding: 5px;
    border: 1px solid var(--body_foreground_color);
	margin-left: 10px;
	width: 100px;
	height: 100px;
	z-index: 2000;
}
.class_image_product:hover
{
    
    box-shadow: 0px 0px 5px 5px var(--body_foreground_color);
}     
.class_return_products
{
	color: var(--body_foreground_color);
    font-family: 'b koodak';
}
.class_show_product
{
	position:fixed;
	display:none;
	left: 0px; 
	width: 100%; 
	height: 100%; 
	top: 0px; 
	padding-top: 20px; 
	z-index:6000;	
	overflow:auto;
}
/*--------------------------------------------------- section footer ------*/
.class_footer
{
    position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
    width: 100%;
	height: 80px; 
    left: 0px;
	top: 0px;
    background-color: var(--header_background_color);
    color: var(--header_foreground_color);
	border-bottom: 1px solid white;
}
.class_text_footer
{
	position: relative;
    font-size: 14px;
	color: white; /* #e10044;*/
	direction: rtl; 
}
/*-----------------------------------------------------------------------------------------*/
/*---------------------------------------------------------- tablet -----------------------*/
@media only screen and (min-width: 600px)
{
	.col-m-0{width: 0%;}
	.col-m-1{width: 8.33%;}
	.col-m-2{width: 16.66%;}
	.col-m-3{width: 25%;}
	.col-m-4{width: 33.33%;}
	.col-m-5{width: 41.66%;}
	.col-m-6{width: 50%;}
	.col-m-7{width: 58.33%;}
	.col-m-8{width: 66.66%;}
	.col-m-9{width: 75%;}
	.col-m-10{width: 83.33%;}
	.col-m-11{width: 91.66%;}
	.col-m-12{width: 100%;}
	.class_categorization
	{
		height: 200px;
	}
    .class_categorization_items
	{
		height: 150px;
	}	
	#id_categorization_2
	{
		margin-left: 20px;
		width: calc(50% - 20px);
	}
	#id_categorization_4
	{
		margin-left: 20px;
		width: calc(50% - 20px);
	}
	.class_contact_text
	{
		padding-top: 0px;
	}
	.class_image_contact
	{
		width: 70%;
	}
	.class_all_list_products
	{
		width: 80%;
	}
	.class_product
	{
		width: 80%;
	}
    .class_products_containter_empty
    {
        width: 15%;
    }
    .class_slider
    {
        height: 100%;
    }
}
/*----------------------------------------------------------- desktop -------------------*/
@media only screen and (min-width: 900px)
{
	.col-l-0{width: 0%;}
	.col-l-1{width: 8.33%;}
	.col-l-2{width: 16.66%;}
	.col-l-3{width: 25%;}
	.col-l-4{width: 33.33%;}
	.col-l-5{width: 41.66%;}
	.col-l-6{width: 50%;}
	.col-l-7{width: 58.33%;}
	.col-l-8{width: 66.66%;}
	.col-l-9{width: 75%;}
	.col-l-10{width: 83.33%;}
	.col-l-11{width: 91.66%;}
	.col-l-12{width: 100%;}
	.class_categorization
	{
		height: 200px;
	}
	.class_categorization_items
	{
		height: 150px;
	}
	#id_categorization_2
	{
		margin-left: 20px;
		width: calc(50% - 20px);
	}
	#id_categorization_4
	{
		margin-left: 20px;
		width: calc(50% - 20px);
	}
	.class_contact_text
	{
		padding-top: 0px;
	}
	.class_image_contact
	{
		width: 50%;
	} 
	.class_all_list_products
	{
		width: 60%;
	}
	.class_product
	{
		width: 70%;
	}
    .class_products_containter_empty
    {
        width: 20%;
    }
    .class_slider
    {
        height: 100%;
    }
}