/* CSS Document */
body{
	margin:0;
	background: rgb(20,20,21);
	background: linear-gradient(90deg, rgba(20,20,21,1) 0%, rgba(58,65,70,1) 35%, rgba(20,20,21,1) 100%); 
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	background-image: url("/img/metal-repeat-bg4.png")
	
}

.contener{margin-right:auto; margin-left:auto; width:100%;text-align: center;}
.pagewidth{width: 100%; padding:10px;margin: auto;text-align: center;}


/***************
START Media Queries - RESPONSIVE FOR 1024px
***************/

@media handheld and (max-width: 1024px),
   screen and (max-device-width: 1024px),
   screen and (max-width: 1024px) 
   {

.top_left {width: 90%};
.top_middle {width: 100%};
.top_right{width: 4%;}

.mainslid_img{width: width:50%; height:50%;};

.left {width: 22%}
.main {width: 70%;padding: 10px;}


.contentpad  { font-size: 14px; line-height: normal; }
.just { text-align: left; }


   }
/***************
END Media Queries
***************/


.top {width: 100%; }
.top_column {float: left; padding: 10px;  } 
.top_left {width: 30%;} 
.top_right{width: 4%;}
.top_middle {width: 60%; color:white; text-align: left;}
.top:after {content: ""; display: table; clear: both;}



/* comman index body*/

.pagebody {
     color: white;
}
.left {
    float: left;
	width: 22%;
	
	/*padding: 30px;*/
	overflow: hidden;
}
.main {
    /*float: right;*/
	width: 72%;
	padding: 30px;
	overflow: hidden;
}

/* comman index page_body*/
.pagebody_page {
     color: white;
}
.pagebody:after {
    display: table;
    clear: both;
    content: '';
}
.main_page {
    /*float: right;*/
	width: 100%;
	padding: 30px;
	overflow: hidden;
}


/* product software pc catagory only */
.left_pagebody_product {height: 400px; overflow: hidden; width: 250px; float: left; border : 1px solid #0c0c0c;text-align: left; background-image: url("img/lf_bg.png"); padding: 10px;}
.left_pagebody_product:hover{background-color:#16fd09}
.left_pagebody_product a{color: white;font-size: 22px; text-decoration: none;  display: inline-block;}
.left_pagebody_product a:hover{background: #16fd09; color: #ffffff;}

/* product index */
.left_catagory {border : 1px solid #0c0c0c;text-align: center; background-image: url("/img/lf_bg.png"); padding: 10px;opacity: 0.7;}
.left_catagory:hover{background-color:#16fd09}
.left_catagory a{color: white;font-size: 22px; text-decoration: none;  display: inline-block;}
.left_catagory a:hover{background: #16fd09; color: #ffffff;}

.mainslid{position: relative; width:100%; height:80%; background-image:  url("/img/bg.png"); background-position: center; }
.mainslid_img{width:80%; height:70%; text-align: center; overflow: hidden;}
.mainslid_text{position: absolute;top:70%;padding-left: 20px;overflow: hidden; }
.mainslid_text_fade{position: absolute;	top: 70%;width: 100%;	height: 25%; background-color:#020202;opacity: 0.5;}
.mainslid_text_title{font-size: 30px; color: white;overflow: hidden;}





/* index page news grid */

.item_grid {
  /*display: grid;*/
  /*grid-template-columns: auto auto auto;*/
  /*grid-gap: 10px;*/
  /*background-color: #589DDE;*/
  /*padding: 10px;*/
  /*width=100%;*/
  
  padding: 6 6px;
  float: left;
  /*width: 24.99999%;*/
 
}

.item_grid > div {
  /*background-color: rgba(88, 157, 222, 0.8);*/
  text-align: center;
  padding: 20px 5px;
  font-size: 20px;
}

.item_grid_item{
	/*background-color:rgba(15, 64, 110, 0.8);*/
	
  border: 1px solid #8A849F;
  padding: 10px;
  width: 250px;
  height: 600px; 
}
.item_grid_item:hover{background-color:#16fd09}
.item_grid_image{
	width: 30%; height: auto; vertical-align: middle;
	  /*border: 2px solid red;*/
  padding: 10px;
 
}


.item_grid_text{
	padding: 10px;
}

.item_grid_text_date{font-weight:normal;color:white;font-size:14px;text-align:left;font-family:trebuchet MS, sans-serif;line-height:1;text-decoration: none;}
.item_grid_text_title{font-weight:normal;color:white;font-size:18px;text-align:left;font-family:trebuchet MS, sans-serif;line-height:1.3;text-decoration: none;}
.item_grid_text_descrip{font-weight:normal;color:white;font-size:14px;text-align:left;font-family:trebuchet MS, sans-serif;line-height:1.3;text-decoration: none;}
.item_grid_text_price{font-weight:normal;color:white;font-size:32px;text-align:left;font-family:trebuchet MS, sans-serif;line-height:1.3;text-decoration: none;}


/***************
.top_text_title {font-weight:normal;color:white;font-size:11px;text-align:left;font-family:trebuchet MS, sans-serif;line-height:1.3;text-decoration: none;}
****************/

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #656475;
   color: white;
   text-align: center;
 }

.footer-container {
  /* background-color: green;  Optional */
  display: grid;
  grid-gap: 1rem; /* Optional */
  grid-template-columns: 1fr 1fr 1fr ;
  /*padding: 1rem;  Optional */
}

.column {
  /* background-color: yellow;  Optional */
  /* padding: 1rem;  Optional */
}