/*colors*/
/*fonts family*/
/*font-size*/
/*for h1*/
/*for h2*/
/*for h3*/
/*for h4*/
/*for h5*/
/*for h6*/
/*for p*/
/*for small*/
/*for button text*/
@import url("https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Charm:wght@400;700&family=Creepster&family=Meddon&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sriracha&display=swap");
.templateContainer {
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  min-height: 750px;
}

.templateMainColumn {
  min-height: 100%;
  border: 1px solid RGB(255, 165, 0) !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.templatePreviewText {
  color: rgb(255, 255, 255) !important;
  text-shadow: 2px 2px 1px rgb(255, 140, 0);
}

.linkBtnTemplate {
  color: rgb(245, 222, 179) !important;
  background-color: rgb(128, 0, 0) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 1px 1px 5px 1px rgba(220, 220, 220, 0.2), 1px 1px 16px 1px rgb(255, 0, 0);
  border-radius: 0px !important;
}

.linkBtnTemplate:hover {
  color: rgb(245, 245, 245) !important;
  background-color: rgb(255, 159, 28) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 1px 1px 5px 1px rgba(255, 159, 28, 0.5), 1px 1px 16px 1px rgb(255, 159, 28);
  border-radius: 0px !important;
}

.linkBtnSmTemplate {
  background-color: rgb(128, 0, 0) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 5px !important;
  color: rgb(245, 222, 179) !important;
  font-family: "Raleway", sans-serif;
  font-size: calc(12px + 0.12vw) !important;
}

.linkBtnSmTemplate:hover {
  background-color: rgb(255, 159, 28) !important;
  color: rgb(245, 245, 245) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
}
.linkBtnSmTemplate:hover span {
  color: rgb(245, 245, 245) !important;
}
.linkBtnSmTemplate:hover i {
  color: rgb(245, 245, 245) !important;
}

.templateGreeting {
  color: rgb(245, 222, 179) !important;
}

.templateTitle {
  font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  text-shadow: 3px 3px red;
  color: RGB(255, 165, 0);
}

.templateInfo {
  color: rgb(245, 222, 179) !important;
}

#tempInfoDesc p {
  color: rgb(245, 222, 179) !important;
}

.templateQuote {
  font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 28px !important;
  text-shadow: 3px 3px red;
  color: rgb(245, 199, 26) !important;
}

.templateCtaBtn {
  color: rgb(245, 222, 179) !important;
  font-size: calc(14px + 0.15vw) !important;
  background-color: rgb(128, 0, 0) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 1px 1px 5px 1px rgba(220, 220, 220, 0.2), 1px 1px 16px 1px rgb(255, 0, 0);
}

.templateCtaBtn:hover {
  color: rgb(255, 255, 255) !important;
  font-size: calc(14px + 0.15vw) !important;
  background-color: rgb(255, 159, 28) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 1px 1px 5px 1px rgba(255, 159, 28, 0.5), 1px 1px 16px 1px rgb(255, 159, 28);
}

.templateSubContentTitle {
  font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 40px !important;
  text-shadow: 3px 3px red;
  color: RGB(255, 165, 0) !important;
  background-color: rgba(145, 10, 34, 0.7);
}

.templateEmptySubContent {
  background-color: rgba(145, 10, 34, 0.7);
}
.templateEmptySubContent p {
  color: rgb(245, 222, 179) !important;
}

.templateCardContainer {
  background: rgb(187, 147, 76);
  background: linear-gradient(90deg, rgb(187, 147, 76) 9%, rgb(193, 41, 33) 25%, rgb(42, 7, 1) 49%, rgb(0, 0, 0) 68%);
}

.templateCardBg {
  background-color: RGBA(166, 167, 171, 0.5);
}

.templateCard {
  border: 2px solid rgba(255, 215, 0, 0.35) !important;
}

.templateCardDescription {
  color: rgb(245, 222, 179) !important;
}

.templateCardRibbon {
  position: absolute;
  left: -8px;
  top: 15px;
  z-index: 1;
  width: auto;
  height: 25px;
  padding: 0px 15px;
  text-align: right;
  background-color: rgb(255, 159, 28);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border-bottom-left-radius: 0px;
}

.templateCardRibbon::before, .templateCardRibbon::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 0px;
  width: 8px;
  height: 16px;
  border-bottom-left-radius: 8px;
}

.templateCardRibbon::before {
  background-color: rgb(255, 159, 28);
}

.templateCardRibbon::after {
  background-color: #a36712;
  border-top-left-radius: 8px;
}