@media (min-width:250px) and (max-width: 320px ){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:0%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:1%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:20%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 5px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
	text-align:justify;
}

.nav {
  overflow: hidden;
  background-color: #353366;
}

.nav a {
  float: left;
  display: block;
  color: #000000;
  text-align: left;
  text-decoration: none;
  padding:0px 5px 5px 5px;
  font-size: 17px;
}

.nav a:hover {
  color: #FFFFFF;
  background-color: #000000;
}

.nav .icon 
{
  display: none;
}
.nav a:not(:first-child)
{
display: none;
}
.nav a.icon
{
float: right;
display: block;
}
.nav.responsive
{
	position:relative;
}
.nav.responsive .icon 
{
    position: absolute;
    right: 0;
    top: 0;
  }
 .nav.responsive a
  {
    float: none;
    display: block;
    text-align: left;
  }
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
  margin:5px 0px 0px 5px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:1%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
  
  
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0px solid yellow;
  }
 
/*Rule-17*/
hgroup 
{
  width:100%;
  margin: 5px 0px 0px 2%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 1px #353375; 
  -webkit-border-radius: 5px;
  width:100%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;

   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#DFE1E3;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  width:100%;
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:5px 5px 5px 0px;
  padding :2px 2px 2px 2px;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}
}
@media (min-width:321px) and (max-width: 350px){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:0%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:1%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:23%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 5px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
	text-align:justify;
}

.nav {
  overflow: hidden;
  background-color: #353366;
}

.nav a {
  float: left;
  display: block;
  color: #000000;
  text-align: left;
  text-decoration: none;
  padding:0px 5px 5px 5px;
  font-size: 17px;
}

.nav a:hover {
  color: #FFFFFF;
  background-color: #000000;
}

.nav .icon 
{
  display: none;
}
.nav a:not(:first-child)
{
display: none;
}
.nav a.icon
{
float: right;
display: block;
}
.nav.responsive
{
	position:relative;
}
.nav.responsive .icon 
{
    position: absolute;
    right: 0;
    top: 0;
  }
 .nav.responsive a
  {
    float: none;
    display: block;
    text-align: left;
  }
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
  margin:5px 0px 0px 5px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:1%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
  
  
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0px solid yellow;
  }
 
/*Rule-17*/
hgroup 
{
  width:100%;
  margin: 5px 0px 0px 2%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 1px #353375; 
  -webkit-border-radius: 5px;
  width:100%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;

   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#DFE1E3;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  width:100%;
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:5px 5px 5px 0px;
  padding :2px 2px 2px 2px;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}	
}
@media (min-width:351px) and (max-width: 430px){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:0%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:1%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:23%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 5px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
	text-align:justify;
}

.nav {
  overflow: hidden;
  background-color: #353366;
}

.nav a {
  float: left;
  display: block;
  color: #000000;
  text-align: left;
  text-decoration: none;
  padding:0px 5px 5px 5px;
  font-size: 17px;
}

.nav a:hover {
  color: #FFFFFF;
  background-color: #000000;
}

.nav .icon 
{
  display: none;
}
.nav a:not(:first-child)
{
display: none;
}
.nav a.icon
{
float: right;
display: block;
}
.nav.responsive
{
	position:relative;
}
.nav.responsive .icon 
{
    position: absolute;
    right: 0;
    top: 0;
  }
 .nav.responsive a
  {
    float: none;
    display: block;
    text-align: left;
  }
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
  margin:5px 0px 0px 5px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:1%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
  
  
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0px solid yellow;
  }
 
/*Rule-17*/
hgroup 
{
  width:100%;
  margin: 5px 0px 0px 2%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 1px #353375; 
  -webkit-border-radius: 5px;
  width:100%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;

   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#DFE1E3;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  width:100%;
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:5px 5px 5px 0px;
  padding :2px 2px 2px 2px;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}		
}
@media (min-width:431px) and (max-width:500px){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:0%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:1%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:10%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 5px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
	text-align:justify;
}

.nav {
  overflow: hidden;
  background-color: #353366;
}

.nav a {
  float: left;
  display: block;
  color: #000000;
  text-align: left;
  text-decoration: none;
  padding:0px 5px 5px 5px;
  font-size: 17px;
}

.nav a:hover {
  color: #FFFFFF;
  background-color: #000000;
}

