.shadow {
	width: 100%;
	height: 168px;
	position: relative;
	margin-top: -110px;
	background: transparent url(../images/shadow.png) no-repeat bottom center;
	background-size: 100% 100%; /* stretches it */
	z-index: -1;
	display: none;
}


.star {
	float: right;
	height: 348px;
	width: 200px;
		
	shape-outside: url('../img/starstar.png');
}

/*https://tympanus.net/codrops/2018/11/29/an-introduction-to-css-shapes/

https://convertio.co/

*/


html, div, span, applet, object, iframe,
h1, h3, h4, h5, h6, /*p,*/ blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike,  sub, sup, tt, var,
b, u, i, center, /*strong,*/
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}



body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
 /*overflow: hidden;  Hide scrollbars */
}

h1 {
  font: 42px/40px  Tempus Sans ITC,  serif;
  margin: 0 0 18px;
  text-transform: uppercase;
  word-spacing: -3px;
 /* color: #ffc325;*/
  font-weight: 600;
}

h2 {
  font: 36px  Tempus Sans ITC,  serif;
  margin: 0 0 14px;
  word-spacing: -3px;
}

p {
  font: 16px  Tempus Sans ITC,  serif;
 margin: 0;
  padding: 0;
  border: 0;

  }
  

 
 


.visual-holder1 {
	margin: 0 auto;
	position: relative;
	min-height: 200px;
	overflow: hidden;
	padding: 40px 57px 40px;
	width: 800px;
	border: 0;
	height: auto;
	background-color: #FFFFFF;
}

.visual-holdergallery {
  margin: 0 auto;
  position: relative;
  min-height: 400px;
  overflow: hidden;
  padding: 40px 57px 40px;
  width: 800px;
  border: 0;
    height: 450px;
}

.intro-textgallery {
	color: #020001;
	/*font: bold italic 36px/48px  Tempus Sans ITC,  serif; */
	/*"Times New Roman", Times, serif;*/
	float: right;
	width: 500px;
	/*  border-left: 3px solid #000;*/
  margin: 3px 0 0 20px;
	padding: 0 0 0 1px;
	word-spacing: -1px;
	border: 0;
	height: auto;
	
		background: transparent url(../img/backgall.jpg) no-repeat left bottom ; 
	   background-size: 80% ;
	  
	z-index: -1;
}

.intro-text {
	color: #020001;
	/*font: bold italic 36px/48px  Tempus Sans ITC,  serif; */
	/*"Times New Roman", Times, serif;*/
	float: right;
	width: 350px;
	/*  border-left: 3px solid #000;*/
  margin: 3px 0 0 25px;
	padding: 0 0 0 12px;
	/*word-spacing: -1px;*/
word-spacing: +2px;
	border: 0;
	height: auto;
	

}



/*div { height: 400px; background-attachment:fixed; border-bottom: 1px solid black }

Increased to 600 feb 2020

div { height: 500px; background-attachment:fixed; border-bottom: 1px solid black }*/

div { height: 600px; background-attachment:fixed; }

