/* ==================================== */
/* ========== LINKS - GLOBAL ========== */
/* ============ SEE NAV.CSS =========== */
/* ==================================== */


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: Verdana, sans-serif;
  font-size: 16pt;
  scroll-behavior: smooth;
}
body {
  animation: fadePage .5s ease;
}
/* ====== Fade page in on entry ====== */
      @keyframes fadePage {
        0% {opacity: 0;}
        100% {opacity: 1;}
      }

/* ========== DECORATIVE ASPECTS TO DIVS ========== */
.border, .border-hover:hover {border: 1px solid #fbde00;}
    .border-hover {border: 1px solid transparent; transition: 0.5s ease;}
.radius {border-radius: 10px;}
.background, .background-hover:hover {background: #fffce6;}
    .background-hover {background: none; transition: 0.5s ease;}
.shadow {box-shadow: 0 15px 35px -15px rgba(0,0,0,0.5);}
.warning {
  width: 100%; 
  margin-bottom: 25px; 
  padding: 5px 15px; 
  background-color: #fff6c2; 
  border: 2px solid red; 
  border-radius: 10px;
}
hr{
  width: 80%; 
  margin: 1rem auto;
  border: 2px solid transparent; 
}
.gold {
  border-top-color: #fbde00;
}
.hr-black {
  border-top-color: #141414;
}

/* ========== IMAGES ========== */
img {
  max-width: 100%;
  object-fit: cover;
}
/* Scale up image as background on hover */
.image-box {
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
}
.image-box img {
  display: block;
  height: auto;
  margin: 0 auto;
  border: 1px solid rgba(0,0,0,0.5);
  transform: scale(1);
  transition: all .75s ease-in-out;
}
.image-box:hover img {
  transform: scale(1.05);
}

@media screen and (max-width: 900px) {
	.left-third > img {
		max-width: 90%; 
		margin: 0 auto;
	}
  .mag {max-width: 75%;}
}

/* Table - useful links & contacts page */
.table-left, .table-right {width: 100%; border: 1px solid #ffee6c;}
.table-left div:nth-child(odd), .table-right div:nth-child(even) {background-color: #fffce6;}
.table-left > *, .table-right > * {padding: 0.5rem;}



.copyright {
  display: inline;
  font-size: 0.6rem;
  text-align: center;
  color: #fff;
  padding: 15px 0;
}


/* ====== PAYPAL BUTTON ====== */
input {
  display: block; 
  width: 120px; 
  margin: 25px auto;
}


/* =========== TOOLTIPS =========== */
span[data-descr] {
	position: relative;
	border-bottom: 2px dotted transparent;
	cursor: pointer;
	transition: 0.5s ease;
}
span[data-descr]:hover::after,
span[data-descr]:focus::after {
	position: absolute;
	content: attr(data-descr);
	left: -180%;
	top: -70px;
	padding: 12px;
	min-width: 150px;
	background-color: #fffce6;
	border: 1px solid #000000;
	border-radius: 10px;
	font-size: 12pt;
    text-align: center;
	animation-name: fadeTooltip;
    animation-duration: 0.75s;
	z-index: 1;
}

/* =========== MYRTLE TOOLTIPS =========== */
span.myrtle[data-descr] {
	position: relative;
	cursor: pointer;
}
span.myrtle[data-descr]:hover::after,
span.myrtle[data-descr]:focus::after {
	animation-name: fadeTooltip;
  animation-duration: 0.75s;
	position: absolute;
	content: attr(data-descr);
	left: 0;
	top: 0;
	padding: 12px;
	min-width: 150px;
	background-color: #fffce6;
	border: 1px solid #61271b;
	border-radius: 10px;
	font-size: 12pt;
  text-align: center;
	z-index: 1;
}

/* =========== FOOTER AND MYRTLE USE SAME TOOLTIPS ANIMATION =========== */
@keyframes fadeTooltip {
        0% {opacity: 0; color: transparent;}
        100% {opacity: 1; color: #000000;}
      }

.myrtle {
  float: right;
  width: 120px; 
}
    .zoom, .zoom-myrtle {transform: none;}
      .zoom {transition: 0.75s ease-in-out;}
      .zoom-myrtle {transition: 1s ease-in-out;}
        .zoom:hover, .zoom-myrtle:hover {
          transform: scale(1.05); 
          cursor: pointer; filter: 
          drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
        }