.nav .icon 
{
  display: none;
}
.nav a:not(:first-child)
{
display: none;
}
.nav a.icon
{
float: right;
display: block;
}
.nav.responsive
{
	position:relative;
}
.nav.responsive .icon 
{
    position: absolute;
    right: 0;
    top: 0;
  }
 .nav.responsive a
  {
    float: none;
    display: block;
    text-align: left;
  }
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
  margin:5px 0px 0px 5px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:1%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
  
  
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0px solid yellow;
  }
 
/*Rule-17*/
hgroup 
{
  width:100%;
  margin: 5px 0px 0px 2%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 1px #353375; 
  -webkit-border-radius: 5px;
  width:95%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#DFE1E3;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  width:98%;
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:5px 5px 5px 0px;
  padding :2px 2px 2px 2px;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}	
}
@media (min-width:501px) and (max-width: 550px){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:0%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:1%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:10%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 5px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
	text-align:justify;
}

.nav {
  overflow: hidden;
  background-color: #353366;
}

.nav a {
  float: left;
  display: block;
  color: #000000;
  text-align: left;
  text-decoration: none;
  padding:0px 5px 5px 5px;
  font-size: 17px;
}

.nav a:hover {
  color: #FFFFFF;
  background-color: #000000;
}

.nav .icon 
{
  display: none;
}
.nav a:not(:first-child)
{
display: none;
}
.nav a.icon
{
float: right;
display: block;
}
.nav.responsive
{
	position:relative;
}
.nav.responsive .icon 
{
    position: absolute;
    right: 0;
    top: 0;
  }
 .nav.responsive a
  {
    float: none;
    display: block;
    text-align: left;
  }
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
  margin:5px 0px 0px 5px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:1%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
  
  
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0px solid yellow;
  }
 
/*Rule-17*/
hgroup 
{
  width:100%;
  margin: 5px 0px 0px 2%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 1px #353375; 
  -webkit-border-radius: 5px;
  width:95%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#DFE1E3;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  width:98%;
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:5px 5px 5px 0px;
  padding :2px 2px 2px 2px;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}	
}
@media (min-width:551px) and (max-width: 700px){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:0%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:1%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:5%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 5px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
	text-align:justify;
}

.nav {
  overflow: hidden;
  background-color: #353366;
}

.nav a {
  float: left;
  display: block;
  color: #000000;
  text-align: left;
  text-decoration: none;
  padding:0px 5px 5px 5px;
  font-size: 17px;
}

.nav a:hover {
  color: #FFFFFF;
  background-color: #000000;
}

.nav .icon 
{
  display: none;
}
.nav a:not(:first-child)
{
display: none;
}
.nav a.icon
{
float: right;
display: block;
}
.nav.responsive
{
	position:relative;
}
.nav.responsive .icon 
{
    position: absolute;
    right: 0;
    top: 0;
  }
 .nav.responsive a
  {
    float: none;
    display: block;
    text-align: left;
  }
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
  margin:5px 0px 0px 5px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:1%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
  
  
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0px solid yellow;
  }
 
/*Rule-17*/
hgroup 
{
  width:100%;
  margin: 5px 0px 0px 2%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 0px #353375; 
  -webkit-border-radius: 0px;
  width:95%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#DFE1E3;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  width:98%;
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:5px 5px 5px 0px;
  padding :2px 2px 2px 2px;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}	
}
@media (min-width:701px) and (max-width: 850px){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:0%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:1%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:4%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 5px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
	text-align:justify;
}

.nav {
  overflow: hidden;
  background-color: #353366;
}

.nav a {
  float: left;
  display: block;
  color: #000000;
  text-align: left;
  text-decoration: none;
  padding:0px 5px 5px 5px;
  font-size: 17px;
}

.nav a:hover {
  color: #FFFFFF;
  background-color: #000000;
}

.nav .icon 
{
  display: none;
}
.nav a:not(:first-child)
{
display: none;
}
.nav a.icon
{
float: right;
display: block;
}
.nav.responsive
{
	position:relative;
}
.nav.responsive .icon 
{
    position: absolute;
    right: 0;
    top: 0;
  }
 .nav.responsive a
  {
    float: none;
    display: block;
    text-align: left;
  }
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
  margin:5px 0px 0px 5px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:1%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
  
  
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0px solid yellow;
  }
 
