/* COPY AND PASTE FIVE STAR RATING*/

.star-wrap {
  width: max-content;
  margin: 0 auto;
  left: 40px;
  bottom: 40px;
  position: fixed;
}
.star-label.hidden {
  display: none;
}
.star-label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
}


.star-shape {
  background-color: black;
  width: 100%;
  height: 100%;
	
  /*star shaped cutout, works  best if it is applied to a square*/
  /* from Clippy @ https://bennettfeely.com/clippy/ */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

/* make stars *after* the checked radio gray*/
.star:checked + .star-label ~ .star-label .star-shape {
  background-color: white;

}

/*hide away the actual radio inputs*/
.star {
  position: fixed;
  opacity: 0;
  /*top: -90000px;*/
  left: -90000px;
}

.star:focus + .star-label {
 
 
}


label{
	font-size:1vw;
}

#skip-star:checked ~ .skip-button {
  display: none;
}



/*END COPY AND PASTE*/


.a-a-gothic-regular {
  font-family: "A A Gothic";
  font-style:   normal;
  font-weight:  400;
  font-stretch: normal;
}

.union-regular {
  font-family: "Union";
  font-style:   normal;
  font-weight:  400;
  font-stretch: normal;
}


.hline { width:100%; height:1px; background: #fff }


/* Grid Systems*/
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  gap: 50px;
}

.grid-item {
   font-size: 30px;
   padding: 20px;
    
}


lable{
	font-size: 1vw;
}
/* SITE LISTING GRID */
.listing-container {
    display:grid;
    /*grid-template-columns:auto auto;*/
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2vw;
}

.listing-1col{
grid-column: span 1;
padding: 20px;
}

.listing-2col{
grid-column: span 2;
padding: 20px;
}

.listing-fullwidth{
    padding:20px;
    grid-column: 1 / span 4;
}


/* Floaters */
.close-Window{
    position:fixed; float:right; top:60px; right:60px; z-index:999;
}

.site-source{
    position:fixed; float:left; top:60px; left:60px;
    rotate: 45deg; z-index: 999;
    font-size: 4vw;
}




html {
  height: 100%;
  width: 100%;
}

hr {

   border-top: 1px dotted #ffffff;
   border-color:#000000; background-color:#000000;

}

body {

  width: 100%;
  margin: 0;
  padding: 0;
  font-family:  'Union';
font-weight:  normal;
font-style:   normal;
font-stretch: normal;
  font-size:2vw;
  background-color: #D3FFE2;

}

header {
 /* width: 80%;*/
  height: 10vh;
  margin: 0 auto;
 /* padding: 25px;*/
    padding-top:7vh;
    padding-bottom:7vh;
    
  background-color: #D3FFE2;
  color: Black;
  font-size: 80pt;
  font-weight: 500;

 /* top:-120px;*/
  position:sticky;


}

header h1 {
  margin: 0;
  padding: 5px;
  font-size: 7vw;
  font-family:  'A A Gothic';
font-weight:  normal;
font-style:   normal;
font-stretch: normal;
  text-align: left;
  letter-spacing: .13rem;
}

navigation {
  width: 980px;
  margin: 0;
  padding: 0;
  text-align: center;
}

navigation ul {
  width: 980px;
  list-style: none;
  padding: 0;
  margin: 0;
}

navigation ul li {
  display: inline;
  margin-right: 1em;
}

#content {
  width:80%;  margin:0 auto;
  min-height: 1000px;
  /*padding-top: 150px;*/
}

a, a:visited {
  color:#000000;
  text-decoration: none;
}

a:hover {
  color:white;
  text-decoration: none;
  border-color: springgreen;
}


h1 {
  font-size:4vw;
  letter-spacing: .13vw;
  font-weight:  normal;
  font-style:   normal;
}



h2 {
  font-size:2.5vw;
  letter-spacing: .13vw;
  font-weight:  normal;
  font-style:   normal;
}

h3 {
  font-size:1vw;
  letter-spacing: .1vw;
  font-weight:  normal;
  font-style:   normal;
}

h4 {
  font-size:1.5vw;
  letter-spacing: .13vw;
  font-weight:  normal;
  font-style:   normal;
}

h5 {
  font-size: 1vw;
  letter-spacing: .13vw;
  font-weight:  normal;
  font-style:   normal;
}

p{
  font-size:1.5vw;
  letter-spacing: .05vw;
  font-weight:  normal;
  font-style:   normal;

}


