body{ display:flex;   font-family: 'Calibri', 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
    font-size: 13px;flex-direction: column;margin: 0;padding: 0; width: 100vw; height:100vh;}         
main{display: flex;justify-content: center;}
header {width: 100%; display: flex; background-image: url(../img/tentslim.JPG) ; background-size: cover;     
background-repeat: no-repeat;   font: 12px Arial, Helvetica, sans-serif;  color: royalblue; flex-direction: column;}
#ttmenu{background-color: whitesmoke; margin:10px 10px auto auto;border: 1px solid whitesmoke; }
#ttmenu  text{font-weight: bold; font-size: 2em; background-color: lightgreen; color: rebeccapurple;}
.sitetitleh {display: flex; flex-direction: column; margin-left: 25px ; margin-bottom: 25px;  font-size: 1.6em;
justify-content: flex-start; }               
.highlighth h4{ color:darkblue; font-size: 1.5em; font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;  
    background-color:  lavender ;opacity: 0.3;margin-top:auto ;margin-bottom: 0;}
.highlightb{background-color: lightblue;color:darkblue; font-weight: bolder;  font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.5em; border:2px whitesmoke;padding: 0 3px;}
.highlight{background-color: lightgreen; color:rebeccapurple; font-weight: bolder; font-style: stretch;  font-size: 1.5em;
border:2px solid whitesmoke;} 
.highlighth {display: flex; padding:20px;}
.highlighthcontain  { display:flex;  background-image: url(../IMGartfth/main3.JPG);background-size: cover;background-repeat: no-repeat;}
.stripabout { display: flex; flex-direction: row;flex-wrap: wrap; width:  100%; margin:0 auto 0 2px; }
.stripabout h3{background: gray; color: springgreen; margin:auto auto auto 1px;} 
.stripabout h2 {color:orangered; font-weight: bolder; font-style:  stretch; background-color: wheat; margin:auto 0 auto auto; }
.ulRowc{display: flex; flex-direction: row;border-top: solid 2px darkblue;}               
.ulC{display: flex; flex-direction: column;margin:0 auto;}
.ulCollb{background-color: whitesmoke; display: flex; flex-direction: column; border:4px solid whitesmoke;
margin:-25px auto auto auto;padding: 0; }
.ulCollb h2{color: darkblue; font-family:Georgia, 'Times New Roman', Times, serif;margin: auto;display: flex;background-color: lightblue; }
.ulColrr {display: flex;flex-direction: column;justify-content: center;}
.center{  display: block; direction:ltr ;width: 100vw;}
.split {display:flex; flex-direction: row; justify-content: center;background: wheat; }
.homebar { display: flex;  padding-bottom: 20px;             }
.navtitle2 {  display: flex;flex-direction: column;  margin: auto 10px 2px auto;   } 
.navtitle2 button{font-size: larger;color: blue;          border-radius: 5px;}
.navtitle2 li{ display: flex; flex-direction: row; flex-wrap: wrap; margin:0;  }
.ulRow{display: flex; flex-direction: row;align-items: flex-start;padding: 5px 2px;background-color: whitesmoke; }
.ulColr {display: flex;flex-direction: column;align-items: flex-start;opacity: 0.9;padding: 0 2px;}
.ulColl {display: flex;flex-direction: column;align-items: flex-start;opacity: 0.9;} 
#section18 text{font-size: larger; color: darkblue ;margin-top: 4px;
    font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif; }  
#grid{display:flex ;flex-wrap: wrap;flex-direction: row;
        flex: 0 1 667px; margin:auto; max-width: 667px;max-height: 512px;}
.hangnav {width:100%;  display: flex;  flex-direction:row; flex-wrap:wrap ; justify-content: center; }
.hangnav li{display:flex;   }
 .navtitletwo{width:100%} 
.equationinline {   font-family: Verdana, Geneva, Tahoma, sans-serif;  font-size: 1em;
     direction:row;align-content: center; justify-self: center;flex-wrap:wrap;  display: inline-flex; }
 .plinemath { display:flex; flex-direction: row; flex-wrap:wrap; align-items: center;
     justify-content: space-around; margin: auto; font-family: Verdana, Geneva, Tahoma, sans-serif;
      padding: 5px;     }