/*Rule-17*/
hgroup 
{
  width:100%;
  margin: 5px 0px 0px 2%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 0px #353375; 
  -webkit-border-radius: 0px;
  width:95%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#DFE1E3;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  width:98%;
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:5px 5px 5px 0px;
  padding :2px 2px 2px 2px;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}	
}
@media (min-width:851px) and (max-width: 950px){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:0%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:1% 5% 0% 3%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:12%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 0px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
	text-align:justify;
}

.nav 
{
  background-repeat:repeat-x;
  height:70px;
  -webkit-box-shadow: inset 0 0 0px grey; 
  -webkit-border-radius: 0px;
}
.nav ul
{
margin:0px;
margin-left:3%;
}
.nav a 
{
  height:20px;
  padding:20px;
  float: left;
  display: inline;
  color: #888B8F;
  text-decoration: none;
  font-weight:bold;
  font-size: 18px;
}

.nav a:hover,nav a.current{
  color: #FFFFFF;
}
.nav .icon 
{
  display: none;
}
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
  margin:5px 5px 0px 5px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:2%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
  
  
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0px solid yellow;
  }
  .flex-item 
 {
	width:45%;
	margin:2%;
	padding:5px 2px 5px 2px;
	border: 0px solid #BAB4B4;
}
.flex-item p
  {
	  font-size:14px;
  }
 
/*Rule-17*/
hgroup 
{
  width:100%;
  margin: 5px 0px 0px 2%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 0px #353375; 
  -webkit-border-radius: 0px;
  width:95%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#DFE1E3;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  width:98%;
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  width:48%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:1%;
  width:48%;
  padding :2px ;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}	
}
@media (min-width:951px) and (max-width: 992px) {
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:5%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:1% 5% 0% 3%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:12%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 0px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
	text-align:justify;
}

.nav 
{
  background-repeat:repeat-x;
  height:70px;
  -webkit-box-shadow: inset 0 0 0px grey; 
  -webkit-border-radius: 0px;
}
.nav ul
{
margin:0px;
margin-left:3%;
}
.nav a 
{
  height:20px;
  padding:20px;
  float: left;
  display: inline;
  color: #888B8F;
  text-decoration: none;
  font-weight:bold;
  font-size: 18px;
}

.nav a:hover,nav a.current{
  color: #353366;
}
.nav .icon 
{
  display: none;
}
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
  margin:5px 5px 0px 5px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:2%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
  
  
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0px solid yellow;
  }
  .flex-item 
 {
	width:45%;
	margin:2%;
	padding:5px 2px 5px 2px;
	border: 0px solid #BAB4B4;
}
.flex-item p
  {
	  font-size:14px;
  }
 
/*Rule-17*/
hgroup 
{
  width:100%;
  margin: 5px 0px 0px 2%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 0px #353375; 
  -webkit-border-radius: 0px;
  width:95%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#DFE1E3;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  width:98%;
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  width:48%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:1%;
  width:48%;
  padding :2px ;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}	
}
@media (min-width:993px) and (max-width: 1335px){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:5%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
margin:1% 5% 0% 3%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:5%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 0px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
}

.nav 
{
  background-repeat:repeat-x;
  height:70px;
  -webkit-box-shadow: inset 0 0 0px grey; 
  -webkit-border-radius: 0px;
}
.nav ul
{
margin:0px;
margin-left:3%;
}
.nav a 
{
  height:20px;
  padding:20px;
  float: left;
  display: inline;
  color: #888B8F;
  text-decoration: none;
  font-weight:bold;
  font-size: 18px;
}

.nav a:hover,nav a.current{
  color: #353366;
}
.nav .icon 
{
  display: none;
}
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
  margin:5px 5px 0px 5px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:2%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin:0% 5% 0px 5%;
  border: 0px solid yellow;
  }
  .flex-item 
 {
	width:45%;
	margin:2%;
	padding:5px 2px 5px 2px;
	border: 0px solid #BAB4B4;
}
.flex-item p
  {
	  font-size:14px;
  }
 
/*Rule-17*/
hgroup 
{
  width:100%;
  margin: 5px 0px 0px 2%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 0px #353375; 
  -webkit-border-radius: 0px;
  width:95%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#DFE1E3;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  width:48%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:1%;
  width:48%;
  padding :2px ;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}	
}
@media (min-width: 1336px) and (max-width:1590px){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:30%;
 height:30px;
 right:5%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:1% 5% 0% 5%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:5%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 margin:50% 0px 5px 0px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 0px 0px 0px;
 color:#000000;
 font-size:16px;
}
p
{
	text-align:justify;
}

