/* 
  ======================================
  CSS Reset
  ======================================
*/
*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}	
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
figure {position: relative;} figure img {width: 100%;}
a img {border:none;}
a:link {text-decoration: none;}
a {transition: color 0.3s ease 0s;}
/* 
  ======================================
  Page Styles - update for your own
  ======================================
*/
html {font-size:16px; height: 100%; scroll-behavior: smooth;}

body {background: #fff;color: #000;font-family:'Roboto', sans-serif; font-weight: 300;min-height: 100vh; }
h1 {font-family: 'Gothic A1', sans-serif; font-size: 3.33rem; line-height: 1.16; margin-bottom: .75rem; text-transform: uppercase;}
h2 {color: #000; font-family:'Elsie', cursive; font-size: 3.25rem; font-weight: bold; line-height: 1; margin-bottom: .75rem;}
h3 {color: #000; font-size: 2.25rem; line-height: 1.24; margin-bottom: .75rem;}
h4 {font-size: 1.25rem; line-height: 1.50rem; margin-bottom: .75rem;}
p {font-size: 1.10rem; line-height: 1.5rem; margin-bottom: 2rem;}
.super-bold-subtext {font-size: 1.50rem; line-height: 2rem; margin-bottom: 2rem;}
.bold-subtext {font-size: 1.25rem; line-height: 1.24; margin-bottom: .25rem;}
.center-text {text-align: center;}
.small {font-size: smaller; line-height: 30px; margin-top: 8px;}
strong {font-weight: bold;}
.cf {*zoom: 1;}
.cf:after {content: '';display: block;clear: both;}
hr {border: 0;border-bottom: 2px dotted #c2c2c2; margin: 4px 0 25px 0; clear: both;}
/* alternate font colors */
.white {color: #fff;}
.yellow {color: #FBBC09;}
.purple {color: #9961C9;}
.red {color: #E56134;}
.teal {color: #25BEA1;}
.dkgrey {color: #374252;}

/* image styles */
img {display: block; max-width: 100%; height: auto;}
.logo {height: auto; margin: 10px 0 50px 10px; padding: 0; position: relative; max-width: 100%;}
.flame-icon {display: inline; margin: 0 0 -10px 4px; max-width: 100%; height: auto;}
.color-dot {border-radius: 50%; display: inline-block; height: 25px; margin-right: 5px; width: 25px;}
.product-icon {border: 4px solid #fff; display: inline-block; height: auto; margin: 20px 10px 40px;}
.product-icon:hover {background-color: #FBBC09; border: 4px solid #FBBC09; border-radius: 4px;}
.product-img {display: inline-block; height: auto; margin-bottom: 10px;}
.jump-up {bottom: 0; height: auto;left: 0;margin: 0 auto;max-width: 100%;padding: 0;position: absolute;right: 0;}
/* main layout */
.wrapper {height: 100%; margin: 0 auto; max-width: 100%; padding: 0; position: relative; width: 100%;}
header {padding-bottom: 3em; text-align: center;}
header a {color: #fff;}
header a:hover {color: #000;}
.section-padding {padding: 6.4rem 0 8.4rem;}
.section-padding-top {padding-top: 6.4rem;}
.section-title {margin-bottom: 3.13rem; text-align: center;}
.angle-top-padding {padding-top: 200px;}

.shop-button a {background-color: #fff; border-radius: 50px; color: #000; display: inline-block; font-size: 20px; font-weight: normal; height: auto; line-height: 24px; margin: 0 auto; padding: 6px 18px 6px; position: relative; text-align: center;}
.shop-button a:hover {background-color: #FBBC09;}

/* text banner */
.ribbon-section {
  padding: 20px 0;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.ribbon {
  padding: 15px;
  height: auto;
  background: #1badae;
  -webkit-clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
          clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
  font-family: 'Gothic A1', sans-serif; font-weight: 400;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.05em;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 15px;
  max-width: 600px;
  text-align: center;
  width: 100%; 
}

/* yellow to grey feature section */
.feature-section {position: relative; text-align: center; width: 100%;}
.bk-yellow-white-split {background: linear-gradient(180deg, #FBBC09 50%, #F7F8FA 50%, #F7F8FA); padding: 1em 0;} /*this can create a fade by making the first number smaller than the second - removed 15.5rem for %*/
.bk-wht-yellow-split {background: linear-gradient(180deg, #F7F8FA 50%, #FBBC09 50%, #FBBC09); padding: 1em 0;} 

.feature-birds {margin: 0 auto; max-width: 300px; padding-bottom: 1.6rem;}
@media only screen and (max-width: 880px) {.bk-yellow-white-split {background: #F7F8FA; padding: 6.4em 0;}}

.general-content {min-height: 500px; margin: 0 auto; max-width: 100%; position: relative; width: 100%;}
.general-content a {color: #374252;}
.general-content a:hover {color: #FBBC09;}

/* TEE SHIRT colors */
.bk-white-woutline {background-color: #fff; border: 1px solid #ccc;}
.bk-pale-pink {background-color: #f6bfc1;}
/* background colors */
.bk-yellow {background-color: #FBBC09; color: #fff;}
.bk-black {background-color: #000; color: #fff;}
.bk-grey {background-color: #F7F8FA;}
.bk-white {background-color: #fff;}
/* TEE styles and Hover styles */
.circle-images {border-radius: 50%; margin: 0 auto; max-width: 100%; height: auto; position: relative;}
.cs-style-3 li {display: inline-block;margin-bottom: 10px;}

figure {margin: 0; position: relative;}
figure img {border-radius: 50%; display: block; max-width: 100%; position: relative;}
figcaption {background: #000; bottom: 0; color: #FBBC09; padding: 60px 30px 0; position: absolute; text-align: center; top: 0;}
figcaption .item-title {color: #fff; font-size: 1.15rem; margin: 0; padding: 0 0 5px 0;}
figcaption .desc {color: #FBBC09; font-size: 1rem; line-height: 1.25rem; margin: 0 auto; padding: 0; text-align: center;}
figcaption a {background: #ed4e6e; border-radius: 2px; color: #fff; display: inline-block; font-size: 1.15rem; line-height: 1.25rem; margin-top: 20px; padding: 5px 10px; position: relative; text-align: center; width: 80%;}
figcaption a:hover {background: #FBBC09; color: #000;}
.cs-style-3 figure {overflow: hidden;}
.cs-style-3 figure img {-webkit-transition: -webkit-transform 0.4s;-moz-transition: -moz-transform 0.4s;transition: transform 0.4s;}
.cs-style-3 figcaption {border-radius: 50%; opacity: 0;width: 100%;-webkit-transform: translateY(100%);-moz-transform: translateY(100%);-ms-transform: translateY(100%);transform: translateY(100%);-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;transition: transform 0.4s, opacity 0.1s 0.3s;}
.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;-moz-transition: -moz-transform 0.4s, opacity 0.1s;transition: transform 0.4s, opacity 0.1s;}

/* ETSY BLOCKS */
.etsy-logo {display: block; height: auto; margin: 0 0 10px 0; padding: 0; position: relative; max-width: 100%;}
.etsy-section {background-color: #1badae; height: auto; margin: 0 auto; padding: 0; position: relative; width: 100%;}
.etsy-section:after {
background-color: #1badae;
bottom: 0px;
content: "";
height: 100%;
position: absolute;
-webkit-transform: skewY(5deg);
-o-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-moz-transform: skewY(5deg);
transform: skewY(5deg);
transform-origin: 0;
width: 100%;
}
.svg-container {background-color: #fff; margin: auto; max-width: 430px; border: solid #fff 15px; padding: 0; position: relative; width: 100%; z-index: 1000;}
/*.svg-product {padding: 0 0 1.5rem 0;}*/
.product-image {display: none;}
.image-list li {margin: 0;}
  .product-image img, .image-list img {width: 100%;}
  .product-image {display: block;}
  .product-image img {height: 400px; width: 400px;}
  .product-image img.active {display: block; margin: 0 0 0.75rem 0;}
  .image-list {display: flex; overflow: hidden; padding-top: 10px;}
  .image-list li {margin: 0 0.75rem 0 0; flex-basis: 100%;}
  .image-list li:nth-child(4) {margin: 0;}
  .image-list img {cursor: pointer; height: auto; transition: opacity 0.3s ease; width: 100%;}
  .image-list img:hover {opacity: 0.7;}

@-webkit-keyframes fadeImg {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeImg {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* social media text boxes */
.box-social-icons {height: auto; margin: 20px; padding: 0; max-width: 100%; text-align: center;}
.social-icon {display: inline-block; height: auto; max-width: 100%; margin-right: 20px; position: relative;}

footer {background-color: #FBBC09; margin: 0 auto; padding: 0; position: relative; width: 100%;}
.footertext p {font-size: 15px; line-height: 1.25rem; margin-bottom: 1.5rem;}
.footertext a {color: #fff;}
.footertext a:hover {color: #000;}
.footertext ul {padding-bottom: 10px; list-style-type: none;}
.footertext ul li {padding: 0 0 10px 15px; line-height: 18px; list-style: outside none;}
.footertext ul li a {background-color: #000; color: #fff; padding: 4px 10px 4px 8px;}
.footertext ul li a:hover {background-color: #fff; color: #000;}

/*-------------------- MEDIA STYLES -------------------*/
/*Styles for screen 1112px to 1024px*/
@media screen and (max-width: 1120px) and (min-width: 920px) {
figcaption {padding: 35px 25px 0;}
figcaption a {font-size: 1rem; line-height: 1.25rem; margin-top: 10px; padding: 5px 10px; width: 90%;}
}

@media screen and (max-width: 800px) {
.product-icon {margin: 20px 10px 40px;}
}
@media only screen and (min-width: 769px) and (max-width: 880px) {
figcaption {padding: 110px 30px 20px;}
figcaption .item-title {font-size: 1.5rem;}
figcaption .desc {font-size: 1.25rem;}
}
@media screen and (max-width: 768px) {
h1 {font-size: 2.5rem; text-align: center;}
h2 {font-size: 2.5rem; text-align: center;}
h3 {font-size: 2rem; text-align: center;}
h4 {text-align: center;}
p {text-align: center;}
.shop-button {text-align: center;}
.super-bold-subtext {text-align: center;}
.section-title {margin-bottom: 1.56rem;}
figcaption {padding: 100px 30px 20px;}
figcaption .item-title {font-size: 1.5rem;}
figcaption .desc {font-size: 1.25rem;}
.logo {margin: 0 auto; padding: 10px 0 10px;}
.etsy-logo {margin: 0 auto;}
.svg-container {max-width: 100%;}
.product-image img {height: auto; width: auto;}
}
@media screen and (max-width: 667px) {
figcaption {padding: 75px 25px 0;}
.product-icon {margin: 20px 5px 40px;}
}
@media screen and (max-width: 414px) {
figcaption {padding: 110px 30px 0;}
}
@media screen and (max-width: 360px) {
figcaption {padding: 100px 30px 0;}
}