.plinemathup { display:flex; flex-direction: row; flex-wrap:wrap; align-items: flex-start;
     justify-content: space-around; margin: auto; font-family: Verdana, Geneva, Tahoma, sans-serif;
      padding: 5px;     }
 .cplinemath { display:flex; flex-direction: row; flex-wrap:wrap; align-items: center;
     justify-content: center; margin: auto; font-family: Verdana, Geneva, Tahoma, sans-serif;
      padding: 5px;   }
 .cpinlinemath {display:inline-flex; flex-direction: row; flex-wrap:wrap; 
          font-family: Verdana, Geneva, Tahoma, sans-serif;         padding: 5px;   } 
 .equation {/*font-family: Verdana, Geneva, Tahoma, sans-serif; */ font-size: 1.2em; text-emphasis: none;      } 
 .strike { text-decoration: line-through; } 
.stripabout { display: flex; flex-direction: row; justify-content:center;width: 100%; margin:0; padding:0; }
.stripabout h2{ display:flex;  padding:0;opacity: 0.7;   color: mediumvioletred;
     background-color: wheat; width: 50%; justify-content: center;  }
.rowcentre  {display:flex;justify-content: center;width: 100%;align-items:center;}
.divrow { display: flex; flex-direction: row; flex-wrap: wrap; width: 45%; } 
.divrowleft {display:flex; flex-direction: row; width: 100%; justify-content: flex-start; flex-wrap: wrap;}
.divrowidth { width: 100%; margin:0; display: flex; flex-direction: row;  justify-content: space-between; flex-wrap: wrap; }
.margins { flex: 1 2 100%; margin: 10px;}
.divrowidthartcol {width: 100%;display: flex; box-sizing: border-box; margin:2px; flex-direction: row; 
     justify-content: space-between; flex-wrap: wrap; }
.rowcentre  {display:flex;justify-content: center;width: 100%;}
/*.colhold {display: flex; width: fit-content; }*/
.colholdarticle { display: flex;flex-direction: column;flex-wrap: wrap; margin: 10px; size:contain; 
     width: 400px;}
.colholdarticleone {display: flex;flex-direction: column;flex-wrap: wrap; margin: 10px; size:contain; width: 600px;}
.articlecolhold {display: flex; flex: 0 1 400px; flex-wrap: wrap; flex-direction: row;margin:5px; }
.flexcol {width: 100%; display:flex; flex-direction:column; padding:5px; flex-wrap: wrap;align-content:center;margin:0; }
.tallcontainer {display:flex;  flex-direction: row;flex-wrap: wrap;  margin: 0; justify-content: center; }
.noted {width:100%; padding: 10px; margin:2px 6px 2px 0;   } 
.pgnum {display:flex;max-width: fit-content; background-color: mediumslateblue;  color: lightyellow; 
     font-weight: bold; padding: 3px; opacity: 0.5;
     border-radius: 3px;  border:lightslategrey 1px solid; margin: -5px -5px -5px auto;  }
.goldie {display:flex; background-image: url(../IMGarticle/yellowglow600px.JPG);
     background-repeat:repeat;size:contain; width:100%;
     font-weight: bold; padding: 3px; 
     border-radius: 3px;  border:lightslategrey 1px solid; margin: -5px -5px -5px auto;  }
.wrappingraphboldd { text-align: start;  
          color: darkviolet; font-weight: bold;border-radius:5px ;  margin-right:0 ; } 
.wrappingraphboldblue figure { padding:5px; margin:2px;}
#partfive  {flex:0 1 800px;  box-sizing: content-box; padding:10px; border: 2px solid orange;margin: auto; }   
.hs4   {display: flex;   background-image: url(../IMGinterests/sitesheff.JPG); background-repeat:repeat ;
        size: cover; flex-direction: row; justify-content: space-between; margin: 5px;width: 100%; flex-wrap: wrap;} 
.page { display:flex; flex-direction: column; width:100%;margin: 2px; padding:5px;}
.first { display:flex; flex-direction: row; flex-wrap: wrap; justify-content:center; }
.comtent2{border: 2px solid black;padding: 10px; margin: 5px;  }
.comtent1{border: 2px solid black;  padding: 10px; margin: 5px;    }
.artcov {padding: 5px; margin:0;height:fit-content;width: 600px;}
.bolddiiart {background-color: aliceblue; color: seagreen; font-weight: bold; border-radius:5px ; font-size: 1.4em; 
    margin:0 ;     padding: 0; opacity: 0.7;    display:inline;  }   
.comtent3{border: 2px solid black; width: 60%; padding: 10px;  }

.artcovone  {padding: 5px; margin:0;height:fit-content; }
.comtentartcovone {height:fit-content;  border: 2px solid black; padding: 5px; margin:0; }

.chlarge {color: orange;background-color: royalblue; border: 2px solid black;padding: 10px;
      margin: 5px;   }
