/*scroll to places*/
    * {
      scroll-behavior: smooth;
    }

    .cutewp-box {
      padding-left: 2%;
      padding-right: 2%;
    }


h5 {
width: 86%;
	min-width:200px;
	max-width:570px;
text-align: center;
border-bottom: 1px solid #333;
line-height: 2em;
  margin-top: 12px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
font-size: 13px;
color: #777;
font-family: Trebuchet MS;
}


.long-buttons-attachment {
	display:block;
  font-family: 'trebuchet ms', geneva, sans-serif;
  font-size: clamp(14px, -0.5rem + 4.333vw, 15px) !important;
  font-weight: 600 !important;
  padding: 6px 10px 6px 10px;
  text-shadow: none !important;
  min-width: 180px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  outline: 1px solid #999;
  color: #e8e8e8 !important;
  cursor: pointer;
  border-radius: 1px;
  letter-spacing: 0.1em;
  background: linear-gradient(1deg,rgb(81, 79, 79) 0%, rgb(111, 109, 109) 80%);
  box-shadow: 1px 1px 1px 1px #f2ad54;
  border: 1px solid #444;
  width: 84%;
  }

 .long-buttons-attachment:hover {
background: linear-gradient(1deg, rgb(37, 81, 20) 0%, rgb(65, 162, 142) 98%);
  text-decoration: none !important;
  color: #f5b802 !important;
    }
.tooltip{
	display:block;
}
.tooltip-text{
	margin-top:-100px!important;
	margin-left:-100px!important;
}

    /**2 to 1 layout*/
    .attachment-wrapper {
      /*  padding: 10px;
      margin-top: 10px;*/
      display: grid;
      grid-gap: 10px;
      grid-template-columns: auto;
      grid-template-areas: "left-top right-bottom";
      background-color: #fff;
      color: #444;
    }

    .attachment-box {
      background-color: #e8e8e8;
      color: #000;
      border-radius: 2px;
      padding: 20px;
      font-size: 100%;
    }

    .attachment-price {
      font-size: clamp(16px, -0.5rem + 4.333vw, 22px) !important;
      text-align: center;
      color: #444;
      font-weight: bold;
      margin-right: 20px
    }

    .attachment-currency {
      font-size: clamp(14px, -0.5rem + 4.333vw, 18px) !important;
      text-align: center;
      color: #777;
      font-weight: bold;
      margin-right: 4px
    }

    .left-top {
      grid-area: left-top;
      background-color: #eee;
      padding: 10px 16px 10px 16px;
      border-radius: 3px;
    }

    .right-bottom {
	  display: block;
		/*grid-area: right-bottom;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  row-gap: 6px;*/
  text-align: center;
    }

    .flexthumbnails {
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 96%;
    }


    .itemdescription {
	text-align: center;
  width: 96%;
  margin: auto;
  display: block;
    }

/*remove exta spaces whern items empty*/
    div:empty {
      display: none
    }

/*fix conflict with lightGallery modal*/
.lg-backdrop {
	display:block!important;
	opacity:0.7;
}
.lg-backdrop.in {
	opacity:0.7!important;
}

    @media (max-width: 1023px) {
      .attachment-wrapper {
        grid-template-rows: repeat(auto, 1fr);
        grid-template-areas:
          "left-top"
          "right-bottom";
      }
    }

    @media (min-width: 1024px) {
      .left-top {
        max-width: 500px;
      }

      .right-bottom {}
    }



    /**TABS STYLING*/
    .tab {
      width: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
    }

    .tab-border {
      filter: drop-shadow(1px 1px 1px #a3a3a3);
    }

    /* Style the buttons that are used to open the tab content */
    .tab button {
	background:linear-gradient(182deg, rgb(251, 250, 250) 0%, rgb(211, 208, 206) 100%);
  cursor: pointer;
  border: 1px solid #777;
  text-align: center;
  line-height: 1em;
  font-size: 11px !important;
  transition: 0.3s;
  min-width: 24px;
  min-height: 24px;
  margin-right: 4px;
  margin-bottom: 0px !important;
  border-radius: 1px;
  box-shadow: none;
  padding: 3px 6px 4px 6px;
  color: #555;
  font-weight:600!important;
    }


    /* Change background color of buttons on hover */
    .tab button:hover {
    background: linear-gradient(182deg, rgb(46 109 66) 0%, rgb(137 163 126) 52%, rgb(49 83 36) 98%);
    text-decoration: none !important;
    color: #fff !important;
    font-weight: 500!important;
    }

    /* Create an active/current tablink class */
    .tab button:active,
    .tab button:visited,
    .tab button:focus {
      background: linear-gradient(182deg, #57431b 0%, #bec54b 52%, #7b5327 100%);
    }


    /* Style the tab content */

    .tabcontent {
      display: none;
      padding: 14px 6px;
      background: white;
      border: 1px #aaa solid;
      border-radius: 2px;
      text-align: center;
      /* width: 80vw;
      max-width: 1000px;*/
      width: 98%;
      position: relative;
      margin-left: auto;
      margin-top: 0px;
      margin-right: auto;
      box-shadow: 4px 5px 5px #ddd;
    }

    .tabcontent .active {
      border: 1px solid #bbb;
    }


    /* Currency Converter Modal */
    .currency-modal {
      z-index: 30000;
      display: none;
      padding-top: 100px;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.4)
    }

    .currency-modal-content {
      margin: auto;
      position: relative;
      padding: 0;
      outline: 0;
      width: 240px;
      font-size: 2rem;
    }

    .currency-container {
      padding: 12px;
      background-color: #000;
      border-radius: 2px;
    }

    .currency-display-topright {
      position: absolute;
      right: 0;
      top: 0
    }

    .currency-button {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none text-decoration: none;
      text-align: center;
      cursor: pointer;
      white-space: nowrap;
      font-size: 0.4rem;
      font-family: inherit !important;
      background: none;
      border: none;
      box-shadow: none;
      font-weight: 400 !important;
      color: #aaa;
      padding: 0 !important;
      margin-bottom: 8px !important;
      margin-top: 7px !important;
    }

    .modal-font {
      color: white;
      font-size: 1.8rem;
      text-decoration: none;
      padding-right: 6px;
    }

    .currency-button:hover,
    .modal-font:hover {
      background: none;
      border: none;
      box-shadow: none;
      font-weight: bold !important;
      color: orange !important;
      scale: 102%;
      cursor: pointer;
    }


    /*SPLIDE border for squares*/
    .splide__slide img {
      border: 1px solid #000;
    }