/*  
	CSS Reset by Eric Meyer - Released under Public Domain
    http://meyerweb.com/eric/tools/css/reset/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td 
                  {margin: 0;padding: 0;border: 0;outline: 0;
                  font-size: 100%;vertical-align: baseline;
                  background: transparent;}
body              {line-height: 1;}
ol, ul            {list-style: none;}
blockquote, q     {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
:focus            {outline: 0;}
ins               {text-decoration: none;}
del               {text-decoration: line-through;}
table             {border-collapse: collapse;border-spacing: 0;}
/*end reset*/



html, body {
    margin:0;
    padding:0;
    border:none;
    height:100%;
    width:100%;
    color:#000;
	background-color:#b5d4cb;
	font-family: 'Raleway', Helvetica, Arial,  sans-serif;
	letter-spacing:.04em;
	font-size:14px;

}

h1, h2, h3, h4, h5, h6 {
	/*font-family: 'Playfair Display', serif;*/
	font-family: 'Martel', Georgia, "Times New Roman", Times, serif;
	letter-spacing:0.01em;
	font-weight:200;
	}

.head h1  {
	font-size:4em;
    color: #FFF9F0;
	letter-spacing:0.1em;
	padding:.1em 0 0 0;
}

h2 {
	font-size:1.7em; 
}

h3 {
	font-size:.9em; 
	font-family: 'Raleway', Helvetica, Arial,  sans-serif;
	text-transform:uppercase;
    color: #FFF9F0;
	letter-spacing:.3em;
	padding: .2em 0;
	line-height: 1.2;
	font-weight: 600;
}

h4 {
	font-size:.9em; 
	font-family: 'Raleway', Helvetica, Arial,  sans-serif;
	text-transform:uppercase;
    color: #FFF9F0;
	letter-spacing:.2em;
	padding: 2em 0 0 0 ;
	line-height: 1.2;
	font-weight: 600;
}

h5 {
	font-size:1.2em;
	font-family: 'Raleway', Helvetica, Arial,  sans-serif;
	line-height: 1.2;
}

hr {
	height:2px; 
	text-align:left; 
	margin: 2em auto 2em 0; 
	border:none; color:#FFF9F0; 
	background-color:#FFF9F0;
	}

#wrapper {
    min-height:100%;
    min-width:100%;
    position:relative;
    margin:0;
    padding:0;
}

.content {
	height:auto;
	margin: 0 20px;
	padding: 20px 40px;
	width: 70%
}

.column {
    display:block;
    float:left;
	width:50%
}

.rightcolumn {
    display:block;
    float:right;
	border-left:solid 2px #FFF9F0;
	padding:1em .5em 1em 2em;
	margin-left: 0.5em;
}

.rightcolumn hr{
	height:1px; 
	text-align:left; 
	margin: 2em auto 2em 0; 
	border:none; 
	color:#000; 
	background-color:#000;
}

.img {
	width:70%;
	margin:1em auto;
	}

p {
	margin: 1em 0 0 0;
	line-height: 1.6em;
}

ul {
    list-style-type: disc;
    margin-left: 2em
}

ol {
	list-style:decimal;
    margin-left: 2em
}

li {
	line-height: 1.6em;

}

a {color:#107861}


a:hover {
	color: #fff
/*  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);*/
}


/*menu*/

.topnav {
	padding: 0;
	width: 100%;
	margin: 0 auto;
	background:  #87a29c; 
	border-bottom: 2px solid #FFF9F0;
}



#menuItems{
    padding: .4em 30px; 
}

#menuItems > li {
    display: inline-block;
    zoom:1;
    display:inline;/* this fix is needed for IE7- */
}

#menuItems > li > a{
    color: #FFF9F0;
    padding: .8em 10px .8em 10px;
	display: inline-block;
	text-decoration:none;
	text-transform:uppercase;
	margin: 0 auto ;
	
    /* font-size:1.1em; */
	letter-spacing:.18em;
	position: relative;
	text-decoration: none;
}




#menuItems > li > a:before {
  content: "";
  position: absolute;
  width:100%;
  height: 1px;
  bottom: 2.2em;
  left: 0;
  background-color: #FFF9F0;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.6s ease-in-out 0s;
  transition: all 0.6s ease-in-out 0s;
}
#menuItems > li > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

@media screen and (max-width: 420px) {
	p { font-size: 1em;}
	h2 { font-size: 2em;}
	.img {width:90%}
	.column {float: none }
	#menuItems > li > a{ font-size:.8em; display:block}
	.content {padding: 10px; width:85%}
	#menuItems{padding: 0;}
	/*html, body { background-color: orange;}*/
}


@media screen and (max-width: 620px) and (min-width: 421px) {
	p { font-size: .9em;}
	h2 { font-size: .9em;}
	.column {float: none }
	#menuItems > li > a{ font-size:.8em; padding:.2em 1em .2em 0;}
	.content {padding: 20px 0; width: 85%}
	#menuItems{display:inline-block; text-align:left; padding:0 }
	
}

}