footer {
  width: 70%;
  height: 20px;
  margin: 0 0 10px 0;
  padding: 10px 20px;
  background-color: #D3FFE2;
  color: #000000;
}

/* Actions */

.actions {
  margin-bottom: 1em;
}


/* Lists */

table {
  border-collapse: collapse;
  vertical-align: top;
}

table.list {
  width: 100%;
}

table.list tr td {
  border-bottom: 1px solid #000000;
  border-top : 0px ;
  border-left: 0px ;
  border-right: 0px ;
  padding: 15px 5px 15px  15px;
}

table.list tr th {
  border-bottom: 1px solid #000000;
  border-top : 0px ;
  border-left: 0px ;
  border-right: 0px ;

  background-color: #D3FFE2;
  color: #000000;
  text-align: left;
  padding: 15px 15px 15px  15px;
  margin-bottom: 40px;
}

/* Forms */

dl {
  clear: both;

  margin: 10 0;
  margin-bottom:.4vh;
  
 
}

dt {
  float: left;

  letter-spacing: .13vw;
  font-size:1.5vw;
  width: 60%;
  margin-top:15px;
  text-decoration: underline;
}

dd {
  float: left;
  font-size:1.5vw;
  margin-left: 3em;
  margin-top:15px;
  letter-spacing: .1vw;
  font-weight:  normal;
  font-style:   normal;

}

#operations {
  clear: both;
  margin: 1em 0 1em 75px;
}

/* Errors */

.errors {
  display: inline-block;
  border: 2px solid red;
  color: red;
  padding: 1em;
  margin-bottom: 1em;
}

.errors ul {
  margin-bottom: 0;
  padding-left: 1em;
}

.column {
    float: left;
    width: 50%;

    margin-left:0px;

}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


.column_index {
    float: left;
    width: 100%;
    /*margin-right:120px;
    margin-top:50px;*/
    padding-bottom:80px;
    height:30%;

    overflow: hidden;

}

.column_index:hover {
    float: left;
    /*margin-right:120px;
    margin-top:50px;*/
    padding-bottom:80px;
    height:30%;
    overflow:hidden;



    will-change:opacity;
    will-change:filter;
    animation: blurrer 6s linear infinite;;
}


.column_index a:hover {
  color:black;
  text-decoration: none;

}

.buyit {
  font-size:8vw;
  letter-spacing: .13vw;
  font-weight:  normal;
  font-style:   normal;
  font-weight: 900;
  position:inherit;
  float:right;
  color:salmon;
  left: 0;
  right: 0;
  margin: auto;
  padding: 20px;

}

.buyit a:hover{
  font-size:8vw;
  letter-spacing: .13vw;
  font-weight:  normal;
  font-style:   normal;
  font-weight: 900;
  position:absolute;
  float:right;

  left: 0;
  right: 0;
  margin: auto;
  padding: 20px;

}
.buyit a{
  font-size:8vw;
  letter-spacing: .13vw;
  font-weight:  normal;
  font-style:   normal;
  font-weight: 900;
  position:relative;
  float:right;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  padding: 20px;

}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.woodland{
  color:black;

}


@media (max-width: 900px) {
    /* SITE LISTING GRID */
            .listing-1col{
            grid-column: span 2;
            padding: 20px;
            }
            .listing-2col{
            grid-column: span 4;
            padding: 20px;
            }

            .listing-fullwidth{
                padding:20px;
                grid-column: 1 / span 4;
            }
    

    p{
          font-size:3vw;
          letter-spacing: .05vw;
          font-weight:  normal;
          font-style:   normal;

    }
    
    h2 {
          font-size:3vw;
          letter-spacing: .13vw;
          font-weight:  normal;
          font-style:   normal;
    }
    
    dl {
          clear: both;

          margin: 10 0;
         
          margin-bottom:.4vh;

}

    dt {
          float: left;

          letter-spacing: .13vw;
          font-size:3vw;
          width: 30%;
          margin-top:15px;
          text-decoration: underline;
    }

    dd {
          float: left;
          font-size:3vw;
          margin-left: 1em;
          margin-top:15px;
          letter-spacing: .1vw;
          font-weight:  normal;
          font-style:   normal;

    }


}




/* Spunky */

.blink_me {
  will-change:opacity;
  will-change:filter;
  animation: blinker 40s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
    filter: blur(5px);
  }
}


.blink_me_b {
  animation: blinker_b 1s linear infinite;
}

@keyframes blinker_b {
  50% {
    opacity: 0;

  }
}


@keyframes blurrer {
  50% {
    opacity: 0.5;
    filter: blur(5px);
  }
}