
/* >320 */  /***************************************************/
/* >320 */  /***************************************************/
/* >320 */  /*****                                         *****/
/* >320 */  /*****  rules for screen sizes larger than     *****/
/* >320 */  /*****  320px : smartphones                    *****/
/* >320 */  /*****                                         *****/
/* >320 */  /***************************************************/
/* >320 */  /***************************************************/
/* >320 */



/* >320 */   /* ************************** */
/* >320 */   /*             body           */
/* >320 */   /* ************************** */
/* >320 */
/* >320 */body {
/* >320 */	font-size: 0.9em;
/* >320 */	color: #040404;
/* >320 */	font-family: Verdana, Arial, Helvetica, sans-serif;
/* >320 */	background-color: #ffffff;
/* >320 */}
/* >320 */
/* >320 */  .clearline {
/* >320 */		clear: both;
/* >320 */		padding: 0;
/* >320 */		margin: 0;
/* >320 */	}
/* >320 */
/* >320 */
/* >320 */
/* >320 */
/* >320 */	#wrapper {
/* >320 */        background-color: #f5fffa;
/* >320 */        width: 100%;
/* >320 */        position: relative;  /* needed to define the position for some browsers  */
/* >320 */        margin: 0 auto 0 auto;   /*   set wrapper left and right margins to auto to centre the content   */
/* >320 */	}
/* >320 */
/* >320 */
/* >320 */   /* *************** */
/* >320 */   /*     header      */
/* >320 */   /* *************** */
/* >320 */
/* >320 */	header {
/* >320 */        float: left;
/* >320 */        width: 60%;
/* >320 */        background-color: cream;  /*green;  */
/* >320 */        font-family: Arial, Helvetica, sans-serif;
/* >320 */        font-style: normal;
/* >320 */        font-size: 1em;
/* >320 */        padding: 0;
/* >320 */        margin: 0;
/* >320 */        color: #fc0;
/* >320 */	}
/* >320 */
/* >320 */   header img.logo {
/* >320 */      width: 95%;
/* >320 */      height: 15%;
/* >320 */      padding-left: 1%;
/* >320 */   }
/* >320 */
/* >320 */
/* >320 */   /* *************** */
/* >320 */   /*     navbar      */
/* >320 */   /* *************** */
/* >320 */
/* >320 */   nav {
/* >320 */     padding: 0;
/* >320 */     margin: 0;
/* >320 */   }
/* >320 */
/* >320 */   nav ul {
/* >320 */     list-style-type: none;
/* >320 */     margin: 0;
/* >320 */     padding: 0;
/* >320 */     background-color: #090;
/* >320 */     border: 1px solid #555;
/* >320 */   }
/* >320 */
/* >320 */   nav ul li {
/* >320 */     text-align: center;
/* >320 */     border-bottom: 1px solid #555;
/* >320 */     padding: 1% 0;
/* >320 */   }
/* >320 */
/* >320 */   nav ul li:last-child {
/* >320 */     border-bottom: none;
/* >320 */   }
/* >320 */
/* >320 */   nav ul li a {
/* >320 */     display: block;
/* >320 */     color: white;
/* >320 */     text-decoration: none;
/* >320 */   }

