* { padding: 0; margin: 0; border: 0; outline: 0 }

body {
 -webkit-text-size-adjust:none;
 font-family: Helvetica, Arial, sans-serif;
 color:#FFF;
 font-size: 14px;
 background:url(assets/background.jpg) repeat #CCC;
 line-height: 1.4em
}

.titles {
	height: 17px;
	font-family: Helvetica, Arial, sans-serif;
	color:#5FA0B8;
	font-weight:bold;
    font-size: 13px;	
	line-height: 1em
}	
h2 {font-weight: normal;font-size: 14px}
.contact .leftcolumn h2 {font-weight: bold}
.policies .content h2 {font-weight: bold;font-size: 16px;margin-bottom: 5px}

#wrapper { 
	max-width: 968px;
 margin: 0 auto;
  background-color: #fff;
  padding-bottom: 4%;
}

#header { 
 height: 75px;
}

.leftcolumn {
	float:left;
	width:20%;
	padding: 20px 10px;
	text-align: center;
}
.leftcolumn img {max-width: 67px}

.contact .leftcolumn {
	width:40%;
	text-align: left;
}
.contact .content {width: 60%}

img {width: 100%;height: auto}

.content { 
 float: left;
 padding:20px 10px;
  width: 80%;
 line-height:18px
}


.address {
	font-weight:bold;
	padding-top:10px
}


a {
	color:#FFF;
	text-decoration:underline;
}

/* MENU */
ul.menu {
	height:75px;
	list-style-type:none;
	margin: 0 4%;
	display: flex;
	}

ul.menu li {
	float:left;
	height: 60px;
	flex-grow: 1;
		}


ul.menu li a {
	display:block;
	text-align: center;	
	text-decoration: none;
	padding: 20px 5% 0 5%;
		}

	
ul.menu li:hover {
	height: 75px;
	transition:height 0.25s;}

ul.menu li.selected {
	height: 75px !important;
}

.forms p {margin-bottom: 10px}

/* added June 2020 */

#pre-content {display: flex;font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;color:#000;padding:35px 5% 50px 5%}
#peter {float: left;width:40%;font-size: 22px;line-height: 30px}
#peter span {color:#7a7a7a;font-size: 17px}
#diplomate {float: right;width:60%;text-align: right;font-size: 12px}
#diplomate img {max-width: 60px}

.row {display: flex;margin: 0 4%}

.lavender {background-color: #939fb7}
.dark-gray {background-color: #9da2a6}
.light-gray {background-color: #a1abad}
.dark-lavender {background-color: #737f95}
.light-lavender {background-color: #bac1c7}

.policies .row {margin:0 4% 0 4%}
.policies .leftcolumn {text-align: left}
.policies .content h2 {display: none}

p.moved {clear: both;text-align: center;color:#000;margin-bottom: 25px;font-weight: bold}

/* Menu */


#menuToggle
{
  display: none;
  position: relative;
  top: 25px;
  left: 4%;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #939fb7;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #000;
    z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 19px;
}
#menu a.selected {color:#939fb7}
/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

@media screen and (max-width:720px) {
	#header {height: 21px}
	#pre-content {width: 100%;display: inline-block;clear: both;padding:0 0 45px 0}
	#peter, #diplomate {width: 100%;text-align: center}
	#diplomate {padding-top: 45px}
	#diplomate span {display: block}
	#menuToggle,.policies .content h2,.contact .row  {display: inline-block}
	ul.menu,.leftcolumn {display: none}
	.contact .leftcolumn,.contact .content{display: inline-block;width: 96%}
	.content { width: 100%}
	
}