.ebay-img1 { background: black  url("../imagesB/Vault1a.jpg") no-repeat 50% 0 fixed;box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -webkit-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -moz-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  text-shadow: 1px 5px 7px #000;
  color: #fff; }
.ebay-img2 { background: black url("../imagesB/Vault2.jpg") no-repeat 50% 0 fixed ;  box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -webkit-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -moz-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  text-shadow: 1px 5px 7px #000;
  color: #fff; }
.ebay-img3 { background: black url("../imagesB/Vault17.jpg") no-repeat 50% 0 fixed ;  box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -webkit-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -moz-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  text-shadow: 1px 5px 7px #000;
  color: #fff; }

.ebay-img4 { background: black url("../imagesB/Vault4.jpg") no-repeat 50% 0 fixed ;  box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -webkit-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -moz-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  text-shadow: 1px 5px 7px #000;
  color: #fff; }

 .ebay-img6 { background: black url("../imagesB/Vault16.jpg") no-repeat 50% 0 fixed ;  box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -webkit-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -moz-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  text-shadow: 1px 5px 7px #000;
  color: #fff; }

  .ebay-img5 { background: black url("../imagesB/Vault5.jpg") no-repeat 50% 0 fixed ;  box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -webkit-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -moz-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  text-shadow: 1px 5px 7px #000;
  color: #fff; }

 .ebay-img7 { background: black url("../imagesB/Vault9.jpg") no-repeat 50% 0 fixed ;  box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -webkit-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -moz-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  text-shadow: 1px 5px 7px #000;
  color: #fff; }

 .ebay-img8 { background: black url("../imagesB/Vault8.jpg") no-repeat 50% 0 fixed ;  box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -webkit-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -moz-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  text-shadow: 1px 5px 7px #000;
  color: #fff; }
  
  
 .ebay-img9 { background: black url("../imagesB/Vault10.jpg") no-repeat 50% 0 fixed ;  box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -webkit-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -moz-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  text-shadow: 1px 5px 7px #000;
  color: #fff; }
  
   .ebay-img14 { background: black url("../imagesB/Vault14.jpg") no-repeat 50% 0 fixed ;  box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -webkit-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  -moz-box-shadow: 0 7px 18px #323131 inset, 0 -7px 18px #323131 inset;
  text-shadow: 1px 5px 7px #000;
  color: #fff; }
 
body a {
  text-decoration: none;
  color: #020001;
}
body a:hover {
  color: #63872f;
}



#myslideshow{ 
border:1px solid black;
}

/* =========================================================
   V7 MOBILE TEST
   Make the existing desktop layout fit the phone viewport.
   The background sections are full-width and remain fixed while the content scrolls over them.
   ========================================================= */
@media only screen and (max-width: 800px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .visual-holder1,
  .visual-holdergallery {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 25px 20px;
  }

  .intro-text,
  .intro-textgallery {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 0 0 20px 0;
    padding: 0;
  }

  .ebay-img1, .ebay-img2, .ebay-img3, .ebay-img4,
  .ebay-img5, .ebay-img6, .ebay-img7, .ebay-img8,
  .ebay-img9, .ebay-img10, .ebay-img11, .ebay-img12,
  .ebay-img13, .ebay-img14 {
    display: block;
    box-sizing: border-box;
    width: 100vw !important;
    height: 400px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed !important;
  }
}


/* =========================================================
   V8 MOBILE TEST
   Reduce heading sizes on phones while keeping V7 layout and
   fixed background photographs unchanged.
   ========================================================= */
@media only screen and (max-width: 800px) {
  h1 {
    font-size: 28px;
    line-height: 30px;
    margin-bottom: 14px;
  }

  h2 {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 12px;
  }

  p {
    font-size: 16px;
    line-height: 22px;
  }
}

/* =========================================================
   V9 MOBILE TEST
   In portrait mode only, reduce the photographs in the
   right-hand content boxes. Landscape mode is left unchanged.
   ========================================================= */
@media only screen and (max-width: 800px) and (orientation: portrait) {
  .intro-text > p img {
    max-width: 85%;
    height: auto;
  }

  /* V10: the Titus photo is inside .containervault rather than directly
     inside a paragraph, so V9's image rule did not affect it. */
  .containervault img.image {
    max-width: 85%;
    height: auto;
  }
}

/* =========================================================
   V12 MOBILE TEST
   Portrait phones only: keep the Titus mouse-over overlay
   positioned over the reduced photograph.
   Desktop and landscape phone layouts are unchanged.
   ========================================================= */
@media only screen and (max-width: 800px) and (orientation: portrait) {
  .containervault {
    position: relative;
    width: 85%;
    max-width: 85%;
    height: auto !important;
    margin-left: 0;
    margin-right: auto;
  }

  .containervault img.image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .containervault .overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 10px 12px 12px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.95));
    overflow: hidden;
  }

  .containervault .overlay h55,
  .containervault .overlay h45 {
    display: block;
    margin: 0;
    padding: 0;
  }
}

/* =========================================================
   V13 MOBILE TEST
   Portrait phones only: keep the Titus mouse-over information
   compact and entirely within the bottom of the photograph.
   This removes the unused black area below the final line.
   Desktop and landscape phone layouts are unchanged.
   ========================================================= */
@media only screen and (max-width: 800px) and (orientation: portrait) {
  .containervault .overlay {
    height: auto !important;
    max-height: 42%;
    padding: 8px 12px 10px;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* The original HTML contains many spacer <br> elements before
     the mouse-over information. Hide those only on portrait phones. */
  .containervault .overlay > br {
    display: none;
  }

  /* Remove the spacer line at the start of the orange heading. */
  .containervault .overlay h55 br:first-of-type {
    display: none;
  }

  /* Keep the intended line break between breeder and flock number,
     but remove the extra blank lines after the flock number. */
  .containervault .overlay h45 br {
    display: none;
  }

  .containervault .overlay h45 br:first-of-type {
    display: block;
  }
}


/* =========================================================
   V14 MOBILE TEST
   Portrait phones only: make the Contact Us table fit inside
   the phone width so phone numbers, email and directions are
   not clipped on the right. V13 otherwise remains unchanged.
   ========================================================= */
@media only screen and (max-width: 800px) and (orientation: portrait) {
  #contactus table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }

  #contactus table td {
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #contactus table td:first-child {
    width: 32% !important;
  }

  #contactus table td:last-child {
    width: 68% !important;
  }

  #contactus table img {
    max-width: 100%;
    height: auto;
  }
}


/* =========================================================
   V14a MOBILE TEST
   Portrait phones only: reduce the slideshow frame so the
   400px gallery fits comfortably within the phone screen.
   Desktop and landscape phone layouts are unchanged.
   ========================================================= */
@media only screen and (max-width: 800px) and (orientation: portrait) {
  #myslideshow {
    transform: scale(0.82);
    transform-origin: top center;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: -63px;
  }
}


/* =========================================================
   V14c MOBILE TEST
   Portrait phones only: fix slideshow still being clipped
   on the right.
   - Gallery section height stays auto (from V14b).
   - Slideshow is scaled smaller (0.72) and locked to the
     left edge so the full photo fits on narrow phones.
   Desktop and landscape phone layouts remain unchanged.
   ========================================================= */
@media only screen and (max-width: 800px) and (orientation: portrait) {
  /* Let the gallery block grow with its content instead of
     being locked at the desktop 450 px height. */
  .visual-holdergallery {
    height: auto !important;
    min-height: 0;
    overflow: visible;
  }

  /* Keep the parent from allowing any horizontal overflow. */
  .intro-textgallery {
    overflow: hidden;
    max-width: 100%;
  }

  /* Shrink the slideshow and pin it to the left so nothing
     is cut off on the right on phones ~320–390 px wide. */
  #myslideshow {
    display: block;
    transform: scale(0.72);
    transform-origin: top left;   /* left instead of centre */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Negative bottom margin reclaims the layout space that
       transform:scale leaves behind, so following text moves up. */
    margin-bottom: -98px;
  }

  /* Keep the short caption under the slideshow tidy. */
  .intro-textgallery > p {
    margin-top: 8px;
    text-align: left;
  }
}