* {
  box-sizing:border-box;
}

@font-face{
    font-family: "Dutch 809";
    src: url("0bcf2731ed3d375c63e53a247110802a.eot");
    src: url("0bcf2731ed3d375c63e53a247110802a.eot?#iefix")format("embedded-opentype"),
        url("0bcf2731ed3d375c63e53a247110802a.woff")format("woff"),
        url("0bcf2731ed3d375c63e53a247110802a.woff2")format("woff2"),
        url("0bcf2731ed3d375c63e53a247110802a.ttf")format("truetype"),
        url("0bcf2731ed3d375c63e53a247110802a.svg#Dutch 809")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family: "Untidy";
    src:
        url("UntidyItalicSkrawl-8azz.woff")format("woff"),
        url("UntidyItalicSkrawl-8azz.woff2")format("woff2"),
        url("UntidyItalicSkrawl-8azz.woff.ttf")format("truetype")
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}



}

body { color:#222222; font-family: 'Dutch 809', serif; font-size:1.1vw;

  background-image: url("../images/desktop_back.jpg"); background-size: cover;
  /*background-color:#3d4435;*/ }


p,tr,td,ul,li { color:#222222;  line-height: 2; }
h1,h2 { color:#222222; line-height: 1; }
a { color:#222222;  line-height: 1.6; }
li { text-align: left; }

 /* Anchors (mobile, menu, desktop AND mobile contentselect) */
a.m { color:#222222; display:block; padding:2.2vw; font-size:3.7vw; /*font-weight:bold;*/ text-decoration:none; }
a.m:link {color:#222222;}
a.m:visited {color:#222222;}
a.m:hover {color:#ffffff; background-color:#9681ae; }
a.m:active {color:#9681ae;}
.topmost_menuitem { border-top-left-radius: 0.4em; border-top-right-radius: 0.4em;  }
.bottommost_menuitem { border-bottom-left-radius: 0.4em; border-bottom-right-radius: 0.4em;  }

.underlined { border-bottom-style:solid; border-bottom-width:1px; padding-top:0.5em; padding-bottom:0.5em;  }
.tabbed { margin-left:0.5em; margin-right:0.5em; padding-top:0.5em; /*padding-bottom:0.5em;*/ padding-bottom: 2em;  }

/* ---------------------- */
/* Use a media query, mobile first max 900px: */
@media screen and (max-width:599px) {
	div.mwrapper {display:block; overflow:auto; }
	div.dwrapper {display: none; }
/* desk (mobile) */
  body { padding:0.2em; padding-left:0.8em; padding-right:0.8em;
    /*background-image:url(../images/feather_email2.jpg);*/
         background-image: url("../images/mobile_back.jpg"); }
  div.desk { width:100%; background-color:#ffffff; padding:0em; padding-left:1em; padding-right:1em; margin-top:0em; overflow: auto; }



  /* set content to 100% on moblie */
  div.m_title { width:100%;  padding-left:0.83vw; padding-right:0.83vw; letter-spacing:0.2em;  }

  div.nav { width:100%;  padding-left:0.83vw; padding-right:0.83vw;  background-color:#9681ae; }
  div.content { width:100%;  padding-left:0.83vw; padding-right:0.83vw;  text-align: justify; }
  div.content_full { float:left; width:100%; padding-top:0px; padding-bottom:0px; padding-left:0.83vw; padding-right:0.83vw;  }
  img.logo { height: 20px; }

  div.full_title { width:100%; float:left; display:block; /* padding-left:5px; padding-right:5px;*/ text-align:center;}

  h1 { font-size: 4vw; }
  h1.page_title { font-family: 'Untidy', serif; font-size: 5.5vw;  padding-top:1vw; padding-bottom:1vw; float:right; }
  h1.logo { font-family: 'Untidy', serif; font-size: 6vw; line-height:6.8vw; padding-left: 0vw; padding-top: 0vw;  padding-bottom: 0vw; }
  /* m.title of subpage content */
  h1.title { font-family: 'Untidy', serif; font-size:2em; padding: 1.4em; text-align: center; letter-spacing: 0.4em; }
  .square {width:2.6vw; padding-bottom:0.6vw; }
  span.subtle { color:#ffffff; }

  h1.list_header { font-family: 'Untidy', serif; font-size:4.5em; float: left; padding-bottom: 0em; margin-bottom: 0.5em; text-align: left; }


  /* mobile nav (logo - title - menu) bar setup: 3 div 20 - 80 - 20 */
  img.m_logo_text {padding-left:15%;padding-right:50%;}
  img.ruler {padding:0px; width:100%; height:0px;}
  div.ruler { line-height:1px; display:block;}


  p, li, tr, td { color:#222222; font-size: 3.6vw; }
  p { padding-left: 0.3em; padding-right: 0.3em; }
  li { padding: 0em; }
  ul { padding-right: 5vw; }
  h1 { color:#222222; }
  h2 { font-family: 'Untidy', serif; font-size: 4.2vw; font-weight:none; }
p.firstline { margin-top: 2vw;}

 div.m_nav_left {width:86%;float:left;}
 div.m_nav_right {width:14%;float:left;padding-top:3vw; padding-left:4vw; }
 /* mobile gallery div properties */
 div.gallery {padding-left:5px; padding-right:5px;}
 div.gallery_thumb {padding:1px; }

 div.m_menu {/*background-color:#32372b;*/ text-align:right; float:right; width:30vw; border-radius: 1.5em; }






/* contentselect div, anchor and img (mobile) */
div.contentselect {background-color:#32372b; text-align:left; float:right; width:100%; border-radius: 1.5em; margin-bottom: 4em; }
a.contentselect {  font-family: 'Untidy', serif; font-size:5vw; font-weight: bold; padding:1.5vw; }
img.img_contentselect {width:8.5vw; vertical-align:-3vw; padding-left:2vw; padding-right: 2vw; }

a.content { text-decoration:none;  margin-left:-0.4vw; padding:0.4vw;}

/* Anchors (mobile, menu) */
a.m_title { margin-left:-1.7vw;  padding:1.5vw; font-size:3.7vw; /*font-weight:bold;*/ text-decoration:none; }
a.m_title:link {color:#222222;}
a.m_title:visited {color:#222222;}
a.m_title:hover {color:#ffffff; background-color:#9681ae; }
a.m_title:active {color:#9681ae;}


 img.img_social {width:5vw; vertical-align:-1.2vw; /*padding-left:2vw;*/ }
img.img_menu {width:8vw; vertical-align:-1vw; }
img.img_content { width:100%; padding: 1vw; padding-bottom: 5vw;}

 /* mobile footer */
  div.footer { padding-top:3vw; text-align:center; }

  p.footer { line-height:5.5vw; font-size:3.5vw; }
  a.footer { text-decoration:none; /*font-size:3.5vw;*/ font-size:1em; padding:1vw; }
  a.footer:hover{color:#ffffff; background-color:#9681ae }
  a.footer:active{color:#ffffff; background-color:#9681ae }
  .webfonts  { /*line-height:5.5vw;*/ text-align: center; }


p.caption {font-size:3vw; }
table,tr,td  {font-size:3vw; }

 /* shapeshifter photo, mobile*/
 .shapeshifter-div {
  overflow: hidden;
  width: 100%;
  height: 76vw;
object-fit: cover;
  /* adjust as needed */
  /*object-position: 50% 90%;*/
}
 img.shapeshifter-img {

  /*height: 100%;*/


  /* adjust as needed */
  /*object-position: 50% 90%;*/
  height: 100%;
  /* adjust values as needed */
  margin-left: -16%;

}


}/* mobile css off */




/* ---------------------- */
/* tablet, landscape highres 900-1280 */
@media screen and (min-width:600px) and (max-width:1279px) {

div.mwrapper {display: none; }
div.dwrapper {display: block; overflow:auto; padding-left:2vw; padding-right:2vw;  padding-top:2vw; }

/* desk (tablet) */
div.desk_left {float:left;width:7%;}
div.desk {float:left;display:block;margin:auto;width:86%;background-color:#fff;}
div.desk_right {float:left;width:7%;}

div.full_title { width:100%; float:left; display:block; padding-left:2vw; padding-right:2vw; text-align:center; }
/* d.content (div) should also define font size? */
div.content { /*font-size:1.18vw;*/ width:50%; padding-left:2vw; padding-right:2vw;  float:left;  text-align: justify;  }
div.content_full { width:100%; overflow:auto; padding-left:2vw; padding-right:2vw;  float:left; }

div.title { display:block; width:100%; }
div.navigation { width:55%; float:left; margin-top:0px;  }
div.social  { width:45%; float:left;  margin-top:0px; }

/* tablet formatting */
/* fonts and paragraph spans */
span.normal_word_spacing { word-spacing:normal; }
span.subtle { color:#ffffff; }

p, ul, li, tr, td { line-height: 1.8; }
h2.title { color:#222222; font-size:3.2vw; line-height: 0.4vw; }
p.navigation { color:#222222; margin-top:0px; font-size: 1.8vw;  text-align:left; word-spacing:0.4vw; }
p.social { color:#222222;  margin-top:0px; word-spacing:0.1vw; text-align:right; }
ul { padding-right: 2vw; }
p.firstline { margin-top: -1.2vw;}


 a, p, li, tr, td { color:#222222; font-size: 1.8vw; }
 h1  { color:#222222; font-size: 2.4vw; line-height: 2.2vw; margin-bottom: 2vw; }
  ul { margin-left: -2vw; padding-right: 4vw; }
  h2 { font-family: 'Untidy', serif; font-size: 5.4vw; font-weight:none; }
p.firstline { margin-top: -1vw;}

/* d.title of subpage content */
h1 { font-size: 2.4vw; }
h1.page_title { font-family: 'Untidy', serif;  padding-top:1vw; padding-bottom:1vw; float:right; }
  h1.title { font-family: 'Untidy', serif; font-size: 3vw; padding:2.5vw;  letter-spacing: 0.5em;  text-align: center;  }
  .square {width:0.8vw; padding-bottom:0.05vw; }
  h2 { font-family: 'Untidy', serif; font-size: 2.6vw; font-weight: normal; padding:0.4vw;  }
h1.list_header { font-family: 'Untidy', serif; font-size:2.4vw; float: left; padding-bottom: 0em; margin-bottom: -0.3em; text-align: left;  }

/* Anchors (tablet) */
a { font-size:1.8vw; /*font-weight:bold;*/ text-decoration:none; }
a:link {color:#222222;}
a:visited {color:#222222;}
a:hover {color:#ffffff; background-color: #9681ae; /*text-decoration:underline;*/ }
a:active {color:#ffffff;  background-color:#9681ae;}
a.content { font-weight:none; text-decoration:none;  margin-left:-0.4vw; padding:0.4vw;}


/* n is for navigation . normal is needed since navigation uses a tweaked space between words */
a.n { padding:0.4vw; }
a.n:hover{color:#ffffff; background-color:#9681ae }
a.n:active{color:#ffffff; background-color:#9681ae }

a.n_title { font-size:1.1vw; margin-left:-0.4vw; padding:0.4vw; }
a.n_title:hover{color:#ffffff; background-color:#9681ae }
a.n_title:active{color:#ffffff; background-color:#9681ae }

p.footer { font-size:1.8vw; line-height: 1.6vw; word-spacing: 0.3vw;}
a.footer { font-size:0.9em; margin-left:-0.4vw; padding:0.4vw; }
a.footer:hover{color:#ffffff; background-color:#9681ae }
a.footer:active{color:#ffffff; background-color:#9681ae }
.webfonts  { /*line-height:1vw;*/ /*font-size:1em;*/ text-align: center; }

/* tablet easyread*/
p.easyread { padding-left: 4vw; padding-right: 4vw; }

/* contentselect div, anchor and img (mobile) */
div.contentselect {background-color:#32372b; text-align:left; float:right; width:100%; border-radius: 0.8em; margin-bottom: 4em; }
a.contentselect {  font-family: 'Untidy', serif; font-size:2.4vw; font-weight: bold; padding:1vw; }
img.img_contentselect {width:4vw; vertical-align:-1.4vw; padding-left:1vw; padding-right: 1vw; }
img.img_content { width:100%; padding: 0.2vw; padding-bottom: 1.4vw;}


a.n_normal{ padding:0.4vw; word-spacing:normal;}
a.n_normal:hover{color:#ffffff; background-color:#9681ae /*text-decoration:underline;*/ }
/*h1 { line-height: 40px; }*/
img.ruler { width:100%; height:0px; padding:0px; }
/*desktop footer*/
div.footer { padding-top:2vw; text-align:center; font-size:1.1vw; }

img.img_social {width:2.4vw;  vertical-align:-0.4vw; margin-left:0.4vw; }
table,tr,td  {font-size:1.05vw; }


/* shapeshifter photo, desktop*/
 .shapeshifter-div {
  overflow: hidden;
  width: 100%;
  height: 40vw;

  /* adjust as needed */
  /*object-position: 50% 90%;*/
}
 img.shapeshifter-img {
    width: 100%;
  height: 100%;
  object-fit: cover;

  /* adjust as needed */
  object-position: 50% 90%;
  width: 100%;
  /* adjust values as needed */
  /*margin: 12% 0 0 -13%;*/
}
/* ipad, landscape properties end*/
body { background-image: url("../images/desktop_back.jpg"); background-size: cover; }

/* ipad, landscape properties end*/
}

/* ---------------------- */
/* DESKTOP highres 1280-6000 */
@media screen and (min-width:1280px) and (max-width:6000px) {

div.mwrapper {display: none; }
div.dwrapper {display: block; overflow:auto; padding-left:2vw; padding-right:2vw;  padding-top:2vw; }

/* desk (desktop) */
div.desk_left {float:left;width:8%;}
div.desk {float:left;display:block;margin:auto;width:84%;background-color:#fff;}
div.desk_right {float:left;width:8%;}

div.full_title { width:100%; float:left; display:block; padding-left:2vw; padding-right:2vw; text-align:center; }
/* d.content (div) should also define font size? */
div.content { /*font-size:1.18vw;*/ width:50%; padding-left:2vw; padding-right:2vw;  float:left;  text-align: justify;  }
div.content_full { width:100%; overflow:auto; padding-left:2vw; padding-right:2vw;  float:left; }

div.title { display:block; width:100%; }
div.navigation { width:65%; float:left; margin-top:0px;  }
div.social  { width:35%; float:left;  margin-top:0px; }

/* desktop formatting */
/* fonts and paragraph spans */
span.normal_word_spacing { word-spacing:normal; }
span.subtle { color:#ffffff; }

p, ul, li, tr, td { line-height: 2.2; font-size:1.2vw;  }
h2.title { color:#222222; font-size:2vw; }
p.navigation { color:#222222; margin-top:0px;   text-align:left; word-spacing:0.4vw; }
p.social { color:#222222;  margin-top:0px; word-spacing:0.1vw; text-align:right; }
ul { padding-right: 2vw; }
p.firstline { margin-top: -0.2vw;}

/* d.title of subpage content */
h1 { font-size: 1.6vw; }
h1.page_title { font-family: 'Untidy', serif;  padding-top:1vw; padding-bottom:1vw; float:right; }
  h1.title { font-family: 'Untidy', serif; font-size:2.2vw; padding:0.8em; text-align:center; letter-spacing: 0.6em;  }
  .square {width:0.8vw; padding-bottom:0.05vw; }
  h2 { font-family: 'Untidy', serif; font-size: 2vw; font-weight: normal; padding:0.4vw;  }
h1.list_header { font-family: 'Untidy', serif; font-size:1.4vw; float: left; padding-bottom: 0em; margin-bottom: -0.3em; text-align: left; }

/* Anchors (desktop) */
a { font-size:1.1vw; /*font-weight:bold;*/ text-decoration:none; }
a:link {color:#222222;}
a:visited {color:#222222;}
a:hover {color:#ffffff;  background-color:#9681ae; /*text-decoration:underline;*/ }
a:active { color:#ffffff;  background-color:#9681ae; }
a.content { font-weight:none; text-decoration:none;  margin-left:-0.4vw; padding:0.4vw; }


/* n is for navigation . normal is needed since navigation uses a tweaked space between words */
a.n { padding:0.4vw; }
a.n:hover{color:#ffffff; background-color:#9681ae }
a.n:active{color:#ffffff; background-color:#9681ae }

a.n_title { font-size:1.1vw; margin-left:-0.4vw; padding:0.4vw; }
a.n_title:hover{color:#ffffff; background-color:#9681ae }
a.n_title:active{color:#ffffff; background-color:#9681ae }

p.footer { font-size:0.9vw; line-height: 1.6vw; word-spacing: 0.3vw;}
a.footer { font-size:0.9em; margin-left:-0.4vw; padding:0.4vw; }
a.footer:hover{color:#ffffff; background-color:#9681ae }
a.footer:active{color:#ffffff; background-color:#9681ae }
.webfonts  { /*line-height:1vw;*/ /*font-size:1em;*/ text-align: center; }

/* contentselect div, anchor and img (mobile) */
div.contentselect {background-color:#32372b; text-align:left; float:right; width:100%; border-radius: 0.8em; margin-bottom: 4em; }
a.contentselect {  font-family: 'Untidy', serif; font-size:1.6vw; font-weight: bold; padding:0.6vw; }
img.img_contentselect {width:3vw; vertical-align:-1.4vw; padding-left:0.6vw; padding-right: 0.6vw; }
img.img_content { width:100%; padding: 0.5vw; padding-bottom: 1.5vw;}


a.n_normal{ padding:0.4vw; word-spacing:normal;}
a.n_normal:hover{color:#ffffff; background-color:#9681ae /*text-decoration:underline;*/ }
/*h1 { line-height: 40px; }*/
img.ruler { width:100%; height:0px; padding:0px; }
/*desktop footer*/
div.footer { padding-top:2vw; text-align:center; font-size:1.1vw; }

img.img_social {width:1.4vw;  vertical-align:-0.4vw; margin-left:0.4vw; }
table,tr,td  {font-size:1.05vw; }

/* desktop easyread*/
p.easyread { padding-left: 4vw; padding-right: 4vw; }
/* shapeshifter photo, desktop*/
 .shapeshifter-div {
  overflow: hidden;
  width: 100%;
  height: 40vw;

  /* adjust as needed */
  /*object-position: 50% 90%;*/
}
 img.shapeshifter-img {
    width: 100%;
  height: 100%;
  object-fit: cover;

  /* adjust as needed */
  object-position: 50% 90%;
  width: 100%;
  /* adjust values as needed */
  /*margin: 12% 0 0 -13%;*/
}

/* ipad, landscape properties end*/
body { background-image: url("../images/desktop_back.jpg"); background-size: cover; }