html, body
{	padding: 0;	margin: 0;}

body
{	background: #B5DFDF; 
font-family: 'Open Sans', sans-serif;
	position: relative;
	-webkit-text-size-adjust: none; margin: 0;}
	
body *{	text-shadow: none;}

p{font-size: 1em; margin: 0; padding:0px 10% 0px 5%; font-weight: normal; color: #3E8F8F;  line-height: 1.8em; }
h1, h2, h3, h4
{
	line-height: 1;
	margin: 20px 0 10px 0;}

h1{	font-size: 2.3em; padding: 0px 5%; color: #67AAAB; opacity: .9; font-family: 'Raleway', sans-serif; font-weight: 400;}

h2{font-size: 1.4em;   color: #3E8F8F; padding: 0 5%; font-weight: 400; line-height: 1.4em; }

h3{	font-size: 1.2em; line-height: 1.6em; padding: 0 23px 8px 5%; font-weight: 400; color: #3E8F8F; }


h4, h5
{	font-size: .9em;  padding: 0px 20px 0 20px; color: #777; font-weight: 100;}


.blockquote {border-left: 15px solid #eee; margin: 0 20px 0 20px; padding: 20px 0 0 20px; font-size: 1.2em; color: #444; letter-spacing: .05em;  }
.crash {font-size: .5em; letter-spacing: -.1em;}

.red {color: #f00;}
.sml{font-size:.6em; color: #f00; letter-spacing: .3em;  padding: 3px 8px; opacity: .7; }
.sml2{font-size:.7em; color: #555;   padding: 3px 8px; }
.flower {margin:10% 0 0 80%;}

.socmed { padding: 0px 0 0 23px; }

.first {margin: 0 28px 0 0;}
.surname {margin: 0 40px 0 0;}
.email {margin: 0 66px 0 0;}
.phone {margin: 0 60px 0 0;}

.news2 {background: #ccf; font-size: 1.4em; padding: 0 2px; color: #234B4B;}

table {margin: 0 0 0 5%; background: #C5E0E0;  }


.opps {width: 100%; height: auto; float: left; background: #B5DFDF;}
.opps2 {width: 100%; height: auto; float: left; }

.hm {width: 100%; height: auto; float: left; background: transparent;}

.op {width: 50%; height: auto;  float:left; }
.soc { width: 100%; height: 360px;}
.social {width: 50%; height: 430px;  float:left; margin: 0;background:#DAEDED; }

.social2 {width: 35%; height: 430px;  float:left; margin: 0;background:#DAEDED; margin: 0 5% 0 10%; }

a, a:link, a:active, a:visited, a:hover
{color: #3E8F8F; border-bottom: 1px dashed;text-decoration: none; outline:none;}

a {outline: none;}

a:hover{border-bottom: 0px;text-decoration: none; outline:none; }

ul {color: #3E8F8F; margin: 0 0 0 27px;}

/*
.header
{
	display:none; }
		
	.header h3 {padding: 0px 0 0 10px; text-align: left; margin: 2px 0 0 0; color: #eee; font-weight: normal;}
	*/
		
	.headertop
{background: #3E8F8F url(logo-blk.png) no-repeat 5% 96%; width: 100%; top: 0; height: 160px; padding: 0; position: absolute; z-index: 10; margin: 94px 0 0 0; }
	

.red {color: #325F00; font-size: .7em; font-family: 'Open Sans', sans-serif; padding: 0 8px 0 0;}

.first {margin: 0 92px 0 0; }
.email {margin: 0 96px 0 0;}
.phone {margin: 0 89px 0 0;}
.msg {margin: 0 32px 0 0;}

.heart {color: #F0B6CF; font-size: 1.8em}


#nav2 {width: 100%; margin: 0px; background: #3E8F8F; height:40px; padding:6px 0 6px 0px;  z-index:15; margin: 66px 0 0 0; float: left; position:absolute; }

#nav2 h3 {padding: 2px 0px 2px 23px; margin: 0; font-size: 1em;} 

#nav2 a:link, #nav2 a:visited {color: #eee; opacity: .6; border:0;}
#nav2 a:hover {background: transparent; opacity: 1;}


.content {margin: -20px 0 0 0; background: #B5DFDF; outline: none; width: 100%; }

.noborder {border: 0px;}

/*------------ #intro -----------------*/

#intro {padding: 0; margin:0; width: 100%; height: auto; padding: 248px 0 0 0;}
#intro img {max-width: 100%; height: auto; padding: 6px 32px 8px 0; margin:  0;}

/*------------ #first -----------------*/

#first {background:transparent; height: auto; margin: 0px; width: 100%;	border: 0px; float: left; }
#first img {max-width: 100%; height: auto; border: 0; padding: 0;}


/*------------ #box -----------------*/

#cf1 {  position:relative;  height:auto;  width:100%;
  margin:0 auto;  }
#cf1 img {  position:absolute;  left:0;  -webkit-transition: opacity 1s ease-in-out;  -moz-transition: opacity 1s ease-in-out;  -o-transition: opacity 1s ease-in-out;  transition: opacity 1s ease-in-out;}
#cf1 img.top:hover {  opacity:0;}

#con
{width: 100%; height: 160px; background: transparent; float:left; margin: 2.3% 0 0 0;}


#boxwhat { height: auto; width: 22.5%;	border: 0px; float: left; margin: 0 1% 0 1%;}

#cf2 {  position:relative;  height:auto;  width:100%;
  margin: 78% auto;  }
#cf2 img {  position:absolute;  left:0;  -webkit-transition: opacity 1s ease-in-out;  -moz-transition: opacity 1s ease-in-out;  -o-transition: opacity 1s ease-in-out;  transition: opacity 1s ease-in-out;}
#cf2 img.top:hover {  opacity	:0;}

#box {background:#eee; height: auto;  width: 23%;	color: #000; border: 0px; float: left; margin: 0.6%; }
#box img {max-width: 100%; height: auto; border: 0; padding: 0;}


#boxmenu { height: auto; width: 23%;	border: 0px; float: left; margin: 0% 1% 23% 1%; }
#boxmenu a:hover {opacity:.8;}



#box2 { height: auto; width: 31%;	border: 0px; float: left; margin: 0% 1% 2% 1%; }

#box2 img {max-width: 100%; height: auto; border: 0px solid #fff; padding: 0;}

#box3 { height: auto; width: 31%;	border: 0px; float: left; margin: 23% 1% 25% 1%; }
#box3 img {max-width: 100%; height: auto; border: 0px solid #fff; padding: 0;}


#box4 { height: auto; width: 22.33%;	border: 0px; float: left; margin: 2.3% 0% 15% 2%; }


.top {opacity:  .85	;}


/*------------ #second - MOBILE -----------------*/
#second {background: transparent; height: auto; padding: 0; width: 100%; }


#second h4 {padding: 0 0 0 0px;}


#second a, #second a:link, #second a:active, a:visited
{color: #275050; border-bottom: 1px dashed #275050;  outline:none;}

#second a:hover{color: #fff; border-bottom: 0px;text-decoration: none; outline:none;}

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

#family {width: 100%; height: auto; float: left; padding: 0 ; text-align: center; background: #2c6666;}
#family h2 {text-align: left !important; padding: 0 0 23px 15%; color: white;}

#family a {border: 0;}
#family a:hover {opacity:.9;}

/*------------ #third -----------------

#third {background: #234B4B;  height: auto; padding: 10px 10px 0 10px;  border-top: 0; }
#third p {color: #fff; padding: 0 0 10px 0; letter-spacing: .1em;}


/*------------ #footer -----------------*/

#sub-foot
{width: 100%; margin: 0; height: auto; background: #275050; padding: 40px 0 0 0;}

#sub-foot h3 {color: #ffc;}

#sub-foot-a, #sub-foot-b, #sub-foot-c { height: 490px; background: transparent; opacity:.9; float: left; padding: 2% 2%;}

#sub-foot-a {padding: 2% 0 2% 4%; width: 20%;}
#sub-foot-b {width: 20%;}
#sub-foot-c {padding: 2% 2% 2% 5%; width:45%;} 

#sub-foot a:link, #sub-foot a:visited {color: #fff; border: 0;}
#sub-foot a:hover {color: #EABDD4;}

#sub-foot-c h4 {padding: 0 0 0 12%; color: #ffc; font-size: 1.2em; letter-spacing: normal; font-weight: normal;}
#sub-foot p {padding:0 0 0 12%; color: #ffc; font-size:.85em; margin:0; line-height:1.4em;}




.footer
{	 background: #173F3F url(flower.png) no-repeat 6% 30%;
	font-weight: normal;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%;
	height: 200px; bottom: 0; 
	padding:0px 50px; margin: 0; border-top:0;opacity: .9;
}


.footer.fixed
{ bottom: 0; left: 0;}

.footer a {color: #EAB5CD; border: 0; padding:0;}
.footer a:hover {color: #FF58A4; background: transparent;opacity: 1; padding: 0;}
.footer h3 {font-size: 1.2em; margin: 0; padding: 8% 0 0 25%; font-weight: normal; color: #fff } 
.footer h4 {padding:23px 0 0 25%; font-size: .63em; margin: 0; color: #5C97D1; opacity:.9; letter-spacing: .1em;}

.ted{margin: 0 0 0 8%; font-size: .8em;}

.content
{padding: 0px; background: transparent;}


/* code for gallery on project page*/
    .galleria{ width: 100%; height: 500px; background: transparent; padding: 0; margin:0; }


	/* code for menu-----------------*/
 .toggle, [id^=drop] {
 display: none;
}

nav {
  margin:0;
  padding: 0; width: 100%; 
  background-color: #3E8F8F; padding: 20px 0 0 0 ; position: fixed; z-index: 20;
  
}

nav img {padding: 4px 0px 0 4px;}

nav:after {
  content: "";
  display: table;
  clear: both;
}

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

nav ul li {
  margin: 0px; padding: 0 23px;
  display: inline-block; color: #fff;
  float: left;  background-color: #234B4B  ; z-index: 20;
}

nav a {  display: block;  padding: 0 0px;  color: #fff !important;  font-size: 14px;  line-height: 60px; text-decoration: none;}

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

nav a:hover { color: #444; }

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

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

nav ul ul li {  width: 130px;  float: none;  display: list-item;  position: relative;}

nav ul ul ul li {  position: relative;  top: -60px;  left: 170px;}

li > a:after { content: ' +'; }

li > a:only-child:after { content: ''; }


@media all and (max-width : 768px) {

.toggle + a,
 .menu { 
  display: none; }

.toggle {
  display: block; 
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
  line-height: 46px;
  text-decoration: none;
  border: none; margin:  0;}

.toggle:hover { background-color: #3E8F8F; }

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

nav ul li {  display: block;  width: 100%; color: #fff;}

nav ul ul .toggle, nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; color:#fff;}

nav a:hover, nav ul ul ul a { background-color: #3E8F8F; color:#fff; }

nav ul li ul li .toggle, nav ul ul a { background-color: #4F7F7F; color: #fff; }

nav ul ul {  float: none;  position: static;  color: #fff;}

nav ul ul li:hover > ul,nav ul li:hover > ul { display: none; }

nav ul ul li {  display: block;  width: 100%;}

nav ul ul ul li { position: static;}
}