/* >320 */   nav ul li a:hover {
/* >320 */     color: blue;
/* >320 */     text-decoration: underline;
/* >320 */   }
/* >320 */
/* >320 */   .more ul {display: none;}
/* >320 */   .more a:hover {background: #006400;}
/* >320 */   .more:hover ul {display: block; position: absolute; width: auto;}
/* >320 */   .more:hover ul li {float: none; margin-bottom: 3px;}
/* >320 */   .more:hover ul li a:hover {background: #006400;}
/* >320 */
/* >320 */
/* >320 */
/* >320 */
/* >320 */   /* ************************** */
/* >320 */   /*        breadcrumbs         */
/* >320 */   /* ************************** */
/* >320 */   #breadcrumbs {
/* >320 */      display: none;
/* >320 */}
/* >320 */
/* >320 */   #breadcrumbs ul li a {
/* >320 */	display: none;
/* >320 */}
/* >320 */
/* >320 */
/* >320 */
/* >320 */   /* ************************** */
/* >320 */   /*      index-content         */
/* >320 */   /* ************************** */
/* >320 */
/* >320 */
/* >320 */   h1, h2, h3, h4, h5, h6 {
/* >320 */	font-family: Verdana, Arial, Helvetica, sans-serif;
/* >320 */	color:#5d880f;
/* >320 */	font-weight: bold;
/* >320 */   }
/* >320 */
/* >320 */   h1 {
/* >320 */	font-size: 1.3em;
/* >320 */   }
/* >320 */
/* >320 */   h2, h3, h4, h5, h6 {
/* >320 */	font-size: 1.2em;
/* >320 */   }
/* >320 */
/* >320 */   .indexstrap {
/* >320 */	text-align: center;
/* >320 */	font-size: 1em;
/* >320 */      font-weight: bolder;
/* >320 */   }
/* >320 */
/* >320 */   a {
/* >320 */	color: #5d880f;
/* >320 */      text-decoration: none;
/* >320 */   }
/* >320 */
/* >320 */   a:hover {
/* >320 */	color: #5d880f;
/* >320 */	text-decoration: none;
/* >320 */   }
/* >320 */
/* >320 */  .boxseparator {
/* >320 */        margin: 0;
/* >320 */        padding: 0;
/* >320 */        clear: both;
/* >320 */    }
/* >320 */
/* >320 */  .box {
/* >320 */      margin: 3% 0;
/* >320 */      padding: 1% 2%;
/* >320 */  	background: #d2fbad;
/* >320 */    }
/* >320 */
/* >320 */  .boxheader {
/* >320 */      margin-bottom: 0;
/* >320 */    }
/* >320 */
/* >320 */  .boxparagraph {
/* >320 */      margin-top: 0;
/* >320 */      margin-bottom: 0;
/* >320 */      font-size: 1.1em;
/* >320 */    }
/* >320 */
/* >320 */  .noimgscreen {
/* >320 */        display: none;
/* >320 */    }
/* >320 */
/* >320 */  .boximage {
/* >320 */  	   display: none;
/* >320 */    }
/* >320 */
/* >320 */   .testimonial {
/* >320 */      line-height: 1.5em;
/* >320 */      padding: 1%;
/* >320 */      background: #408000;
/* >320 */   }
/* >320 */
/* >320 */
/* >320 */     /* **************** */
/* >320 */     /*     footer       */
/* >320 */     /* **************** */
/* >320 */
/* >320 */  footer {
/* >320 */             clear: both;
/* >320 */             width: 97.2222222%;
/* >320 */             padding: 0;
/* >320 */             margin: 0 auto;
/* >320 */             border-top: 1px solid #95c25d;
/* >320 */             text-align: center;
/* >320 */             font-size: 0.7em;
/* >320 */             line-height: 1em;
/* >320 */             color: #333;
/* >320 */  }
/* >320 */
/* >320 */  #footerbar1 {
/* >320 */  	font-size: 1.2em;
/* >320 */      line-height: 1.5em;
/* >320 */  	padding: 8px 0 2px 0;
/* >320 */
/* >320 */  }
/* >320 */
/* >320 */
/* >320 */  #footerbar1 a.fl {
/* >320 */  	text-decoration: none;
/* >320 */  	color: #000;
/* >320 */  }
/* >320 */
/* >320 */  #footerbar2 {
/* >320 */    text-align: center;
/* >320 */    font-size: 1.1em;
/* >320 */    margin-right: 5px;
/* >320 */    margin-bottom: 5px;
/* >320 */  }
/* >320 */
/* >320 */  #footerbar2 ul {
/* >320 */    list-style: none;
/* >320 */    margin: 0;
/* >320 */    padding: 0;
/* >320 */   }
/* >320 */
/* >320 */   #footerbar2 ul li {
/* >320 */    display: inline-block;
/* >320 */    vertical-align: middle;
/* >320 */    margin-right: 2%;
/* >320 */   }
/* >320 */
/* >320 */   #footerbar2 img {
/* >320 */      margin-right: 1%;
/* >320 */      padding-right: 0;
/* >320 */    }
/* >320 */