.nav 
{
  background-repeat:repeat-x;
  height:70px;
  -webkit-box-shadow: inset 0 0 0px grey; 
  -webkit-border-radius: 0px;
  margin:0% 5% 0% 5%;
}
.nav ul
{
margin:0px;
margin-left:3%;
}
.nav a 
{
  height:20px;
  padding:20px;
  float: left;
  display: inline;
  color: #888B8F;
  text-decoration: none;
  font-weight:bold;
  font-size: 18px;
}

.nav a:hover,nav a.current{
  color: #353366;
}
.nav .icon 
{
  display: none;
}
header
{
 background-color:#353366;
 height:70px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   margin:0% 5% 0% 5%;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
   margin:0% 5% 0% 5%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:2%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   margin:0% 5% 0% 5%;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin-left:0px;
   margin:0% 5% 0% 5%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  width:100%;
  margin:5px 0px 0px 0px;} 
  
  
article {
  margin:0px 0px 5px 0px;
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin:0% 5% 0px 5%;
  border: 0px solid yellow;
  }
  .flex-item 
 {
	width:31%;
	margin:1%;
	padding:5px 2px 5px 2px;
	border: 0px solid #BAB4B4;
}
.flex-item p
  {
	  font-size:14px;
  }
 
/*Rule-17*/
hgroup 
{
  margin: 5px 5% 0px 5%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
  -webkit-box-shadow: inset 0 0 0px #353375; 
  -webkit-border-radius: 0px;
  width:95%;
  margin:1% 0px 0px 1%;
  padding: 0px 2px 0px 2px;}