.ch{ font-size: small;color: orange;background-color: royalblue;  }
.bolda {  background-color: rosybrown; font-weight:bold ; }
.boldbf { background-color: aqua; color: blue; padding: 2px; margin:2px; border-radius:3px;}
.boldcf { background-color: blue; color: blanchedalmond;}
.headinga { font: 1.2em sans-serif; color: blueviolet;font-weight: bold; background-color: burlywood;}
.lightb { background-color: lightsalmon;}
.headingc { font: 1em sans-serif; color: blueviolet;font-weight: bold; background-color: burlywood;}




.bolde { background-color: darkred; color:khaki; opacity: 0.9; text-shadow: black 1px;
     font-weight: bolder; display: inline; font-size: 1.2em; padding: 0; border-radius: 4px;}
.heavyb {background-color: aquamarine;color: red; display: inline;}
.boldb { background-color: aqua; color: blue; display:inline ;}
.boldc { background-color: blue; color: blanchedalmond; display: inline;} 
.boldd {color: orangered;  background-color: azure;}
.wrapping {float:left;  clear: right;padding:10px; margin:10px; size:contain;width:40%;}
.wrappingtwo {float:left;  clear: right; margin-right:0;
     margin-left:0; width:47%;min-width: 350px; }
.wrappingraph { text-align: justify; padding:5px;} 
.wrappingraphslate { text-align: justify; padding:5px; background-color:slategray;
     color: white;}
.whouse  {    padding: 10px; background-color:firebrick;
     color: khaki; text-shadow: darkviolet;    font-weight: bold;border-radius:25px ;      
     }
.house60r {float:right;  clear: right;  width:60%;margin: 0; min-width: 350px;      }
.house65r {float:left;  clear: right; margin-left:0; margin-top: 0;padding-top: 0;
          margin-right:0; width:65%;min-width: 350px;}   
       
   
         
.tosea {display: flex;flex-direction: column;flex: 1 1 25%;min-width: 300px;  }        
.wtosea{display: flex; flex-direction: column;  text-align: start;   background-color:aliceblue;
     color: seagreen; text-shadow: black 2px;   font-weight: bold;  flex: 1 1 auto; width: 30%;  
    min-width: 350px;margin: auto 20px; }
.wtoseb{display: flex; flex-direction: column;  text-align: start;   background-color:aliceblue;
        color: seagreen; text-shadow: black 2px;   font-weight: bold;  flex: 1 2 auto; width: 30%;  
       min-width: 300px;margin: auto; }    
.wrappingraphboldb {text-align: start;  padding:0 10px 10px 10px; background-color:aqua;
     color: blue; text-shadow: black 2px;   font-weight: bold;border-radius:5px ;  margin:0 ;
     } 
.wrappingraphboldblue {text-align: start; margin:0;   text-decoration: none; color: aqua;  
    background-color: darkslategray;  font-weight: bolder; 
     padding:0 10px 10px 10px; }
.notes { text-align: justify; padding:5px; font:0.8em; font-weight: bold; color: darkblue; Padding:5px;
          border: 2px solid brown; background-color: cornsilk;}     
.capside  { width: 90%; font-size: 0.8em;}
.captionize { width: 90%;display: flex; flex-direction: column; font-size: 0.8em;}


.wrappingw {float:right;  clear: right; margin-left:0; 
          margin-right:0; width:30%;min-width: 350px; }
.wrapping80c {flex: 1 1 80%; min-width:350px; margin:auto; }
.wrapping60l {float:left;  clear: right; margin-right:10px;
     margin-left:5px; width:60%;  }
.wrapping65l { float:left;  clear: right; margin-right:0;
     margin-left:0; width:65%;min-width: 350px; }
.wrapping75l { float:left;  clear: left; margin-right:0;
           width:75%;min-width: 350px; }    
.hundred{width: 100%;}
.hundred img { width: 100%;height: 80%;}
.fr{display: flex;flex-direction: row;}
.fr100sb{display:flex; flex-direction: row; justify-content: space-between;width: 100%;}
.fra{display: flex; flex-direction: row; margin:0 auto;}
.frab{display: flex;flex-direction: row;margin-bottom: auto;}
.frw{display: flex;flex-direction: row; flex-wrap: wrap;}
.fca85{display: flex; flex-direction: column; margin: auto ;flex: 1 1 85%;}
.fca85max{display: flex; flex-direction: column; margin: auto ;flex: 0 1 85%;}
.fr100{display: flex; flex-direction: row; width: 100%;justify-content: space-between ; flex-wrap: wrap;}
.fr100sa{display: flex; flex-direction: row; width: 100%;justify-content: space-around;}
.fr100saw{display: flex; flex-direction: row; width: 100%;
    justify-content: space-around; flex-wrap: wrap;}
