html
{padding: 0; margin: 0;}

body{background: #E9E2D5 url(bg_marine.png) repeat; 
    font-family: 'Cabin', sans-serif;
position: relative; font-weight:normal; -webkit-text-size-adjust: none; margin: 0 10%;}


@media only screen and (min-width: 1860px) 
{body {margin:0 22%; width: 54%;
  }}


@media only screen and (max-width: 1220px) 
{body {margin:0 ; background: #aaa;}}

body *
{	text-shadow: none;}

h1, h2, h3, h4, h5, h6{	line-height: 1.4em;	}

p{font-size: 1.08em; margin: 0; padding:0px 5% 0px 6%; font-weight: normal; color: #3E8F8F;  line-height: 1.8em; }

h1{	font-size: 2.1em; padding:23px 5% 0 6%; color: #67AAAB; font-weight: 600; margin:0; }

h2{font-size: 1.7em; color: #67AAAB; padding: 12px 5% 0 6%; font-weight: 400; line-height:1.8em; margin:0; }

h3{	font-size: 1.25em;  padding: 2px 5% 0 6%; font-weight: normal; color: #3E8F8F;  line-height: 1.6em;   }

h4{	font-size: .747em;  padding: 10px 0px 10px 81px; color: #555; font-weight: 100; letter-spacing: .108em;}
h5{	font-size: .8em;  padding: 0px 0px 0px 6%; color: #666; font-weight: 400; line-height: 1.6em; }

h6{padding: 2px 5% 12px 6%; ; font-size: 1em; font-weight: 100; margin: 1px 0; color:#3E8F8F; }

a, a:link, a:active, a:visited, a:hover {color: #67AAAB; text-decoration: none; outline:none; padding: 0 0 4px 0; border-bottom: 2px dotted; }

a {outline: none;}

a:hover{color: #1A4545; border-bottom: 3px solid;text-decoration: none; outline:none;  }

a:active { background:#F1B9D3; }

nav a:link, nav a:visited {color: #fff; border:0;}


.bg {
	background:#eee; 
	padding: 6px; 
	font-weight: 900;
    border-radius: 6px;}

.grey {color: #bbb;}
.lge {font-size: 1.8em;}
.sml {font-size: 0.23em; color: #c00; }

.min {    padding: 0 0 6px 23px;}
.green {color: #ccf; font-size: 1.6em;}
.red {color: #e82e81;}

.news2 {background: #EFB3D9; font-size: 1.4em; padding:  4px; color: #234B4B;
opacity: .7;
}

.career {width: 90%; margin:2% 5%; height: auto; background: #C4CECE ; padding: 23px 0; border: 6px solid #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: auto; background: #DAEDED; text-align: center;}
.social {width: 60%; height: 430px;  float:left; margin: 0; }
.social2 {width: 35%; height: 430px;  float:left; margin: 0; margin: 0 0% 0 5%; }

.flower {margin:0% 0 0 81%;  }
.socmed { padding: 0px 0 0 23px; }
.test {margin: 0 7% 0 4%; background: url(quote.png) no-repeat; text-align:justify; letter-spacing: .05em; padding: 0 0 0 12%;}
.pink {color: #F0B6CF;  }

.pre img {margin: 23px 32px 8px 6%;}
	

.faqs {background: url(flower-sml.png) no-repeat 4% 0%; padding: 0 12% 60px 10%;}
.less {font-size: .75em;}
.heart {color: #F0B6CF; font-size: 1.8em}

.first {margin: 0 62px 0 0; }
.email {margin: 0 66px 0 0;}
.phone {margin: 0 59px 0 0;}
.msg {margin: 0 6px 0 0;}

.ted {background: #fff; font-size: 1.9em; margin: 0 65% 0 5%; color: #f00;}
.news {background: #234B4B; font-size: 1.2em; margin: 0 10% 0 10%; color: #fff; padding: 12px; text-align: center; opacity: .8; border: 2px solid white;}
.news:hover {background: #80BFBF; color:  #234B4B; opacity: 1; transition: 3.2s;}

.content {background: #FF3; padding: 4px 2px;}
.submit {padding: 6px 32px; margin: 0 0 18px 0; background: #6DA5A5; color: #fff; font-size: 1.08em;}
.submit:hover { background: #2F5F5F; color: #fff;}

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

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

 #intro ul li, #second ul li
{ list-style-type:disc;
  margin: 0px 0px 0px 81px; 
  padding: 0px 32px 0px 6px; 
color: #3E8F8F;
}


#table {margin: 0 0 0 10%;}

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

#nav2 img {padding: 0 4px 0 0;}

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

#nav2 a:link, #nav2 a:visited {color: #fff; border: 0; opacity: .6;}
#nav2 a:hover { color: #F0B6CF; background: transparent; padding: 12px 0; opacity:1;}



.content {padding: 1px 0 0 0; background: #B5DFDF; outline: none; width: 100%; margin: 0; height: auto;}

/*

.header
{	background: transparent; font-weight: normal; 	width: 100%; top: 0;	height: 42px; 	padding: 0; position: absolute; display: block; margin:0;}
	
	
@media only screen and (min-width: 481px) 
{.header {display: none;}}
	
	.header h3 {padding: 4px 0 0 10px; margin: 2px 0 0 0; color: #800; font-weight: normal; }

	.header2
{  	font-weight: normal; 
	-moz-box-sizing: border-box;	box-sizing: border-box;	
	width: 100%; top: 0;	height: 60px; opacity: .92; padding: 7px 0 0 0; position: fixed;}
	
	.header a
{display: block; width: 40px; height: 40px;	position: absolute;	top: 0;	left: 12px; background: center center no-repeat transparent;
background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );}
	
.header.fixed{ position: fixed; top: 0; left: 0; disp }
*/
.headertop
{background: #3E8F8F url(logo-blk.png) no-repeat 96% 16%; width: 100%; top: 0; height: 120px; padding: 0; position: absolute; z-index: 10; margin: 96px 0 0 0; }

  
  .headertop a {color: #325F00; }
  .headertop a:hover {color: #3B4A4F;}
  .headertop img {padding: 10px 30px 0 0;}
.headertop h3 {padding: 32px 0 0 32px; color:#cc3; font-size:1.08em;}
.headertop p {padding:0;}





/*------------ transform  -----------------*/

#galleries {width: 100%; height: auto; background: #b5dfdf ; padding: 0; margin: 0;}
#galleries img {width:100%;}

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

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

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

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

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


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

#hide {display:none;}					

.top {opacity:  .85	;}


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

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


#box4 { height: auto; width: 33.33%;	border: 0px; float: left; margin: 23% 0% 23% 0%; }

/*------------ #display -----------------*/


#projects {width: 100%; height: auto; background: transparent; padding: 12px 0; margin: 0;}


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

#intro {background: #B5DFDF;  height: auto;   margin:215px 0 0 0px ; width: 100%; padding:0;}
#intro img{ max-width:100%; height: auto;padding: 0;}

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

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



/*------------------ #second --------------*/

#second {background: #B5DFDF; height: auto; padding: 0; width: 100%;}
#second img{ max-width:100%; height: auto; padding: 0 0 12px 32px;}


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

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

#third {background: #4F7F7F; height: auto; padding: 0; width: 100%;}
#third p {color: #fff;} /*this is against a dark bg and good */
#third h2 {  color: #F0B6CF;}
#third h3 {color: #B5DFDF;}
#third a {color: #B5DFDF;}
#third img {max-width:100%; padding: 0; margin:0; height: auto;}

 #third ul li
{ list-style-type:disc;
  margin: 0px 0px 0px 81px; 
  padding: 6px 24px 6px 6px; 
  color: #eee;
}


#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;}

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

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

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

#sub-foot-a, #sub-foot-b, #sub-foot-c { height: 520px; 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% 0%; width:50%;} 

#sub-foot a:link, #sub-foot a:visited {color: #fff; border: 0;}
#sub-foot a:hover {color: #EAB5CD; background: transparent; opacity: 1;}

#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 50% 90%; position: inherit;
	font-weight: normal;
	width: 90%; text-align: center;
	height: 400px;
	padding:8px 5% 0px 5%; margin: 0;  border-bottom: 4px solid #cecede;
}

.footer.fixed
{position: inherit; 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: 5% 0 0 0; font-weight: normal; color: #fff } 
.footer h4 {padding:12px 0 0 0; font-size: .63em; margin: 0; color: #CBC8FF; opacity:.9; letter-spacing: .1em;}


/* code for gallery on project page*/

    .galleria{ width: 100%; height: 500px; background: #80BFBF; padding: 0; margin:0; }


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

nav {
  margin:0;
  padding: 0; width: 80%; height: 60px;
  background: #234B4B url(mini2.png) no-repeat 99% 50%; padding: 0 ; position: fixed; z-index: 20;
}


@media only screen and (min-width: 1860px) 
{nav {
  margin:0;
  width: 54%; 
 }
}


@media only screen and (max-width: 1220px) 
{nav {width: 100%;}
}

nav img {padding: 10px 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 12px 0 23px;
  display: inline-block;
  float: left;
  background-color: #234B4B  ; z-index: 20;
}

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

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

nav a:hover { color: #F0B6CF; opacity:1; }

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: 130px;
}

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

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

/* Media Queries  - - -

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


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

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

.toggle:hover { background-color: #bbb; }

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

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

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

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: #d4d4d4 url(grid.jpg) repeat; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #c3c3c3; }

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

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;

}
}

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

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

}