/*Rule-20*/
aside h2 {
  background-color:#4A4876;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 2px;
  color: #FFFFFF;}
/*Rule-26*/

/*Rule-29*/
footer {
 clear: both;
  background-color:#0F0F6F;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  float: left;
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:33%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

/**********************************************************
* HOME PAGE
**********************************************************/
/*image reshaping based on device size*/
img {
  width:98%;
  height:auto;
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  width:30%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
   
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:1%;
  width:30%;
  padding :2px ;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 10%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}	
}
@media (min-width: 1591px){
/**********************************************************
* GENERAL STYLE RULES
**********************************************************/

body
{
 background-color: #F2F2F2;
 background-image: url(images/background.png);
 background-repeat: no-repeat;
color:#888B8F;
font-family:Courier New,Times New Roman;
font-size:14px;
font-weight:bold;
line-height:18px;
margin:0px;
}

#headlinks
{
 box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
 display:flex;
 position:absolute;
  background-color: #4A4876;
 top:35%;
 height:30px;
 right:6%;
 padding:5px 10px 10px 10px;
 -webkit-border-radius: 5px;
}

.button
{
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 cursor: pointer;
 font-weight:bold;
 color:#FFFFFF;
 border: 1px  solid #555A78;
 background-color: #555A78;
 padding:10px 10px 10px 10px;
}
.button:hover
{
 color:#555A78;
 background-color: #FFFFFF;
}

#logo
{
 float:left;
 margin:0% 5% 0% 5%;
 position:absolute;
}
#pic
{
 float:left;
 margin:1%;
 padding:1px;
 width:12%;
 position:relative;
}
a
{
 color:#888B8F;
 font-size:16px;
 text-decoration: none;
}
a:hover
{
 color:#FFFFFF;
}

b
{
 padding:30% 0% 30% 0%;
 font-size:20px;
 font-weight:bold;
 color:#000000;
}

h1
{
text-align:center;
font-size:30px;
font-weight: normal;
font-family:impact;
margin-top:10%;
color:#FFFFFF;
}

/*Rule-27*/
h2 {
  font-weight: normal;
  margin:1%;
  padding: 5px;
  -webkit-border-radius: 4px;
  background-color:#0F0F6F;
  text-align:center;
  color: #FFFFFF;
  border-bottom:0px solid grey;
  }
  
  h3
{
  padding: 5px 0px 5px 0px;
  margin: 10px 0px 0px 0px;
 color:#000000;
 font-size:16px;
}

.nav 
{
  background-repeat:repeat-x;
  height:70px;
  -webkit-box-shadow: inset 0 0 0px grey; 
  -webkit-border-radius: 0px;
  margin:0% 5% 0% 15%;
  padding:2% 0% 0% 0%;
}
.nav ul
{
margin:0px;
margin-left:3%;
}
.nav a
{
  height:20px;
  padding:20px;
  float: left;
  display: inline;
  color: #888B8F;
  text-decoration: none;
  font-weight:bold;
  font-size: 18px;
}

.nav a:hover,nav a.current{
  color: #353366;
}
.nav .icon 
{
  display: none;
}
header
{
 background-color:#ffffff;
 height:92px;
 background-repeat:no-repeat;
 position:relative;
}

/*Rule-12*/
section.content {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   margin:0% 5% 0% 5%;
  border-bottom: 0px solid grey;}
  

/*Rule-13*/
section.content p{
  font-size:20px;
  margin:10px 0px 0px 10px;}
  
/*Rule-12*/
section.firstcontent {
  display: -webkit-flex;
  display: flex;
   margin:0% 5% 0% 5%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.firstcontent p{
  font-size:12px;
  width:100%;
  margin:2%;}
  
 /*Rule-12*/
section.secondcontent {
  box-sizing: border-box; /* determine the size of containers*/
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
   margin:0% 5% 0% 5%;
   background-color:#C0C3C5;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.secondcontent p{
  font-size:16px;
  margin:50px 0px 0px 0px;}
  
 
  /*Rule-12*/
section.productcontent {
  display: -webkit-flex;  /*control the flow of containers*/
  display: flex;
  margin:0% 5% 0% 5%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-align-content: center;
    align-content: center;
  border-right: 0px solid grey;}
  

/*Rule-13*/
section.productcontent p{
  font-size:14px;
  margin:0px 0px 0px 0px;} 
  
  
article {
 display: -webkit-flex;
 display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
 margin:0% 15% 0px 5%;
  border: 0px solid yellow;
  }
  .flex-item 
 {
	width:28.5%;
	margin:1%;
	padding:5px 2px 5px 2px;
	border: 0px solid #BAB4B4;
}
.flex-item p
  {
	  font-size:14px;
  }
 
/*Rule-17*/
hgroup 
{
  margin: 5px 5% 0px 4%;
  }
/*Rule-18*/
figure {
  float:left;
  height:auto;
  padding: 0px;
  border: 0px solid #eeeeee;	
  }
  /*Rule-19*/
aside {
 position:absolute;
 top:21%;
 right:5%;
 margin: 1%;
 width: 15%;
 border: 0px solid #eeeeee;}

/*Rule-20*/
aside h2 {
  background-color:#1D5377;
  margin-left: 0px;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;
  padding: 5px 5px 5px 10px;
  color: #FFFFFF;}
/*Rule-29*/
footer {
 clear: both;
  background-color:#0F0F6F;
  }

/*Rule-30*/
footer a
  {
  color: #888B8F;
  font-size:14px;
  font-weight:bold;
  }

/*Rule-31*/
footer a:hover
  {
  color: #FFFFFF;
  }

/*Rule-32*/
footer #copyright{
  font-size:12px;
  font-weight:bold;
  }
  
  figure.footerlinks{
  position:relative;
  margin:0%;
  width:20%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}

img {
  margin:2%;
  width:96%;
  
}

/**********************************************************
* SERVICES PAGE
**********************************************************/

/*Rule-41*/
aside section.services a {
  display: block;
  padding: 5px;
  border-bottom: 1px solid grey;}

/*Rule-42*/
aside section.services a:hover {
  color:#FFFFFF;
  background-color:#4A4876;
  }

 figure.mainDescription {
  position:relative;
  margin:2%;
  height:auto;}
   
  
 figure.productInfo {
  position:relative;
  margin:1%;
  width:30%;
  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
  
  figure.productInfo p {
    box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;  
  }
  figure.Services {
  position:relative;
  width:33%;
  margin:10px 5px 0px 0px;
  padding :10px 5px 40px 5px;
   max-height:auto;
   -webkit-box-shadow: inset 0 0 1px #0F0F6F;
  -webkit-border-radius: 5px;}
  
  figure.Services h2
  {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:0px 0px 5px 0px;
  padding:5px 5px 5px 20%;
   height:auto;
  width:100%;
  color:#FFFFFF;
  background-color:#4A4876;
 -webkit-box-shadow: inset 0 0 0px #0F0F6F; 
  -webkit-border-radius: 5px;  
  }
   figure.Services ol
   {
	margin:10px 0px 15px 0px;
   } 
  
  section.forum {
  box-sizing: border-box; /* determine the size of containers*/
  display:-webkit-flex;  /*control the flow of containers*/
  display:flex;
  margin:1%;
  width:30%;
  padding :2px ;
  border:1px solid #DADADA;
  background-color:#FFFFFF;
  }
  
  section.forum h2
  {
   color:#595E7B;
   text-align: center;
   font-family:Impact;
   font-size:20px;
   line-height:20px;
   border-bottom:0px solid #FFFFFF;
  } 

/*Rule-46*/
section.forum #item {
box-sizing: border-box; /* determine the size of containers*/
background-color:#FFFFFF;}

/*Rule-47*/
section.forum #item a{
  padding :5px 5px 5px 5px;
  text-decoration:none; 
  display: block;
   }

/*Rule-48*/
section.forum #item a:hover{
color: transparent;
position:center;
 background:url(images/categoryView.png) 0 0 no-repeat;
  }

 
  
/**********************************************************
* CONTACT FORM
**********************************************************/
figure.small {
  float: left;
  width: 410px;
  height: 260px;
  padding:5px 5px 5px 5px;
  margin: 5px 5px 5px 0px;
  border: 0px solid #eeeeee;}

/**********************************************************
* STYLE SIGN IN FORM
**********************************************************/

/*Rule-67*/
section.signin {
  margin: 10px 10px 10px 1%; 
  padding: 10px; 
  -webkit-box-shadow: inset 0 0 2px #0F0F6F;
  -webkit-border-radius: 5px;} 

/*Rule-68*/
section.signin form{
  width: 250px; 
  padding: 0px 5px 0px 5px;}

/*Rule-69*/
section.signin h2{
  color:#888B8F;
  }

/*Rule-70*/
section.signin a{
  margin-right: 0px; 
  background-color: #4A4876;
  display: inline; 
  -webkit-border-radius: 5px;
  padding: 0px 5px 0px 10px;}


/**********************************************************
* PHP TABLES
**********************************************************/
/*Rule-62*/
#contact{
  border:0px solid grey;
  margin-left:0px;
  border-collapse:collapse; 
  padding: 0 5px 5px 5px;
  }

/*Rule-63*/
#contact td{
  padding: 5px 5px 5px 5px;}

/*Rule-36*/
#sub{ text-align:center;}

/*Rule-21*/
table{
  border:0px solid #eeeeee;
  border-collapse:collapse; 
  margin: 5px 5px 5px 0px;
  padding: 5px 5px 5px 5px;}

/*Rule-22*/
td{
  padding: 5px 5px 5px 5px;}
/*Rule-66*/
h4 {
  margin: 0px 0px 5px 10px;
  color: grey;}

/*Rule-71 (Centralize elements e.g. h2)*/
.center{
   text-align:center;}

/*Rule-72A*/
#right_button{
   padding: 0px 5px 0px 0px;}

/*Rule-72B*/
#left_button{
   float:left;
   padding: 0px 0px 0px 10px;}

/**********************************************************
* STYLE ORDER TABLE IN ADMIN MODULE
**********************************************************/
/*Rule-73*/
.right {
   padding: 5px 5px 5px 0px;
   text-align: right;}

/*Rule-74*/
.left {
   padding: 5px 5px 5px 5px;
   text-align: left;}

/*Rule-75*/
 .head
   {
	background-color: #1D5377; 
   color:#FFFFFF;   
   }

/*Rule-76*/
tr.head th:first-child {
   -webkit-border-radius-topleft: 5px;
   }

/*Rule-77*/
tr.head th:last-child {
   -webkit-border-radius-topright: 5px;}

/*Rule-78*/
#total {
   background-color: #C0C3C5; 
   color:#ED3237;}

/**********************************************************
* STYLE PRODUCTS PAGE
**********************************************************/
/*Rule-79*/
#product_title {
	padding:5px 5px 5px 5px;
    background-color:#4A4876; 
  -webkit-border-radius: 5px;}
#product_title a{
   color:#888B8F;}
#product_title a:hover{
   color:#FFFFFF;}	
}