@charset "utf-8";
/* CSS Document */

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #fff;
	
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ Element/tag selectors ~~ */


p{
	color:#666;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	margin:0;
	}
	
	
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color:#414958;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;
	max-width: 1024px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 500px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */

	
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
  
	background-image:url(img/back_grey.png);
	background-repeat:repeat-y;


}


.header {
	

	/*background-size:100% 100%;*/
	
}


img {
    max-width: 100%;
    height: auto;
}

#navcontainer { 

  padding-top:20px;

}

#navlist
{
	
	
    margin-top: 0%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 1px;
	padding-left: 0px;
	width: 100%;

}

#navlist li
{

    list-style: none;
	float: left;
	margin-right: auto;
	margin-top: 0px;
	margin-left: auto;
    vertical-align:middle;


}


#li1
{
    
	width: 46%;
	text-align:left;
	padding-left:30px;
}

#li2
{
    padding-top:40px;
	padding-right:40px;
    text-align:right;
	width: 47%
	
}





#navlist:after {
    content: '';
   display: inline-block;
    width: 100%;
}


#navlist li a
{
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bolder;
text-decoration:none;
transition: all 0.3s linear;	
}

#navlist li a:hover
{
color:#D89A24;
}



/* ~~ This is the layout information. ~~ 


*/



.content {
	margin: 0 auto;
	background-color:#fff;
	text-align:center;
}



/* ~~ The footer ~~ */
.footer {
	padding-top:10px;
	padding-bottom:10px;
	background: #333;
	text-align:center;	
	color:#FFF44E;
	font-size:12px;

	
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/**************/

/**************/


/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
	  
	  	  
	  #navlist
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;

}



#navlist li
{

float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;
	text-align:center;

}

	  
  
	  

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	  
	 	  #navlist
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;

}



#navlist li
{

float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;
	text-align:center;

}

	  
 
	  
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

	  #navlist
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;

}



#navlist li
{

float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;
	text-align:center;
	

}

	  

	  


}


/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
  
  
  	  #navlist
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;

}



#navlist li
{

float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;
	text-align:center;

}

	  
  
	  

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
  
  	  #navlist
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;

}



#navlist li
{

float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;
	text-align:center;
	
	
	

}

	  

	  
	  

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
  
  	  #navlist
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;

}



#navlist li
{

float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;

	text-align:center;

}

	  
 
	  

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
  
  	  #navlist
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;

}



#navlist li
{

float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;

	text-align:center;

}

	  
	  
	  

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

	  #navlist
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;

}



#navlist li
{

float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;

	text-align:center;

}

	  
  
	  
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  	  #navlist
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;

}



#navlist li
{

float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;
	
	text-align:center;

}

	  
  
	  

}



@media (max-width: 1024px) {


#navlist
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;


}



#navlist li
{

    float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;
	text-align:center;

}


	
}