/***************************************************/
/***************************************************/
/*****                                         *****/
/*****  rules for screen sizes larger than     *****/
/*****  480px : tablet                         *****/
/*****                                         *****/
/***************************************************/
/***************************************************/

/* >480 */	@media screen and (min-width: 480px) {
/* >480 */
/* >480 */
/* >480 */
/* >480 */
/* >480 */	/* ***************
/* >480 */	/*     wrapper
/* >480 */	/* ***************
/* >480 */
/* >480 */	#wrapper {
/* >480 */		 width: 450px;
/* >480 */	}
/* >480 */
/* >480 */
/* >480 */
/* >480 */	/*  ***************
/* >480 */	/*  ***************
/* >480 */	/*     navbar
/* >480 */	/*  ***************
/* >480 */	/*  ***************
/* >480 */
/* >480 */	nav {
/* >480 */        float: left;
/* >480 */        width: 100%;
/* >480 */        background: green;
/* >480 */        background: linear-gradient(green, #0c0);
/* >480 */        font-family: Arial, Helvetica, sans-serif;
/* >480 */        font-weight: bold;
/* >480 */        font-size: 1em;
/* >480 */        color: #333;
/* >480 */        padding: 0;
/* >480 */        margin: 0;
/* >480 */	}
/* >480 */
/* >480 */	nav ul {
/* >480 */        border: none;
/* >480 */	}
/* >480 */
/* >480 */	nav ul li {
/* >480 */           float: left;
/* >480 */           border: none;
/* >480 */           padding: 0.75% 3% 0.7% 2%;
/* >480 */	}
/* >480 */
/* >480 */ }    /*   end of screen width between 480 and 768   */
/* >480 */
/* >480 */
/* >480 */
/* >480 */

