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


/* --------------------------
base styles 
-------------------------- */  
body{ margin:0px;  padding: 0; color: #000; background: #fff; font: 1em/1.2 verdana, helvetica, arial, sans-serif;}

h1 {margin: 0 0 0 0; font-size: 1.5em; font-weight: 500; }
h2,h3 {margin: 0 0 0 0; font-size: 1.3em; font-weight:bold; font-size:150%;}
p { word-wrap: break-word; padding: 10px; }
a { text-decoration:none;}
.spacer-50 {height: 50px;width: 100%; clear: both;}
.spacer-25 {height: 25px; width: 100%; clear: both;}
.spacer-15 {height: 15px; width: 100%; clear: both;}
.spacer-5 {height: 5px; width: 100%; clear: both;}
.sectionname{width:100%; background-color:#F9FBFA; height:150px;}
.sectiontitle{margin-left: 10%; padding-top:60px;}
.center-block{display:block;margin-right:auto;margin-left:auto}
.text-centre{ text-align:center;}
.text-centre-font-200{ text-align:center;font-size:200%;}
 /****---header start---***/
header{ position:fixed; width:100%; height:52px; background-color:#F9FBFA; border-bottom:thick #333333}
.container{ width:70%; margin-left:auto; margin-right:auto; margin-top:10px;}
.containerfluid{ width:100%;}
div#logo {   float: left; text-decoration:none; font-family:impact; color:#000000; font-size: 150%;}
div#navmenu ul{  float: right;  margin: 0;padding: 0;list-style-type: none;}
#navmenu ul li { display: inline; }


#navmenu a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; }
#navmenu a:hover { color: #000; }
/****---header end---***/

/*======header start=====***/
header{ width:100%; height:65px; position:fixed; background-color:#F9FBFA; top: 0; z-index: 999;}
.container{ width:70%; margin-left:auto; margin-right:auto;}
div#logo {   float: left; font-family:Impact, Verdana, Arial, Helvetica, sans-serif}
nav ul{  float: right;  margin: 0;padding: 0;}

 .toggle, [id^=drop] {
 display: none;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #F9FBFA ;
}

nav ul li a {
  display: block;
  padding: 17px 15px 16px;
  color: #000;
  text-decoration: none;
}

nav ul li ul li:hover { background: #edf3f0; }

nav a:hover { background-color:#F9FBFA/* #edf3f0*/; color: #000;}

nav ul ul {
  display: none;
  position: absolute;
  top: 52px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 190px;
  float: none;
  display: list-item;
  position: relative;
  background-color: #62905A ;
  color: #fff;
}
nav ul ul li a{color: #fff; padding:10px;}

nav ul ul ul li {
  position: relative;
  top: -52px;
  left: 190px;

}
.clearfix{clear: both;}

/********header end *****************/







   
footer { position: relative; margin-bottom:0; text-align:center;  height: 100%; background-color:#494949; width: 100%; color:#FFFFFF; }  
#footerlinks{ color:#FFFFFF; text-align:left;} 
img { -webkit-background-size: inherit; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.img-responsive-center {  display: block; max-width: 100%; height: auto; margin-right:auto; margin-left:auto}
.responsiveimg {width: 100%; height: auto;}    
 /*  Single Row Content   ============================================================================= */
    .wrap {width: 70%; padding: 20px; margin-left: auto; margin-right: auto; text-align: overflow: hidden; }
	.titlewrap{ position:relative; width: 70%;padding: 20px; width: 100%; background-color:#F9FBFA;}
/*********DEBUG**********************************/
img:not([alt]),img[alt=""] {outline: 5px solid red;}	

    @media screen and (max-width: 380px) {.wrap {width: 100%;}}


    /*  2 columns Content   ============================================================================= */

.col2 { width: 50%; float: left;  }

    
  @media screen and (max-width: 380px) {.col2a .col2b  {width: 100%;}}
  
   /*  3 columns Content   ============================================================================= */
.col3 {width: 33%; float: left;}    

    
     /* 4 columns Content   ============================================================================= */
	 
.col4 {width: 25%; float: left;} 

@media all and (max-width : 768px) {
.wrap { margin-top: 30px;}
.responsiveimg {width: 100%; height: auto;}
nav{-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);}
nav ,nav ul{ margin: 0; width: 100%;}
.toggle + a,
.menu { display: none; }
.toggle {
  display: block;  
  padding: 10px;  
  text-decoration: none;
  border: none;
}
.toggle-menu {
  	background: #62905A url('../images/menu-toggle-icon.png') 0 no-repeat;    
    display: inline-block;
    float: right;    
    height: 45px;
    width: 50px; 
    padding: 0; 
    margin: 3px;
}
.toggle:hover { background-color: #fff; }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}
	 
/*nav ul ul .toggle,*/
nav ul ul a, nav ul li a { padding:10px; }
nav ul ul ul a { padding: 10px 30px; }
nav a:hover,nav ul ul ul a { background-color: #62905A; }
nav ul li ul li .toggle, nav ul ul a { background-color: #62905A; }
nav ul ul {  float: none;  position: static;  color: #ffffff;}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }
nav ul li ul li:hover { background: #d6dfd5 /*#5B7157*/; }
nav a:hover { background-color: #d6dfd5 /*#5B7157*/; }
nav ul ul li {  display: block;  width: 100%;}
nav ul ul ul li { position: static;}
}
@media all and (max-width : 330px) {
	nav ul li {  display: block; width: 100%;}
	.container {width:98%;}
}

/*======header end======*/

	 
@media screen and (max-width: 1800px) {}   
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 960px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 600px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 320px) {}
.wrap{overflow: hidden; width: 90%; text-align:justify; margin-top: 80px; }
@media (max-width:700px){
.wrap{overflow: hidden; width: 90%; text-align:justify; }
.col2{overflow: hidden; width: 100%; text-align:justify; }
.col3{overflow: hidden; width: 100%; text-align:justify; }
.col4{overflow: hidden; width: 100%; text-align:justify; }
p{margin-top: 1px; margin-bottom:1px;}
footer{ height:auto;}
header{ width:100%; height:auto;}
}


/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 
 .wrap {overflow: hidden;
		margin: 0 5% 1em 5%;  }
}




/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}