/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */

.marketing {
  overflow: hidden;
}
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 4rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 3rem;
  }
}



img {
    display: block;
}

.thumbnail {
    position: relative;
    display: inline-block;
}

.petname {
    position: absolute;
    /*transform: translate(192px, -250px) rotate(315deg);*/
    transform: translate(clamp(7.063rem, -1.3399rem + 41.4960vw, 12.25rem), clamp(6.625rem, -8.4621rem + 74.5040vw, 15.938rem)) rotate(315deg);
    left: 0;
    top: 0;
    color: #000000;
    font-weight: bold;
    /*font-size: 2.76rem;*/
    font-size: clamp(1.6rem, -0.2792rem + 9.2800vw, 2.76rem);
    width: 300px;
    height: 100px;
}

.handwritten {
  font-family: skippy-sharp, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  font-size: 4.5rem;
}

.standard {
  font-family: ccsignlanguage, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-size: 3.5rem;
}

.script {
  font-family: fave-script-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 5.76rem;
  text-transform: capitalize;
}


.petname-script {
    position: absolute;
    /*transform: translate(192px, -250px) rotate(315deg);*/
    transform: translate(clamp(5.625rem, -1.8675rem + 37.0000vw, 10.25rem), clamp(5.375rem, -8.5975rem + 69.0000vw, 14rem)) rotate(315deg);
    left: 0;
    top: 0;
    color: #000000;
    font-weight: bold;
    font-family: fave-script-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    /*font-size: 5.76rem;*/
    font-size: clamp(3.456rem, -0.0173rem + 17.1520vw, 5.6rem);
    text-transform: capitalize;
    width: 300px;
    height: 100px;
}


.petname-standard {
    position: absolute;
    /*transform: translate(192px, -250px) rotate(315deg);*/
    transform: translate(clamp(6.688rem, -1.6145rem + 41.0000vw, 11.813rem), clamp(6.625rem, -8.2596rem + 73.5040vw, 15.813rem)) rotate(315deg);
    left: 0;
    top: 0;
    color: #000000;
    font-family: ccsignlanguage, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: clamp(2.05rem, 0.3490rem + 8.4000vw, 3.1rem);
    width: 300px;
    height: 100px;
}

.petname-handwritten {
    position: absolute;
    /*transform: translate(192px, -250px) rotate(315deg);*/
    transform: translate(clamp(6.563rem, -0.5245rem + 35.0000vw, 10.938rem), clamp(5.938rem, -8.1349rem + 69.4960vw, 14.625rem)) rotate(315deg);
    left: 0;
    top: 0;
    color: #000000;
    font-weight: bold;
    font-family: skippy-sharp, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    /*font-size: 4.5rem;*/
    font-size: clamp(2.6rem, 0.1700rem + 12.0000vw, 4.1rem);
    width: 300px;
    height: 100px;
}

.stwhite {
  color: #FFFFFF;
}
.stred {
  color: #C90106;
}
.storange {
  color: #F23B10;
}
.stroyalblue {
  color: #011268;
}
.stpartypink {
  color: #E93980;
}
.styellow {
  color: #FFD103;
}
.stgold {
  color: #D2AE81;
}
.stsilver {
  color: #BBB3A6;
}
.stapplegreen {
  color: #2B9803;
}
.stpurple {
  color: #351C56;
}
.stlilac {
  color: #AE99C2;
}
.stocean {
  color: #0287C8;
}
.strosegold {
  color: #B07572;
}
.stgray {
  color: #958C86;
}
.stwine {
  color: #750316;
}
.stnavy {
  color: #2C1F40;
}
.stteal {
  color: #2B7076;
}
.stneonblue {
  color: #036CBE;
}
.stneongreen {
  color: #06F305;
}
.stneonyellow {
  color: #F9F940;
}