.fr100w{display: flex; flex-direction: row; width: 100%;flex-wrap: wrap;}
.fc{display: flex; flex-direction: column;}
.fca{display: flex; flex-direction: column; margin:0 auto ;}
.fca30{display: flex; flex-direction: column; margin: auto ;flex: 1 1 30%;}
.fca4038{display: flex; flex-direction: column; margin:  auto  ;flex:2 1  40%;
       min-width: 300px;max-width: 80%;}
.fcit{display: inline-flex; flex-direction: column;margin-bottom: auto;}       
.bca{margin:auto;display: block; }
.bc{display:block;}
.bc img{width:100%; height:100%}
   
.row { display:flex; flex-direction: row; justify-content: space-between;/* flex-wrap: wrap;*/}
.col { display: flex; flex-direction: column; align-items: center; flex-wrap:wrap; } 
.yellowtoo{margin: auto; margin-bottom:20px; display: inline-flex; background: plum;
    font-size: large; color: springgreen;padding: 2px 5px;}
.yellow{font-size:large; color:springgreen;background-color: blue; border-radius: 10px;}
.yellow:hover{font-size:large; color:springgreen;background-color: whitesmoke;  border-radius: 10px; }
.yellowcopy{ color:springgreen;background-color: blue;   border-radius: 10px;} 
.red{ background-color:blanchedalmond;font-size:1.3em; color:orangered; border-radius:10px;}
.yellowcopy{background-color:plum; color:springgreen;border-color: whitesmoke;
        border-radius: 10px;}
.bbci { color:darkblue; background-color: whitesmoke;  border-color: lightblue;
            border-radius: 4px;font-weight: bolder;margin: 1px;}
#pp{position: fixed; left:40%; top:50%; background-color: aliceblue;}
.divider { background:orangered; color:springgreen;font-size: 16px;border-radius: 3px;}
.divider:hover {   color:blueviolet;  font-size: 20px; }
#roverh4 {margin:5px auto; background-color: yellow; color: teal;border: 2px white solid;padding: 4px;}
.button {height: fit-content;        color: #FFF;        background-color: royalblue;          
        padding-left: 5px;  padding-top: 1px;             border: 2px solid #5D6063;    
        border-radius: 3px;              margin: 5px auto;font-size: small; }
.button:hover { font-size: larger; }
#button1h{height: fit-content;background: blanchedalmond;padding-left:  10px; padding-right: 10px;padding-top:1px;
            color: orangered;margin: 5px;border-radius: 3px;font-size: 1.2em; }
#button1{height: fit-content;background: orangered;padding-left:  10px; padding-right: 10px; padding-top: 1px;
           color: springgreen;margin: 5px; border-radius: 3px;}
#button1:hover {font-size: larger; color: blueviolet;}
#button1h:hover {color: springgreen;} 
.button {height: fit-content;        color: #FFF;        background-color: royalblue;          
     padding-left: 5px;  padding-top: 1px;             border: 2px solid #5D6063;    
     border-radius: 3px;              margin: 5px auto;font-size: small; }
.button:hover { font-size: larger; }
#button1h{height: fit-content;background: blanchedalmond;padding-left:  10px; padding-right: 10px;padding-top:1px;
         color: orangered;margin: 5px;border-radius: 3px;font-size: 1.2em; }
#button1{height: fit-content;background: orangered;padding-left:  10px; padding-right: 10px; padding-top: 1px;
        color: springgreen;margin: 5px; border-radius: 3px;}
#button1:hover {font-size: larger; color: blueviolet;}
#button1h:hover {color: springgreen;}
.button1h{height: fit-content;background: blanchedalmond;padding-left:  2px; padding-right: 2px;padding-top:1px;
 color: orangered;margin: 5px; border-radius: 3px;display: flex; flex-direction: column;max-width: 100px;}
.button1h:hover {font-size: larger;color: darkolivegreen;}
.button1{height: fit-content; background: orangered; padding-left:  2px; padding-right:2px; padding-top: 1px;
color: springgreen; margin: 5px; border-radius: 3px;}
.button1:hover {font-size: larger; color: blueviolet;}
.buttonaboutt {color: springgreen;background-color: grey; font-size:large; 
 font-weight: bolder; padding: 6px; 
border-radius: 6px; border-color:whitesmoke; }
.buttonabout {color:springgreen;background-color: gray;  font-size: large;
 font-weight: bolder; margin: 1px;
 border-radius: 4px; border-color:whitesmoke; }
