* {
     font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
     margin: 0;
 }

 html {
     font-size: 17px;
 }

 body {
     background: #fff;
     /* font-size: 2em; */
     font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
     /* zoom: 200%; */
 }

 p a {
     font-size: 1em;
 }

 #indexul,
 #indexul100,
 #indexul200 {
     margin: 0;
 }

 a:link {
     text-decoration: none;
     /* font-size: 1.8em; */
 }

 a:hover {
     color: #0077B5;
 }

 .spanhere {
     width: 100%;
 }

 #htitle2,
 #htitle200,
 #htitle300 {
     text-align: center;
     /* font-size: 2.8vw; was 25 px */
     padding-top: 15px;
     font-size: 5vmin;
     padding-bottom: 10px;
 }

 #aboutbio {
     font-size: 2rem;
 }

 .wrapper {
     width: 100%;
     max-width: 960px;
     margin: 0 auto;
 }

 /* #nav01 {
   background: #333;
} */

 #nav01 ul,
 #nav0100 ul,
 #nav0200 ul {
     list-style-type: none;
     padding: 0;
     overflow: hidden;
     margin: 0;
     display: flex;
     /*was in flex css */
     justify-content: space-around;
     /*was in flex css*/
 }

 #nav01 a,
 #nav0100 a,
 #nav0200 a {
     text-decoration: none;
     text-align: center;
     color: #fff;
     display: block;
     padding: 10px;
     background-color: #777;
     /* font-size: 1.8rem; */
     font-size: 3.5vmin;
 }

 #nav01 a:hover,
 #nav0100 a:hover,
 #nav0200 a:hover {
     background-color: #555;
 }

 /* flex styles */

 #nav01 li,
 #nav0100 li,
 #nav0200 li {
     flex: 1 1 0;
 }

 .wtf {
     padding-top: 10px;
     width: 90%;
     margin: 0 auto;
 }

 #aboutbio {
     text-align: center;
 }

 .huh {
     padding-bottom: 10px;
     font-size: 1.6rem;
     text-align: center;
     line-height: 1.8rem;
 }

 .huhfirst {
     padding-bottom: 10px;
     font-size: 1.6rem;
     text-align: left;
     line-height: 1.8rem;
 }

 .huhred {
    padding-bottom: 5px;
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.8rem;
}

 .chiz {
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     font-size: 1.5rem;
     text-align: center;
     line-height: 1.6rem;
 }

 /* a[href^="mailto:"]::after {
    content: " (📨↗️&#x1F354)";
    <p>(&#x1F354)"</p>
    incoming envelope, northeast arrow, ????
} */

 .huhnews {
     padding-bottom: 5px;
     font-size: 1.27rem;
     text-align: center;
     line-height: 1.6rem;
 }

 .news {
     border: 3px solid red;
     width: 80%;
     height: auto;
     margin-left: auto;
     margin-right: auto;
     margin-top: 10px;
 }

 #fbicn {
     width: 15%;
     padding-left: 5px;
     padding-top: 2px;
     vertical-align: text-bottom;
     /* padding-bottom: -10px; */
 }

 .huh1 {
     padding-top: 10px;
     padding-bottom: 10px;
     font-size: 1.8rem;
     text-align: left;
 }

 .huhbox {
     padding-top: 10px;
     font-size: 1.6rem;
     text-align: center;
     line-height: 2.1rem;
 }

 /* .huhboxi {
    font-size: 1.6rem;
} */

 #indexhome,
 #indexhome300 {
     position: relative;
 }

 #who,
 #who300 {
     width: 40%;
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-top: 15px;
 }


 #whoabout {
     width: 40%;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

 #social {
     width: 80%;
 }

 #social ul {
     position: relative;
     margin: 0;
     padding: 0 0 0 10%;
     /*was 0 all around*/
     display: flex;
 }

 #social ul li {
     position: relative;
     list-style: none;
     width: 60px;
     height: 60px;
     margin: 0 90px 0 0;
     /* was 30 originally */
     transform: rotate(-30deg) skew(25deg);
     /*background: #ccc;*/
 }

 #social ul li span {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     transition: 0.5s;
     display: flex !important;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 3vw !important;
 }

 #social ul li:hover span {
     box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
 }

 #social ul li:hover span:nth-child(5) {
     transform: translate(40px, -40px);
     opacity: 1;
 }

 #social ul li:hover span:nth-child(4) {
     transform: translate(30px, -30px);
     opacity: 0.8;
 }

 #social ul li:hover span:nth-child(3) {
     transform: translate(20px, -20px);
     opacity: 0.6;
 }

 #social ul li:hover span:nth-child(2) {
     transform: translate(10px, -10px);
     opacity: 0.4;
 }

 #social ul li:hover span:nth-child(1) {
     transform: translate(0, 0);
     opacity: 0.2;
 }

 #social ul li:nth-child(1) span {
     background: #3b5999;
 }

 #social ul li:nth-child(2) span {
     background: #55acee;
 }

 #social ul li:nth-child(3) span {
     background: #dd4b39;
 }

 #social ul li:nth-child(4) span {
     background: #0077B5;
 }

 #social ul li:nth-child(5) span {
     background: #e4405f;
 }

 #dave,
 #dave300,
 #dave200 {
     /* //background-color: #777777; */
     /* font-size: 3rem; */
     width: 100%;
     padding: 15px 0 0 0;
     margin: 0;
 }


 #lilfoot,
 #lilfoot300,
 #lilfoot200 {
     margin-left: 5%;
     /* font-size: 2vw; */
     margin-right: 10%;
     /* background: #333; */
     text-align: left;
 }

 #lilfoot200 ul li a span {
     font-size: 1.2rem;
 }

 #lilfoot ul,
 #lilfoot300 ul,
 #lilfoot200 ul {
     overflow: hidden;
     display: flex;
     justify-content: space-around;
 }

 /* footer {
    border-top: 5px solid blue;
} */

 /* header {
    border-bottom: 5px solid blue;
} */

 #lilfoot ul li,
 #lilfoot300 ul li,
 #lilfoot200 ul li {
     font-size: 1.2rem;
     text-decoration: none;
     list-style: none;
     flex: 1 1 0;
     display: block;
     color: #000;
 }

 #ecn,
 #ecn300,
 #ecn200 {
     text-align: right;
     /* font-size: 1.5vw; */
 }

 .strongindex {
     font-size: 1em;
     font-weight: bold;
 }

 #lilfoot img,
 #lilfoot300 img,
 #lilfoot200 img {
     padding-top: 3%;
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 25%;
 }

 #pghmuseum {
     width: 6%;
     display: block;
     margin-left: auto;
     margin-right: -60px;
     margin-top: -6%;
 }


 /* part of test for jquery*/
 html {
     box-sizing: border-box;
 }

 *,
 *:before,
 *:after {
     box-sizing: inherit;
 }

 .hjq {
     margin: 0 0 5px;
 }

 .testjq {
     font-weight: normal;
     margin: 5px 0;
 }

 /* use for landscape color change? */
 .post {
     background: #ffffff;
     text-align: center;
     max-width: 250px;
     margin: 10px auto;
     padding: 5px;
     /* border-radius: 2px; */
     border: 2px red solid;
     /* box-shadow: 0 2px 20px 0 rgba(0,0,0, 0.4); */
 }

 .minipost {
     background: #ffffff;
     text-align: center;
     max-width: 170px;
     margin: 1px auto;
     padding: 1px;
     border: 2px red solid;
 }

 .testjqmini {
     font-size: 12px;
     margin: 1px 0;
 }

 span {
     color: #000;
 }

 /* end of width and height test CSS */

 /* .royalSlider img {
    border: 10px dotted black;
} */
 /* Need to understand this!!!!! */
 .rsImg {
     display: block;
     margin-top: 20px !important;
     /* This margin pushes the img down from the top.  Was 10, may change again 11/7/20 */
     margin-left: auto !important;
     margin-right: auto !important;
     /* pink border around all images to define the rsImb limits */
     /* border: 5px pink solid; */

     /* was 100% but commented out, width & the same for height, 60% seems to work best for laptops, commented out for normal use*/
     /* width: 100% !important; */
     /* //height: 100% !important; */
 }

 .royalSlider {
     height: 660px !important;
     /* 660 to start*/
     width: 100% !important;
     /* touch-action: pinch-action pan-y !important; */
     /* border: 2px blue solid; */
 }

 /* .rsContainer {
    red line around starter image
     border: 3px red solid;
} */


 /* .rsSlide {
    yellow box that was around slider space
    border: 5px solid yellow;
} */

 /*Experiment to target a specific painting. Did not work */
 /* .rsSlide .rsActiveSlide #pic09 {
    height: 9px !important;
    width: 9px !important;
    display: none;
} */

 #para2 {
     display: none;
 }

 #paraipad {
     display: none;
 }

 /*hide the thumbnails until I figure out what may have happened.  The thumbnails worked with ,rsNav commebted out on 7/23/2020*/
 /*All the thumbnails matched up with main image through 111 images.  Uncommented the same day*/
 .rsNav {
     display: none;
     width: 0 !important;
     height: 0 !important;
 }

 /*added this class to be ready for x of y.  Just wanted to see if this version would behave with this class added.*/
 .rsSlideCount {
     color: #000;
     /* background: #fff; */
     font-size: 20px;
     pointer-events: none;
     padding: 10px;
     position: absolute;
     bottom: -50px;
     right: 2px;
     /* This moves the rsslidecount right or left on the bottom.  Negative - values move it farther right.  Positive values move it left. */
 }

 .newInfo {
     /* reference line 1859*/
     display: none;
     color: #3b0000;
     /* was crimson */
     /* background: #dd4b39; */
     font-size: 16px;
     padding: 0px;
     position: absolute;
     bottom: -42px;
     Width: 440px;
     height: 45px;
     left: 2px;
     line-height: 110%;

 }

 .rsDefault .rsGCaption {
     bottom: 15px;
     /* was 6*/
     left: 10px;
     /* was 6*/
     /* padding: 2px 4px; first number was 2 */
     /* padding-bottom: 20px; */
     font-size: .9rem;
 }

 em {
     font-size: 1.03rem;
 }



 /* media compare calls follow.  The first one is for laptops where typical height is about 600 to 700px, height was 610
red border is .rsContainer and pink border is rsImg which is same as .royalSilder img except .royalSlider img includes the thumbnails.
yellow border is .rsSlide acreage and the blue border is .royalSlider overall acreage.*/

 /*MediaCall01*/
 /* @media screen and (max-height: 600px) and (min-width: 1200px) { */
 @media screen and (max-height: 730px) and (min-width: 1400px) {
     .rsImg {
         /* display: block; */
         margin-top: 5px !important;
         /* border: 5px dotted blue; */
         /* margin-left: auto !important; */
         /* margin-right: auto !important; */
         /* width: 85% !important; */
         /* was 100% but commented out, width & the same for height, 80% seems to work best for laptops*/
         /* height: 90% !important; */
     }


     /* the selector below is the one that greatly effects the total slider and image and thumbnail serction height, use with fit-if-smaller*/
     /* .royalSlider { */
     /* height: 600px !important; */
     /* 660 to start*/
     /* width: 550px !important; */
     /* } */

     .rsNav {
         display: none;
     }

     .royalSlider img {
         height: auto !important;
         width: 70% !important;
     }

     .rsDefault .rsGCaption {
         bottom: 33px;
         /* was 10 */
         /* higher the px, more text rises in viewport */
         /* was 6*/
         left: 10px;
         /* was 6*/
         /* padding: 2px 4px; first number was 2 */
         /* padding-bottom: 20px; */
         /* font-size: 16px; */
     }

     #paraipad {
         display: none;
     }

     /* next two classes in this media call not implemented yet */
     /* changes yellow box size, thus allowing caption and newInfo text to rise by changing height*/
     .rsSlide {
         height: 88%;
         width: 100%
     }

     /* changing height will alow the newInfo text to rise up*/
     .royalSlider {
         height: 615px !important;
         /* 660 to start*/
         width: 100% !important;
         /* touch-action: pinch-action pan-y !important; */
         /* border: 2px blue solid; */
     }


 }


 @media screen and (max-width: 1300px) {
     /* header {
        border-bottom: 5px solid #90a049;
    } */

     /* footer{
        border-top: 5px solid #90a049;
    } */

     .huh {
         /*main text paragraphs*/
         line-height: 1.6rem;
         font-size: 1.4rem;
     }

     .huhfirst {
         font-size: 1.4rem;
         text-align: left;
         line-height: 1.6rem;
     }

     .chiz {
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         font-size: 1.5rem;
         text-align: center;
         line-height: 1.6rem;
     }

     .huhnews {
         font-size: 1.2rem;
         line-height: 1.4rem;
         text-align: center;
     }

     .huhred {
        font-size: 1.4rem;
        line-height: 1.4rem;
        text-align: center;
    }

     .huhbox {
         /*text inside red box*/
         line-height: 1.6rem;
         font-size: 1.4rem;
     }

     .huh1 {
         /* Follow us on text*/
         font-size: 1.8em;
     }
 }

 /* this media query had a conflict with the iPad in landscape mode query below at or around line 1073 */
 @media screen and (max-height: 900px) and (max-width: 1100px) {
     /* @media screen and (min-width:300px) and (max-width: 1100px) { */
     /* header {
        border-bottom: 5px solid #55acee;
    } */

     /* footer {
        border-top: 50px solid #55acee;
    } */

     .huh {
         line-height: 1.6rem;
         font-size: 1.4rem;
     }

     .huhfirst {
         font-size: 1.4rem;
         text-align: left;
         line-height: 1.6rem;
     }

     .chiz {
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         font-size: 1.5rem;
         text-align: center;
         line-height: 1.6rem;
     }

     .huhnews {
         font-size: 1.2rem;
         line-height: 1.3rem;
         text-align: center;
     }


     .huhbox {
         line-height: 1.6rem;
         font-size: 1.4rem;
     }

     .huh1 {
         font-size: 1.8em;
     }

     #social ul li {
         margin: 0 80px 0 0;
     }

     #social ul {
         padding: 0 0 0 13%;

     }

     #lilfoot ul li {
         font-size: 1rem;
     }

     #para1 {
         display: block;
     }

     #para2 {
         display: none;
     }

     #paraipad {
         display: none;
     }

     #pghmuseum {
         width: 7%;
         display: block;
         margin-left: auto;
         margin-right: -60px;
         margin-top: -6%;
     }


 }

 @media screen and (max-width: 940px) {

     .col,
     .main-features li {
         margin: 10px 5px 10px 20px;
         width: 90%;
     }

     /* It's unclear to me what these do but adding them reduces the space 
    between objects and moves them closer together. */
     .page .row {
         margin-bottom: 0px;
     }

     /* selector below added by DEG this selector seems to control space around image slider in smaller devices****/
     .fwImage {
         margin: 0 !important;
         padding: 0px 0px 0px 30px;
     }

     #social ul li {
         width: 50px;
         height: 50px;
         margin: 0 60px 0 0;
     }

     /* header {
        border-bottom: 5px solid #ecdd09;
    } */

     /* footer {
        border-top: 5px solid #ecdd09;
    } */

     .huh {
         line-height: 1.4rem;
         font-size: 1.25rem;
     }

     .huhfirst {
         font-size: 1.25rem;
         text-align: left;
         line-height: 1.4rem;
     }

     .chiz {
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         font-size: 1.3rem;
         text-align: center;
         line-height: 1.4rem;
     }

     .huhnews {
         font-size: 1.1rem;
         line-height: 1.3rem;
         text-align: center;
     }


     .huh1 {
         font-size: 1.5rem;
     }

     .huhbox {
         line-height: 1.4rem;
         font-size: 1.25rem;
     }

     #redbox {
         width: 100%;
     }

     #lilfoot ul li {
         font-size: 1rem;
     }

     #social ul {
         padding: 0 0 0 14%;

     }

     #para1 {
         display: none;
     }

     #paraipad {
         display: block;
     }

     #para2 {
         display: block;
     }


     .rsImg {
         margin-top: 10px !important;
         margin-left: auto !important;
         margin-right: auto !important;
     }

     .royalSlider {
         height: 700px !important;
         width: 105% !important;
     }

     .rsSlideCount {
         font-size: 18px;
         padding: 10px;
         position: absolute;
         bottom: -40px;
         right: 2px;
     }

     .newInfo {
         /* reference line 1805*/
         display: none;
         color: #3b0000;
         /* was crimson */
         /* background: #dd4b39; */
         font-size: 13px;
         padding: 0px;
         position: absolute;
         bottom: -39px;
         Width: 400px;
         height: 45px;
         left: 2px;
         line-height: 100%;

     }

 }

 @media screen and (max-width: 810px) {

     .col,
     .main-features li {
         margin: 10px 5px 10px 20px;
         width: 90%;
     }

     /* It's unclear to me what these do but adding them reduces the space 
    between objects and moves them closer together. */
     .page .row {
         margin-bottom: 0px;
     }

     /* selector below added by DEG this selector seems to control space around image slider in smaller devices****/
     .fwImage {
         margin: 0 !important;
         padding: 0px 0px 0px 30px;
     }

     #social ul li {
         width: 40px;
         height: 40px;
         margin: 0 50px 0 0;
     }

     /* header {
        border-bottom: 5px solid #44095f;
    } */

     /* footer {
        border-top: 5px solid #44095f;
    } */

     .huh {
         line-height: 1.4rem;
         font-size: 1.25rem;
     }

     .huhfirst {
         font-size: 1.25rem;
         text-align: left;
         line-height: 1.4rem;
     }

     .chiz {
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         font-size: 1.3rem;
         text-align: center;
         line-height: 1.4rem;
     }

     .huhnews {
         font-size: 1.1rem;
         line-height: 1.3rem;
         text-align: center;
     }


     .huh1 {
         font-size: 1.3rem;
     }

     .huhbox {
         line-height: 1.4rem;
         font-size: 1.25rem;
     }

     #para1 {
         display: none;
     }

     #paraipad {
         display: block;
     }

     #para2 {
         display: block;
     }

     #fbicn {
         width: 1%;
         /* padding-left: 5px;
        padding-top: 2px; */
         vertical-align: text-bottom;
         /* padding-bottom: -10px; */
     }

     #lilfoot ul li,
     #lilfoot300 ul li,
     #lilfoot200 ul li {
         font-size: 1rem;
     }

     #lilfoot200 ul li a span {
         font-size: 1rem;
     }

     #social ul {
         padding: 0 0 0 14%;
     }

     #social ul li {
         width: 50px;
         height: 50px;
         margin: 0 60px 0 0;
     }

     .rsImg {
         margin-top: 10px !important;
         margin-left: auto !important;
         margin-right: auto !important;
     }

     .royalSlider {
         height: 690px !important;
         width: 105% !important;
     }

     /* new location for hiding thumbnails.  Was first in the max-width: 550 section.  Moved again to 550*/
     /* .rsNav {
         display: none;
         width: 0 !important;
         height: 0 !important;
    } */

     /* new location to hide the full screen option.  Was in the max-width: 485 section*/

     /* .rsDefault .rsFullscreenBtn {
        display: none;
        cursor: none;
    }

    .rsDefault .rsFullscreenIcn {
        display: none;
        cursor: none;
    } */

     #htitle2,
     #htitle200,
     #htitle300 {
         font-size: 1.6rem;
     }

     #nav01 a,
     #nav0100 a,
     #nav0200 a {
         font-size: 1.9rem;
     }

     #pghmuseum {
         width: 8%;
         display: block;
         margin-left: auto;
         margin-right: -60px;
         margin-top: -8%;
     }

 }

 @media screen and (max-width: 770px) {
     /* header {
         border-bottom: 5px dotted #44095f;
    } */

     /* footer {
         border-top: 5px dotted #44095f;
    } */

     .rsImg {
         margin-top: 10px !important;
         margin-left: auto !important;
         margin-right: auto !important;
     }

     .royalSlider {
         height: 640px !important;
         width: 100% !important;
     }


 }


 /*added by DEG 12/26/19 to cover landscape ipads*/
 @media screen and (max-width: 710px) {

     .col,
     .main-features li {
         margin: 10px 5px 10px 20px;
         width: 90%;
     }


     /* It's unclear to me what these do but adding them reduces the space 
    between objects and moves them closer together. */
     .page .row {
         margin-bottom: 0px;
     }

     /* selector below added by DEG this selector seems to control space around image slider in smaller devices****/
     .fwImage {
         margin: 0 !important;
         padding: 0px 0px 0px 30px;
     }

     #social ul li {
         width: 45px;
         height: 45px;
         margin: 0 60px 0 0;
     }

     /* header {
        border-bottom: 5px solid green;
    } */

     /* footer {
        border-top: 5px solid green;
    } */

     .huh {
         padding-bottom: 5px;
         font-size: 1.25rem;
         line-height: 1.45rem;
     }

     .huhfirst {
         padding-bottom: 5px;
         font-size: 1.25rem;
         text-align: left;
         line-height: 1.45rem;
     }

     .chiz {
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         font-size: 1.3rem;
         text-align: center;
         line-height: 1.45rem;
     }

     #paraipad {
         display: none;
     }


     .huhnews {
         font-size: 1.0rem;
         line-height: 1.25rem;
         text-align: center;
     }


     .huhbox {
         line-height: 1.45rem;
         font-size: 1.25rem;
         padding-top: 3px;
     }

     #lilfoot ul li,
     #lilfoot300 ul li,
     #lilfoot200 ul li {
         font-size: .9rem;
     }

     #lilfoot200 ul li a span {
         font-size: .9rem;
     }

     #nav01 a,
     #nav0100 a,
     #nav0200 a {
         font-size: 1.8rem;
     }

     .rsImg {
         margin-top: 10px !important;
         margin-left: auto !important;
         margin-right: auto !important;
     }

     .royalSlider {
         height: 680px !important;
         width: 105% !important;
     }

     .rsSlideCount {
         font-size: 16px;
         padding: 10px;
         position: absolute;
         bottom: -42px;
         right: 2px;
     }

     .newInfo {
         /* reference line 1805*/
         display: none;
         color: #3b0000;
         /* was crimson */
         /* background: #dd4b39; */
         font-size: 13px;
         padding: 0px;
         position: absolute;
         bottom: -40px;
         Width: 400px;
         height: 45px;
         left: 2px;
         line-height: 100%;

     }

 }

 @media screen and (max-width: 550px) {

     .col,
     .main-features li {
         margin: 10px 5px 10px 20px;
         width: 90%;
     }

     .page .row {
         margin-bottom: 0px;
     }

     .fwImage {
         margin: 0 !important;
         padding: 0px 0px 0px 30px;
     }

     /* header {
         border-bottom: 10px solid red;
    } */

     /* footer {
        border-top: 5px solid red;
    } */

     #social ul li {
         margin: 0 50px 0 0;
     }

     .huh {
         padding-bottom: 5px;
         font-size: 1.1rem;
         line-height: 1.4rem;
     }

     .huhfirst {
         padding-bottom: 5px;
         font-size: 1.1rem;
         text-align: left;
         line-height: 1.4rem;
     }

     .chiz {
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         font-size: 1.2rem;
         text-align: center;
         line-height: 1.4rem;
     }

     .huhnews {
         font-size: 1.0rem;
         line-height: 1.25rem;
         text-align: center;
     }

     .huhbox {
         line-height: 1.4rem;
         font-size: 1.1rem;
         padding-top: 3px;
     }

     #lilfoot ul li,
     #lilfoot300 ul li,
     #lilfoot200 ul li {
         font-size: .8rem;
     }

     #lilfoot200 ul li a span {
         font-size: .8rem;
     }

     .huh1 {
         font-size: 1.2rem;
     }


     #nav01 a,
     #nav0100 a,
     #nav0200 a {
         font-size: 1.4rem;
     }

     #social ul {
         padding: 0 0 0 16%;
     }

     #aboutbio {
         font-size: 1.5rem;
     }

     /* first occurence of hiding the thumbnails */
     .rsNav {
         display: none;
         width: 0 !important;
         height: 0 !important;
     }

     /* hide full screen options*/

     .rsDefault .rsFullscreenBtn {
         display: none;
         cursor: none;
     }

     .rsDefault .rsFullscreenIcn {
         display: none;
         cursor: none;
     }


     .royalSlider {
         height: 570px !important;
         width: 105% !important;
     }

     .rsDefault .rsGCaption {
         bottom: 1px;
         /* was 6*/
         left: 10px;
         /* was 6*/
         /* padding: 2px 4px; first number was 2 */
         font-size: 14px;
     }

     em {
         font-size: .8rem
     }

     #pghmuseum {
         width: 10%;
         display: block;
         margin-left: auto;
         margin-right: -60px;
         margin-top: -10%;
     }

 }

 @media screen and (max-width: 485px) {

     /* header {
        border-bottom: 10px solid #e2de0a46;
    } */

     /* footer {
        border-top: 10px solid #e2de0a46;
    } */

     .huh {
         padding-bottom: 5px;
         font-size: 1rem;
         line-height: 1.3rem;
     }

     .huhfirst {
         padding-bottom: 5px;
         font-size: 1rem;
         text-align: left;
         line-height: 1.3rem;
     }

     .chiz {
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
         font-size: 1.1rem;
         text-align: center;
         line-height: 1.35rem;
     }

     .huhnews {
         font-size: .9rem;
         line-height: 1.1rem;
         text-align: center;
     }

     .huhbox {
         line-height: 1.3rem;
         font-size: 1rem;
         padding-top: 3px;
     }

     #lilfoot ul li,
     #lilfoot300 ul li,
     #lilfoot200 ul li {
         font-size: .7rem;
         line-height: .9rem;
     }

     #lilfoot200 ul li a span {
         font-size: .7rem;
         /* line-height: .9rem; */
     }

     .huh1 {
         font-size: 1.2rem;
     }

     #social ul {
         padding: 0 0 0 17%;
     }

     #lilfoot,
     #lilfoot300,
     #lilfoot200 {
         margin-left: 0;
         margin-right: 5%;
         text-align: left;
     }

     #lilfoot ul li,
     #lilfoot300 ul li,
     #lilfoot200 ul li {
         flex: auto;
     }

     #lilfoot,
     #lilfoot300,
     #lilfoot200 {
         margin-left: 0;
         margin-right: 0;
     }

     #ecn,
     #ecn300,
     #ecn200 {
         text-align: center;
     }

     #lilfoot img,
     #lilfoot300 img,
     #lilfoot200 img {
         display: none;
         width: 0;
         margin: 0;
         padding: 0;
     }

     #lilfoot #centerli {
         width: 0;
         margin: 0;
         padding: 0;
         display: none;
     }

     #social ul li {
         width: 30px;
         height: 30px;
         margin: 0 40px 0 0;
     }

     ul,
     ol {
         margin: 0 0 12px 24px;
     }

     .rsImg {
         margin-top: 10px !important;
         margin-left: auto !important;
         margin-right: auto !important;
     }

     .royalSlider {
         height: 500px !important;
         /* width: 380px !important; */
         width: 105% !important;
     }

     .rsSlideCount {
         font-size: 14px;
         padding: 10px;
         position: absolute;
         bottom: -40px;
         right: 2px;
     }

     .newInfo {
         /* reference line 1805*/
         display: none;
         color: #3b0000;
         /* was crimson */
         /* background: #dd4b39; */
         font-size: 12px;
         padding: 0px;
         position: absolute;
         bottom: -40px;
         Width: 400px;
         height: 45px;
         left: 2px;
         line-height: 100%;

     }


 }

 /* This next @media call is for iphone like devices in landscape mode.  Should eliminate the thumbs and full screen options.  Didn't work at first.
Need to fix the 825 to say 825px but consider using a max-height of say 500px and a max-width of 900px current settings work ok
red border is .rsContainer and pink border is rsImg which is same as .royalSilder img except .royalSlider img includes the thumbnails.
yellow border is .rsSlide acreage and the blue border is .royalSlider overall acreage.*/
 @media only screen and (max-width: 850px) and (max-height: 450px) and (orientation: landscape) {
     /* hide thumbnail NAV and full screen options*/

     .rsDefault .rsFullscreenBtn {
         display: none;
         cursor: none;

     }

     .rsDefault .rsFullscreenIcn {
         display: none;
         cursor: none;
     }

     .rsNav {
         display: none;
         width: 0 !important;
         height: 0 !important;
     }

     .rsImg {
         display: block;
         margin-top: 5px !important;
         margin-left: auto !important;
         margin-right: auto !important;
         /* border: 5px dotted orange; */
         /* width: 80% !important; */
         /* height: 80% !important; */
     }


     /* the selector below is the one that greatly effects the total slider and image and thumbnail serction height, use with fit-if-smaller*/
     .royalSlider img {
         height: auto !important;
         /* was 65% below */
         width: 50% !important;
         /* border: 10px dotted black; */
     }

     /* see line 342 or so for border color and commands */
     .royalSlider {
         height: 360px !important;
         /* was 415 below changing this width also effects nthe img % above.  The wider the royalSlider, the greater the percentage is */
         width: 500px !important;
         margin-left: auto !important;
         margin-right: auto !important;
     }

     /* .rsContainer {
        height: 350px;
        width: 400px;
    } */

     .rsSlide {
         height: 360px !important;
     }

     #paraipad {
         display: none;
     }


 }

 /* This next @media call is for smaller phones like the Samsung S6 in landscape mode. Eliminate the thumbs and full screen options.
This should work for smaller iPhones also but don't know if I can check.  I'll use developer tools.
red border is .rsContainer and pink border is rsImg which is same as .royalSilder img except .royalSlider img includes the thumbnails.
yellow border is .rsSlide acreage and the blue border is .royalSlider overall acreage.*/
 @media only screen and (min-width: 590px) and (max-width: 680px) and (min-height: 200px) and (max-height: 340px) and (orientation: landscape) {
     /* hide thumbnail NAV and full screen options*/

     /* header {
        border-bottom: 5px dashed #691b9c;
    } */

     /* footer {
        border-top: 5px dashed #691b9c;
    } */

     .rsDefault .rsFullscreenBtn {
         display: none;
         cursor: none;

     }

     .rsDefault .rsFullscreenIcn {
         display: none;
         cursor: none;
     }

     .rsNav {
         display: none;
         width: 0 !important;
         height: 0 !important;
     }

     .rsImg {
         display: block;
         margin-top: 5px !important;
         margin-left: auto !important;
         margin-right: auto !important;
         /* border: 5px dotted #fa2105; */
         /* width: 80% !important; */
         /* height: 80% !important; */
     }


     /* the selector below is the one that greatly effects the total slider and image and thumbnail serction height, use with fit-if-smaller*/
     .royalSlider img {
         height: auto !important;
         /* was 60% below */
         width: 50% !important;
         /* border: 10px dotted black; */
     }

     .royalSlider {
         height: 320px !important;
         /* was 390 below */
         width: 500px !important;
         margin-left: auto !important;
         margin-right: auto !important;
     }

     /* .rsContainer {
        height: 350px;
        width: 400px;
    } */

     .rsSlide {
         height: 320px !important;
     }


 }


 /* This next @media call is for Kindle like tablets in landscape mode.  Eliminate the thumbs and full screen options.  Didn't work at first.
Had to try min-width & max width and same for height to focus correctly 
red border is .rsContainer and red dotted border is rsImg which is same as .royalSilder img except .royalSlider img includes the thumbnails.
yellow border is .rsSlide acreage and the blue border is .royalSlider overall acreage.*/
 @media only screen and (min-width: 900px) and (max-width: 1100px) and (min-height: 400px) and (max-height: 500px) {
     /* hide thumbnail NAV and full screen options*/

     /* header {
        border-bottom: 5px dashed #0f3301;
    } */

     /* footer {
        border-top: 5px dashed #0f3301;
    } */

     .rsDefault .rsFullscreenBtn {
         display: none;
         cursor: none;

     }

     .rsDefault .rsFullscreenIcn {
         display: none;
         cursor: none;
     }

     .rsNav {
         display: none;
         width: 0 !important;
         height: 0 !important;
     }

     .rsImg {
         display: block;
         margin-top: 5px !important;
         margin-left: auto !important;
         margin-right: auto !important;
         /* border: 5px dotted red; */
         /* width: 80% !important; */
         /* height: 80% !important; */
     }


     /* the selector below is the one that greatly effects the total slider and image and thumbnail serction height, use with fit-if-smaller*/
     .royalSlider img {
         height: auto !important;
         width: 80% !important;
         /* border: 10px dotted black; */
     }

     .royalSlider {
         height: 450px !important;
         width: 410px !important;
         margin-left: auto !important;
         margin-right: auto !important;
     }

     /* .rsContainer {
        height: 350px;
        width: 400px;
    } */

     .rsSlide {
         height: 450px !important;
     }

     #paraipad {
         display: none;
     }


 }


 /* iPads in Landscape mode min-width was 950*/
 @media only screen and (min-width: 1000px) and (max-width: 1060px) and (min-height: 600px) and (max-height: 800px) {
     /* @media only screen and (max-width: 1100px) and (max-height: 800) and { */
     /* hide thumbnail NAV and full screen options*/
     /* Issue on 5/26/20 where css from this section creeping into main page, added max-height above to test*/

     .rsDefault .rsFullscreenBtn {
         display: none;
         cursor: none;

     }

     .rsDefault .rsFullscreenIcn {
         display: none;
         cursor: none;
     }

     .rsNav {
         display: none;
         width: 0 !important;
         height: 0 !important;
     }

     .rsImg {
         display: block;
         margin-top: 5px !important;
         margin-left: auto !important;
         margin-right: auto !important;
         /* border: 50px dotted pink; */

         /* width: 80% !important; */
         /* height: 80% !important; */
     }


     /* the selector below is the one that greatly effects the total slider and image and thumbnail serction height, use with fit-if-smaller*/
     .royalSlider img {
         height: auto !important;
         width: 80% !important;
         /* border: 10px dotted black; */
     }

     .royalSlider {
         height: 520px !important;
         width: 450px !important;
     }

     /* .rsContainer {
        height: 350px;
        width: 400px;
    } */

     .rsSlide {
         height: 520px !important;
     }

     #paraipad {
         display: none;
     }

     .rsSlideCount {
         font-size: 14px;
         padding: 10px;
         position: absolute;
         bottom: -50px;
         right: 2px;
     }


 }


 /*red border is .rsContainer and pink border is rsImg which is same as .royalSilder img except .royalSlider img includes the thumbnails. yellow border is .rsSlide acreage and the blue border is .royalSlider overall acreage.*/
 @media screen and (max-width: 440px) {

     /* header {
        border-bottom: 15px solid #d64c1631;
    } */

     /* footer {
        border-top: 15px solid #d64c1631;
    } */

     #htitle2,
     #htitle200,
     #htitle300 {
         font-size: 1.2rem;
     }

     #aboutbio {
         font-size: 1.3rem;
     }

     .rsImg {
         display: block;
         margin-top: 2px !important;
         margin-left: auto !important;
         margin-right: auto !important;
     }

     .royalSlider {
         height: 500px !important;
         width: 105% !important;
         /* touch-action: pan-x pan-y pinch-action !important; */
         /* pointer-events: all !important; */
     }

     .rsDefault .rsFullscreenBtn {
         display: none;
         cursor: none;

     }

     .rsDefault .rsFullscreenIcn {
         display: none;
         cursor: none;
     }

     .royalSlider img {
         height: auto !important;
         width: 90% !important;
         /* touch-action: pan-y pinch-action !important;
        pointer-events: all; */
     }

     /* .rsContainer {
        height: 450px;
        width: 450px;
    } */

     .rsSlide {
         height: 440px !important;
     }

     /* the social ul li ID settings control the space between the social icons */
     #social ul li {
         width: 30px;
         height: 30px;
         margin: 0 30px 0 0;
     }

     /* the social ul ID controls the padding on each side and between the social icons */
     #social ul {
         padding: 0 0 0 10%;
     }

     .rsSlideCount {
         font-size: 14px;
         padding: 10px;
         position: absolute;
         bottom: -50px;
         right: 2px;
     }
 }

 @media screen and (max-width: 425px) {

     /* header {
        border-bottom: 15px dashed #d64c1631;
    } */

     /* footer {
        border-top: 15px dashed #d64c1631;
    } */

     .rsImg {
         display: block;
         margin-top: 5px !important;
         margin-left: auto !important;
         margin-right: auto !important;
         /* touch-action: pan-y pinch-action !important; */
         /* pointer-events: all; */
         /* width: 100%;
        height: 100%; */
     }

     .royalSlider {
         height: 460px !important;
         /* width: 350px !important; */
         width: 100% !important;
         /* touch-action: pan-x pan-y pinch-action !important; */
         /* pointer-events: all !important; */
     }

     /* .royalSlider img {
        height: auto !important;
        width: 90% !important;
        touch-action: pan-x pan-y pinch-action !important;
        pointer-events: all !important;
    } */


     .rsDefault .rsFullscreenBtn {
         display: none;
         cursor: none;

     }

     .rsDefault .rsFullscreenIcn {
         display: none;
         cursor: none;
     }

     .rsSlideCount {
         font-size: 13px;
         padding: 10px 0 0 0;
         position: absolute;
         bottom: -40px;
         right: 2px;
     }

     .newInfo {
         /* reference line 499 */
         /* background: #dd4b39; */
         font-size: 12px;
         padding: 0px;
         padding-top: 0px;
         position: absolute;
         bottom: -26px;
         Width: 350px;
         height: 30px;
         left: -2px;
         line-height: 100%;


     }
 }

 @media screen and (max-width: 390px) {

     .royalSlider {
         height: 430px !important;
         /* width: 200px !important; */
         width: 100% !important;
         /* touch-action: pinch-action pan-y !important; */
     }

     /* .royalSlider img {
        height: auto !important;
        width: 90% !important;
        touch-action: pan-y pinch-action !important;
        pointer-events: all;
    } */

     .rsDefault .rsFullscreenBtn {
         display: none;
         cursor: none;

     }

     .rsDefault .rsFullscreenIcn {
         display: none;
         cursor: none;
     }

     /* header {
        border-bottom: 15px dashed #000000;
    } */

     /* footer {
        border-top: 15px dashed #000000;
    } */

     /* .royalSlider {
        width: 100%;
        height: auto;
        margin: 10px auto;
    } */

     /* the social ul li ID settings control the space between the social icons */
     #social ul li {
         width: 25px;
         height: 25px;
         margin: 0 30px 0 0;
     }

     .rsSlideCount {
         font-size: 13px;
         padding: 10px 0 0 0;
         position: absolute;
         bottom: -40px;
         right: 2px;
     }

     .newInfo {
         /* reference line 1805*/
         display: none;
         color: #3b0000;
         /* was crimson */
         /* background: #dd4b39; */
         font-size: 11px;
         padding: 0;
         position: absolute;
         bottom: -40px;
         Width: 400px;
         height: 45px;
         left: 2px;
         line-height: 100%;

     }

     #nav01 a,
     #nav0100 a,
     #nav0200 a {
         font-size: 1.2rem;
     }

     .royalSlider img {
         height: auto !important;
         width: 85% !important;
         /* touch-action: pan-y pinch-action !important;
        pointer-events: all; */
     }
 }