/* >768 */   /***************************************************/
/* >768 */   /***************************************************/
/* >768 */   /*****                                         *****/
/* >768 */   /*****  rules for screen sizes larger than     *****/
/* >768 */   /*****  768px : netbook                        *****/
/* >768 */   /*****                                         *****/
/* >768 */   /***************************************************/
/* >768 */   /***************************************************/
/* >768 */
/* >768 */   @media screen and (min-width: 768px) {
/* >768 */
/* >768 */
/* >768 */   /*
/* >768 */   /* ***************
/* >768 */   /*     wrapper
/* >768 */   /****************
/* >768 */   /****************  */
/* >768 */   #wrapper {
/* >768 */      width: 700px;
/* >768 */      background-color: #d6f5cb;
/* >768 */   }
/* >768 */
/* >768 */   #wrapper h1 {
/* >768 */	padding: 0 2%;
/* >768 */	margin: 0;
/* >768 */	color: #ffc300;
/* >768 */   }
/* >768 */
/* >768 */
/* >768 */   header a {
/* >768 */     padding: 0;
/* >768 */     margin: 0;
/* >768 */   }
/* >768 */
/* >768 */   header a img {
/* >768 */     padding: 0;
/* >768 */     margin: 0;
/* >768 */   }
/* >768 */
/* >768 */
/* >768 */   /*  ***************
/* >768 */   /*    breadcrumbs
/* >768 */   /*   ***************  */
/* >768 */
/* >768 */  #breadcrumbs {
/* >768 */	display: inline;
/* >768 */	float: left;
/* >768 */  	width: 75%;
/* >768 */  	color: #fff;
/* >768 */  	margin: 0;
/* >768 */  	margin-top: 0.5%;
/* >768 */  	margin-bottom: 0.7%;
/* >768 */  	padding: 0;
/* >768 */  }
/* >768 */  
/* >768 */
/* >768 */   #breadcrumbs ul {
/* >768 */	padding: 0;
/* >768 */	margin: 0;
/* >768 */   }
/* >768 */
/* >768 */  #breadcrumbs ul li {
/* >768 */	float: left;
/* >768 */	list-style-type: none;
/* >768 */      text-align: left;
/* >768 */      background: #0b5345;
/* >768 */      color: #fff;
/* >768 */      border: none;
/* >768 */      padding: 0;
/* >768 */      margin-right: 2%;
/* >768 */  }
/* >768 */
/* >768 */   #breadcrumbs ul li a {
/* >768 */	display: block;
/* >768 */      color: white;
/* >768 */      text-decoration: none;
/* >768 */   }
/* >768 */
/* >768 */   nav ul li a:hover {
/* >768 */      color: blue;
/* >768 */      text-decoration: underline;
/* >768 */   }
/* >768 */
/* >768 */
/* >768 */
/* >768 */   /******************
/* >768 */   /******************
/* >768 */   /*   index content
/* >768 */   /******************
/* >768 */   /******************/
/* >768 */
/* >768 */   .box {
/* >768 */      float: left;
/* >768 */      height: 140px;
/* >768 */      width: 44%;
/* >768 */      margin: 0 1% 2% 1.5%;
/* >768 */      padding: 0 1% 1.5% 2%;
/* >768 */      overflow: auto;
/* >768 */   }
/* >768 */
/* >768 */   .box p {
/* >768 */      line-height: 1.1em;
/* >768 */      font-size: 1em;
/* >768 */   }
/* >768 */
/* >768 */   .boxparagraph {
/* >768 */	padding-top: 1%;
/* >768 */   }
/* >768 */
/* >768 */
/* >768 */  .boxblue {
/* >768 */      background: #5c6afa;
/* >768 */    }
/* >768 */
/* >768 */  .boxblue h2 {
/* >768 */    	color: #D5E8E3;
/* >768 */    }
/* >768 */
/* >768 */  .boxblue p, .boxblue ul, .boxblue a {
/* >768 */      	color: lightgreen;
/* >768 */    }
/* >768 */
/* >768 */  .boxdarkgreen {
/* >768 */        background: #8ad1a9;
/* >768 */    }
/* >768 */
/* >768 */  .boxdarkgreen h2 {
/* >768 */    	color: #2D28C7;
/* >768 */    }
/* >768 */
/* >768 */  .boxdarkgreen p, .boxdarkgreen ul, .boxdarkgreen a {
/* >768 */    	color: blue;
/* >768 */    }
/* >768 */
/* >768 */   .boxlightgreen {
/* >768 */       background: greenyellow;
/* >768 */   }
/* >768 */
/* >768 */   .boxlightgreen h2 {
/* >768 */       color: maroon;
/* >768 */   }
/* >768 */
/* >768 */   .boxlightgreen p, .boxlightgreen ul, .boxlightgreen a {
/* >768 */       color: darkblue;
/* >768 */   }
/* >768 */
/* >768 */
/* >768 */
/* >768 */
/* >768 */
/* >768 */
/* >768 */
/* >768 */
/* >768 */   .boxred {
/* >768 */       background: #bc0b23;
/* >768 */   }
/* >768 */
/* >768 */   .boxred h2 {
/* >768 */   	color: #1a0f92;
/* >768 */   }
/* >768 */
/* >768 */   .boxred p, .boxred ul {
/* >768 */ 	color: darkseagreen;
/* >768 */   }
/* >768 */
/* >768 */   .boxpurple {
/* >768 */       background: #e0c1e3;
/* >768 */   }
/* >768 */
/* >768 */   .boxpurple h2 {
/* >768 */       color: #2D28C7;
/* >768 */   }
/* >768 */
/* >768 */   .boxpurple p, .boxpurple ul, .boxpurple a {
/* >768 */       color: darkblue;
/* >768 */   }
/* >768 */
/* >768 */   .boxyellow {
/* >768 */       background: #EBE991;
/* >768 */   }
/* >768 */
/* >768 */   .boxyellow h2 {
/* >768 */       color: darkblue;
/* >768 */   }
/* >768 */
/* >768 */   .boxyellow p, .boxyellow ul, .boxyellow a {
/* >768 */       color: darkblue;
/* >768 */   }