.buttonaboutcentre {color:springgreen;background-color: darkblue;  font-size: large;
     font-weight: bolder; margin: 1px;
     border-radius: 4px; border-color:whitesmoke; }   
.buttonaboutlink {color:springgreen;background-color: darkblue; font-size:large; 
  font-weight: bolder; padding: 2px; 
 border-radius: 4px; border-color: magenta; opacity:0.6;}
.buttonaboutlink:hover, .buttonaboutt:hover, .buttonabout:hover {background-color: springgreen; color: grey;opacity: 1;border-color: brown;}
.buttonbci { color:darkblue; background-color: whitesmoke;  border-color: lightblue;
  border-radius: 4px;font-weight: bolder;margin: 1px;width: 100%;}
.buttonbci:hover {  color: wheat; background-color: royalblue;border-color: brown;}
.buttonarticle { color: darkgreen ; background-color: rgb(99,247,40); border-color: springgreen;
  border-radius: 4px;font-weight: bolder; margin: 1px;width: 100%; }
.buttonarticle:hover { background-color: darkgreen; color: cadetblue;border-color: brown;}
.buttonmultiskill { color: purple; background-color: aqua; border-radius: 4px; border-color: springgreen;
 font-weight: bolder;margin: 1px;width: 100%;}
.buttonmultiskill:hover { background-color: purple; color: aqua;border-color: brown;}
.buttonaboutwait {color: springgreen;background-color: gray; font-size:large;  font-weight: bolder; padding:2px 4px 2px 4px; 
 border-radius: 2px; border-color: springgreen; }
.buttonaboutwait:hover,.yellowcopy:hover {background-color: springgreen; color: gray;opacity: 1;border-color: brown;}
/*.buttonabout:hover { opacity: 0.8;}*/
.oldBut {background-color: springgreen; color: grey;opacity: 1;border-color: brown;} 
a address [href^="mailto"] ::after { content: "📧"}
.containerfoot { width:100%; flex-direction: row; color: whitesmoke;   justify-content: center; display: flex; 
        background-color:darkblue ;flex-wrap:wrap;}
.headline {color: springgreen;font-size:larger;margin: 5px;} 
.postsabout { background-color: yellow; color: teal;margin: 5px;}
.mail    { background-color:springgreen ;color:darkmagenta ; margin: 5px;   }    
.mail:hover {color:white;}      
    
  
  
 
 .pagesizes1 {width: 840px; margin: auto;display: flex; flex-direction: row; flex-wrap: wrap;  }
.gallery1{display: flex; flex-wrap: wrap; overflow:hidden; position: relative; width: 800px; min-height: 340px;}
.gallery1 :hover :not(div[data-pos='5'], img) {cursor: pointer; }
.gallery1 .item{display: flex; flex-wrap: wrap; position: absolute;width: 195px;height: 164px;overflow: hidden;
          transition: transform 0.9s, width 0.9s, height 0.9s;}
.gallery1 img{width: 100%; height: 100%;}
.gallery1 div[data-pos='5'] { width: 390px;height: 328px ; z-index: 10;}

  div[data-pos='5'] {      transform: translate(10px, 10px);  }
  div[data-pos='6'] {      transform: translate(405px, 10px);  }
  div[data-pos='7'] {      transform: translate(605px, 10px);  }
  div[data-pos='8'] {      transform: translate(405px, 175px);  }
  div[data-pos='9'] {      transform: translate(605px, 175px);  }
  #photointro1 { background-image: url(../img07apr/yb.JPG); background-repeat: repeat;
      background-size: cover; border: 2px solid greenyellow; padding: 5px; border-radius: 50px;  }
  #photosays1 p { margin-left: 10px; padding-left: 5px;  min-height: 3rem; text-align: right;  }
@media(width<820px) {
    #photoset1 {  width: 100%; }
    .gallery1 {  width: 420px;  height: 680px;    margin: auto;   }
    .gallery1 div[data-pos='5'] {width: inherit; height: inherit; z-index: 10;   }
}
@media (width < 800px) {
    .gallery1 {width: 405px;   height: 660px;}   
    .gallery1 .item {   width: 200px;  height: 150px;   }  
    .gallery1 div[data-pos='5'] { width: inherit;  height: 350px; z-index: 10; }
    div[data-pos='5'] {transform: translate(10px, 10px);  }
    div[data-pos='6'] {transform: translate(10px, 340px); }
    div[data-pos='7'] {transform: translate(205px, 340px) }
    div[data-pos='8'] {transform: translate(10px, 505px); }
    div[data-pos='9'] {transform: translate(205px, 505px); }    
}