.moreinfobox {
    background: darkcyan;
    height: 180px;
    width: 96%;
    margin: 0 1% 5% 1%;
    padding: 10% 3% 10% 3%;
    overflow: auto;
}
.moreinfobox h2 {
    color: blue;
}
.moreinfobox a {
    color: firebrick;
}


/*
*****************
 general content
*****************
*/

#general-content {
	margin: 0;
	padding: 0 2%;
}

#general-content h1 {
	font-size: 1.6em;
	font-weight: 900;
	color: #08088a;
	padding: 0;
}

#general-content h2 {
	font-size: 1.2em;
	font-weight: bold;
	color: #08088a;
	padding-bottom: 0.1%;
}

#general-content h3 {
	font-size: 1em;
	font-weight: bold;
	color: #08088a;
}

#general-content p {
	font-size: 1em;
	color: black;
	padding-bottom: 1%;
	padding-top: 0;
}

#general-content a {
	text-decoration: underline;
	color: #75657A;
}

#general-content-left {
    float: left;
    width: 60%;
}

#general-content-right {
    float: right;
    width: 38%;
}

#right-bar {
    clear: right;
    float: right;
    width: 28%;
    padding: 1%;
    background-color: #c4e5ac;
    margin-top: 1%;
}

#right-bar h2 {
    text-align: center;
}



.imgfloatright {
                float: right;
                padding-left: 1%;
               }
.imgfloatrightclear {
		float: right;
		clear: right;
		padding-top: 2%;
		padding-left: 1%;
}
.imgfloatleft {
                float: left;
               }
.imgfloatleftclear {
		float: left;
		clear: left;
		padding-top: 2%;
}

.imgcentral {
             margin: auto;
             width: 99%;
}

.noimgscreen {
              display: block;
}






}   /*   end of min screen 768    */


/***************************************************/
/***************************************************/
/*****                                         *****/
/*****  rules for screen sizes larger than     *****/
/*****  960px : desktop, laptop                *****/
/*****                                         *****/
/***************************************************/
/***************************************************/

@media screen and (min-width: 960px) {

#wrapper {
          width: 900px;
}

.box {
	height: 220px;
}

.box ul {
  margin-left: 40%;
}


.boxheader {
	font-size: 1.5em;
	text-align: center;
}

.boxparagraph {
	padding-top: 1%;
}

.boximage {
	display: block;
	margin: 0;
	padding: 2% 2%;
	width: 40%;
}


.moreinfobox {
    height: 120px;
    padding: 10% 3% 10% 3%;
    overflow: auto;
}


}    /*   end of min screen 960   */





/* >1024 */   /***************************************************/
/* >1024 */   /***************************************************/
/* >1024 */   /*****                                         *****/
/* >1024 */   /*****  rules for screen sizes larger than     *****/
/* >1024 */   /*****  1024px : desktop, laptop                *****/
/* >1024 */   /*****                                         *****/
/* >1024 */   /***************************************************/
/* >1024 */   /***************************************************/
/* >1024 */   @media screen and (min-width: 1200px) {
/* >1024 */
/* >1024 */
/* >1024 */   /* ***************  */
/* >1024 */   /*     wrapper      */
/* >1024 */   /* ***************  */
/* >1024 */   #wrapper {
/* >1024 */             width: 1200px;
/* >1024 */            }
/* >1024 */
/* >1024 */
/* >1024 */
/* >1024 */   /* ***************  */
/* >1024 */   /*      header      */
/* >1024 */   /* ***************  */
/* >1024 */
/* >1024 */
/* >1024 */
/* >1024 */   /* **************************  */
/* >1024 */   /*      content - article      */
/* >1024 */   /* **************************  */
/* >1024 */    article {
/* >1024 */             width: 70%;
/* >1024 */            }
/* >1024 */
/* >1024 */
/* >1024 */   /* ************************  */
/* >1024 */   /*      content - aside      */
/* >1024 */   /* ************************  */
/* >1024 */
/* >1024 */   aside {
/* >1024 */           width: 18%;
/* >1024 */         }
/* >1024 */
/* >1024 */
/* >1024 */   }   /*  end screen width 1200  */
/* >1024 */
/* >1024 */
/* >1024 */
