@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	line-height: 1.15;
	box-sizing: border-box;
	display: block;
    scroll-behavior: smooth;
    text-align: justify;
}

body{

/*    font-family: 'Creepster', sans-serif; */
	font-family: 'Limelight', cursive;
	text-rendering: optimizeLegibility;
	font-weight: 400;
	font-size: 100%;
	line-height: 1.5;
	width: 100%;
	min-height: 100%;
	background: radial-gradient(#1f1f1f, #2e2e2e);
	margin: 0;
	padding: 0;
	position:relative;
	cursor: default;
	box-sizing: border-box;
	display: block;
    padding-top: 112px;
}

header{
	margin: auto;
}

.logo{
	display: inline-block;
	max-width: 100%;
	border-style: none;
	box-sizing: border-box;
	text-align: center;
}

.logo img{
	width: 100%;
	height: auto;
	max-width: 450px;
}

.navbar{
    top: 0;
    z-index: 11;
    position: fixed;
    overflow: hidden;
    width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background-color: rgba(19,19,19,1.00);
	color: white;
	background-image: url("../images/site_assets/Festi/Ramlogo.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
    border-bottom: double;
    border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
}

.navbar-links ul{
	margin: 0;
	padding: 0;
	display: flex;
}

.navbar-links li{
	list-style: none;
	position: relative;
	top: 0px;
	transition: all 0.25s ease;
    cursor: pointer;
}

.navbar-links li a, .cart{
	text-decoration: none;
	color: #ffffff;
	display: inline-flex;
	padding: 1rem;
}

.navbar-links li:hover, .cart:hover, .navbar-links li:active, .cart:active{
	top: -10px;
	background-color: #555;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

#cart-items-count{
    background: hsla(359,100%,50%,1.00);
    border-radius: 50px;
    position: absolute;
    top: -10px;
    left: 10px;
    text-align: center;
    z-index: 1;
}

.navbar-links .fa{
	margin: auto;
	color: #ffffff;
	position: relative;
	padding: 5px;
	font-size: 20px;
	width: 100%;
	text-align: center;
	text-decoration: none;
	top: -5px;
}

.toggle-button{
	transition: all 0.25s ease;
	position: relative;
	margin: auto;
	top: 0px;
	display: none;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 30px;
	margin-top: 20px;
}

.toggle-button:hover, .toggle-button:active{
	background-color: #555;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.toggle-button .bar1, .bar2, .bar3{
	margin: auto;
	height: 3px;
	width: 35px;
	background-color: #ffffff;
	border-radius: 10px;
	transition: ease 0.25s;
}

.bar1.active {
	transform: translate(0, 11px) rotate(-45deg);
}

.bar2.active {
	opacity: 0;
}

.bar3.active {
	transform: translate(0, -11px) rotate(45deg);
}

.info-bar{
    /* background-image: linear-gradient(180deg, darkred, red); */
    background-image: linear-gradient(180deg, gold, saddlebrown);
    color: black;
    display: block;
    top: 112px;
    position: sticky;
	font-size: 18px;
	font-weight: bold;
	width: 100%;
    text-shadow: 0 0 10px white,  0 0 25px silver;
	text-align: center;
    border-top: double;
    border-bottom: double;
    border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    z-index: 10;
}

.info-bar a{
    color: black;
    transition: all 0.25s ease;
}

.info-bar a:hover, .info-bar a:active{
    color: gray;
}

/*Footer*/
.footer-container{
	max-width: 1170;
	margin: auto;
}

.footer{
	background-color: rgba(19,19,19,1.00);
	padding: 70px 0px;
    border-top: double;
    border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    isolation: isolate;
}

.footer-row{
	display: flex;
	flex-wrap: wrap;
}

.footer-col{
	width: 25%;
	padding: 0 15px;
}

.footer h4{
	font-size: 18px;
	color: #ffffff;
	text-transform: capitalize;
	margin-bottom: 30px;
	font-weight: 500;
	position: relative;
}

.footer-col h4::before{
	content: '';
	position: absolute;
	left: 0;
	bottom: -10px;

    /* background-color: rgba(139, 0, 0, 128); */
	background-color: rgba(212, 175, 55);
	height: 2px;
	box-sizing: border-box;
	width: 200px;
}

.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}

.footer-col ul li a{
	font-size: 16px;
	text-transform: capitalize;
	text-decoration: none;
	font-weight: 300;
	color: #bbbbbb;
	display: block;
	transition: all 0.25s ease;
}

.footer-col ul li a:hover, .footer-col ul li a:active{
	background-color: #555;
	padding-left: 8px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.footer-col .social-links a{
	display: inline-block;
	height: 40px;
	width: 40px;
	margin: 0, 10px, 10px, 0;
	text-align: center;
	line-height: 40px;
}

.footer-images{
	padding-top: 10px;
	width: 50%;
}

.footer-container .fa{
	color: #ffffff;
	position: relative;
	padding: 5px;
	font-size: 30px;
	width: 100%;
	text-align: center;
	text-decoration: none;
	top: -10px;
	transition: all 0.25s ease;
}

.footer-container .fa:hover, .footer-container .fa:active{
	top: -20px;
	background-color: #555;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

/*Main background*/

.main-bg{
    width: 100%;
    height: auto;
    display: inline-block;
    position: relative;
    isolation: isolate;
}


#home{
    background-image: url("../images/backgrounds/photo_2022-11-26_23-12-45.jpg");
    background-attachment: scroll;
    background-repeat: repeat;
	background-position: center top;
    
    /* Spooky */
/* background: linear-gradient(145deg, #2d0031, #520066, #8a2d12, #fa5c00, #0e3f00, #00ff77); */
    
}

#contact{
    background-image: url("../images/backgrounds/zepp.jpg");
    background-attachment: scroll;
    background-repeat: repeat;
	background-position: center top;
 
    /* Spooky */
 /* background: linear-gradient(145deg, #2d0031, #520066, #8a2d12, #fa5c00, #0e3f00, #00ff77); */
    
}

#shop{
    background-image: url("../images/backgrounds/photo_2022-11-26_23-12-45.jpg"); 
    background-attachment: fixed;
    background-repeat: repeat;
	background-position: center top;
        
    /* Spooky */
 /* background: linear-gradient(145deg, #2d0031, #520066, #8a2d12, #fa5c00, #0e3f00, #00ff77); */
    
}

#inventory{
    background-image: url("../images/backgrounds/background04.jpg");
    background-attachment: fixed;
    background-repeat: repeat;
	background-position: center top;

        /* Spooky */
 /* background: linear-gradient(145deg, #2d0031, #520066, #8a2d12, #fa5c00, #0e3f00, #00ff77); */
    
}

#about{
    background-image: url("../images/backgrounds/background03.jpg");
    background-attachment: scroll;
    background-repeat: repeat;
	background-position: center top;
        
    /* Spooky */
 /* background: linear-gradient(145deg, #2d0031, #520066, #8a2d12, #fa5c00, #0e3f00, #00ff77); */
    
}

#shipping{
    background-image: url("../images/backgrounds/zepp.jpg");
    background-attachment: scroll;
    background-repeat: repeat;
	background-position: center top;
        
    /* Spooky */
 /* background: linear-gradient(145deg, #2d0031, #520066, #8a2d12, #fa5c00, #0e3f00, #00ff77); */
    
}

.main-bg:after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: -1;
}


/*Hero*/
.hero{
    max-width: 100%;
    width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
    transition: all 0.25s ease;
    display: block;
    justify-content: center;  
}

.hero-images{
    display: flex;
	width: 100%;
    max-height: 750px;
	height: 100%;
	margin: auto;
	position: relative;
	justify-content: center;
    align-items: flex-end;
}

.hero-grid{
    display: inline-grid;
    grid-template-columns: auto 33%;
    min-width: 825px;
    width: 100%;
    max-height: 750px;
	height: 100%;
}

.other-hero-grid{
    display: grid;
    grid-template-rows: 50% auto;
}

.hero-grid img {
    max-width: 100%;
    display: block;
    height: auto;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    transition: all 0.25s ease;
}

.hero-grid img:hover, .hero-grid img:active{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
    z-index: 100;  
}

.main-hero-image{
    width: 100%;
    height: auto;
    grid-column-start: 1;
    grid-column-end: 1;
}

.top-hero-image{
    width: 100%;
    height: auto;
    grid-row-start: 1;
    grid-row-end: 1;
}

.bottom-hero-image{
    width: 100%;
    height: auto;
    grid-row-start: 2;
    grid-row-end: 2;
}

.bookend-left, .bookend-right{
	display: block;
    max-width: 300px;
    width: 100%;
}

.bookend-left img{
	width: 100%;
	height: 100%;
    display: block;
}

.bookend-right img{
	width: 100%;
	height: 100%;
    display: block;
}


.spotlight-left, .spotlight-right{
    height: auto;
    bottom: 0px;
    position: absolute;
    transform-origin: bottom center;
    transition: 1.5s ease;
    display: block;
}

.spotlight-left{
	left: 0%;
    transform: rotate(25deg);
}

.spotlight-right{
	right: 0px;
    transform: rotate(-25deg);
}

.spotlight-left img, .spotlight-right img{
    max-height: 750px;
    object-fit: contain;
    display: block;
}


/*Slideshow*/

.slideshow-container{
    max-width: 100%;
    width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
    transition: all 0.25s ease;
    display: none;
    justify-content: center;
}

.slideshow-container-product, .slideshow-container-news, .slideshow-container-featured{
    max-width: 100%;
    width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
    transition: all 0.25s ease;
    display: block;
    justify-content: center;
}

.slideshow-product{
	width: 100%;
	height: auto;
	margin: auto;
	position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
}

.slideshow-news{
	width: 100%;
	height: auto;
	margin: auto;
	position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
}

.slideshow-featured{
	width: 100%;
	height: auto;
	margin: auto;
	position: relative;
	display: none;
	justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
}

.slideshow{
	width: 100%;
	height: 100%;
	margin: auto;
	position: relative;
	display: flex;
	justify-content: center;
    align-items: flex-end;
    transition: all 0.25s ease;
}

.slideshow-preview{
	max-width: 100%;
	max-height: 50%;
	margin: auto;
    margin-bottom: 50px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
    transition: all 0.25s ease;
}

.slide, .slide-product, .slide-news, .slide-featured, .slide-preview{
	display: block;
	transition: all 1s ease;
}

.slide img, .slide-product img, .slide-news img, .slide-featured img, .slide-preview img{
    max-width: 1000px;
	width: 100%;
    max-height: 850px;
	height: 100%;
	vertical-align: middle;
	border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    transition: all 0.25s ease;
    z-index: 1;
    opacity: 1;
}

.slide-preview img{
    max-height: 500px;
}

.slide-preview .tooltip{
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 20px;
	font-weight: 200;
	padding-top: 10px;
    text-align: left;
    visibility: hidden;	
    border-style: double;
	border-width: solid;
	border-color: rgba(212, 175, 55, 1);
    height: 100%;
    width: 50%;
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 0%;
    left: 25%;
    transition: all 0.25s ease;
}

.slide-preview:hover .tooltip, .slide-preview:Active .tooltip{
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.9);	
    border-color: rgba(212, 175, 55, 1);
    color: rgba(225, 225, 225, 1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.slide-preview:not(:hover) .tooltip{
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(212, 175, 55, 0);
    color: rgba(225, 225, 225, 0);
    visibility: hidden;
}

.button-next, .button-previous, .button-next-product, .button-previous-product, .button-next-news, .button-previous-news, .button-next-featured, .button-previous-featured, .button-next-preview, .button-previous-preview{
	min-width: 40px;
	min-height: 60px;
	font-size: 30px;
	font-weight: bold;

    /* color: rgba(139, 0, 0, 128); */
    color: rgba(212, 175, 55);
    text-shadow: 0 0 10px black,  0 0 25px black;
	background-color: rgba(255, 255, 255, 0.25);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: flex;
	transition: all 0.25s ease;
    z-index: 100;
}

.button-previous, .button-previous-product, .button-previous-news, .button-previous-featured, .button-previous-preview{
	left: 0px;
	border-style: double;
	border-width: solid;

    /* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
}

.button-next,  .button-next-product, .button-next-news, .button-next-featured, .button-next-preview{
	right: 0px;
	border-style: double;
	border-width: solid;
    /* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
}

.button-next:hover, .button-previous:hover,  .button-next-product:hover, .button-previous-product:hover, .button-next-news:hover, .button-previous-news:hover, .button-next-featured:hover, .button-previous-featured:hover, .button-next-preview:hover, .button-previous-preview:hover{
	/* color: rgba(139, 0, 0, 128); */
    color: rgba(212, 175, 55);
    background-color: #ffffff;
}

.button-next:active, .button-previous:active,  .button-next-product:active, .button-previous-product:active, .button-next-news:active, .button-previous-news:active, .button-next-featured:active, .button-previous-featured:active, .button-next-preview:active, .button-previous-preview:active{
	/* color: rgba(139, 0, 0, 128); */
    color: rgba(212, 175, 55);
	background-color: #ffffff;
}

.lines, .lines-product, .lines-news{
	position: absolute;
	display: flex;
	bottom: 10px;
    z-index: 100;
}

.lines-featured{
	position: absolute;
	display: flex;
	bottom: 70px;
    z-index: 100;
}

.lines-preview{
	position: absolute;
	display: flex;
	top: 100%;
    z-index: 100;
    max-width: 75%;
}

.line, .line-product, .line-news, .line-featured{
	position: relative;
	padding: 10px 10px;
	margin: 0 3px;
	background-color: rgba(255, 255, 255, 0.25);
	cursor: pointer;
	transition: all 0.25s ease;
	top: 0px;
}

.line{
	height: 25%;
    top: 40px;
}

.line-preview{
	position: relative;
	padding: 5px 5px;
	margin: 0 3px;
	background-color: rgba(255, 255, 255, 0.25);
	cursor: pointer;
	transition: all 0.25s ease;
	top: 0px;
}

.line-active-product, .line-active-product:hover, .line-active-news, .line-news:hover, .line-active-featured, .line-featured:hover{
	background-color: #ffffff;
	top: -5px;
}

.line-active-product:active,.line-news:active, .line-featured:active{
	background-color: #ffffff;
	top: -5px;
}

.line-active, .line:hover, .line:active{
	background-color: #ffffff;
	top: 35px;
}

.line-active-preview, .line-preview:hover, .line-preview:active{
	background-color: #ffffff;
	top: -10px;
}

.slide:hover, .slide-product:hover, .slide-news:hover, .slide-featured:hover, .slide-preview:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.slide:active, .slide-product:active, .slide-news:active, .slide-featured:active, .slide-preview:active{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

/*Shop Buttons*/
.shopbuttons-container{
	max-width: 100%;
	margin: auto;
    background-image: linear-gradient(180deg, #1f1f1f, black);
}

.shopbuttons-container-store{
	width: 100%;
	margin: auto;
    position: fixed;
    z-index: 99;
    overflow: hidden;
}


.shopbuttons{
	display: flex;
	align-items: center;
	width: 100%;
    flex-wrap: nowrap;
    border-top: double;
    border-bottom: double;
	border-width: solid;
    /* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    background-color: #1f1f1f;
}

.shopbutton{
	width: 25%;
}

.shopbutton-store{
	width: 16%;
    display: inline-block;
}

.shopbutton ul li, .shopbutton-store ul li{
	border-style: double;
	border-width: solid;
    /* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
	cursor: pointer;
	display: block;
	text-align: center;
	font-size: 20px;
	font-weight: 200;
    text-shadow: 0 0 10px black,  0 0 25px black;
	margin: 10px 5px;
	position: relative;
	top: 0px;
	background: rgba(92, 88, 88, 0.6);
	transition: all 0.25s ease;
}

.shopbutton li a, .shopbutton-store li a{
	text-decoration: none;
    white-space: nowrap;
	color: #ffffff;
	display: block;
	padding: 1rem;
    text-align: center;
}

.shopbutton li .tooltip, .shopbutton-store li .tooltip{
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 24px;
	font-weight: 200;
	padding-top: 10px;
    text-align: center;
    visibility: hidden;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 100;
    bottom: 110%;
    left: 50%;
    margin-left: -50%;
    transition: all 0.25s ease;
}

.shopbutton li:hover .tooltip, .shopbutton-store li:hover .tooltip, .shopbutton li:active .tooltip, .shopbutton-store li:active .tooltip, .shopbutton-store li:active .tooltip{
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.75);
    color: rgba(225, 225, 225, 1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.shopbutton li:not(:hover) .tooltip, .shopbutton-store li:not(:hover) .tooltip{
    background-color: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    visibility: hidden;
}

.shopbutton li:hover, .shopbutton-store li:hover, .shopbutton li:active, .shopbutton-store li:active, .shopbutton-store li:active, .shopbutton-store .active{
	top: -10px;
	background-color: #555;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

#squishy  ul li{
    background-image: url("../images/site_assets/Festi/SBL.png"), url("../images/site_assets/Festi/Ramlogo.png"), url("../images/site_assets/Festi/SBR.png");
	background-repeat: no-repeat;
	background-position: left, top, right;
	background-size: contain;
}

#dildo  ul li{
    background-image: url("../images/site_assets/Festi/DBL.png"), url("../images/site_assets/Festi/Ramlogo.png"), url("../images/site_assets/Festi/DBR.png");
	background-repeat: no-repeat;
	background-position: left, top, right;
	background-size: contain;
}

#penetrable  ul li{
    background-image: url("../images/site_assets/Festi/PBL.png"), url("../images/site_assets/Festi/Ramlogo.png"), url("../images/site_assets/Festi/PBR.png");
	background-repeat: no-repeat;
	background-position: left, top, right;
	background-size: contain;
}

#merchandise  ul li{
    background-image: url("../images/site_assets/Festi/MBL.png"), url("../images/site_assets/Festi/Ramlogo.png"), url("../images/site_assets/Festi/MBR.png");
	background-repeat: no-repeat;
	background-position: left, top, right;
	background-size: contain;
}

#all ul li, #newsbutton ul li{
    background-image: url("../images/site_assets/Festi/bookend_mirror.png"), url("../images/site_assets/Festi/Ramlogo.png"), url("../images/site_assets/Festi/bookend.png");
	background-repeat: no-repeat;
	background-position: left, top, right;
	background-size: contain;
}


/*Sections*/
.content-container{
	max-width: 1170;
	margin: auto;
	margin-bottom: 75px;
}

.sections{
	font-size: 16px;
	font-weight: lighter;
	text-align: left;
	padding-top: 10px;
	color: #ffffff;
	display: flex;
	width: 100%;
    position: relative;
}

.section{
	border-style: double;
	border-width: solid;
    /* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
	padding: 15px;
	text-align: left;
	width: 100%;
	margin: 10px;
	position: relative;
	transition: all 0.25s ease;
	background: rgba(92, 88, 88, 0.6);
    text-shadow: 0 0 10px black,  0 0 25px black;
    display: block;
}

#sections-main{
	padding-top: 21%;
	background-image: url("../images/site_assets/Festi/Ekino.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-about{
	padding-top: 27%;
	background-image: url("../images/site_assets/Festi/Brutus.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-shipping{
	padding-top: 16%;
	background-image: url("../images/site_assets/Festi/Bat.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-contact{
	padding-top: 21%;
	background-image: url("../images/site_assets/Festi/Blimp.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-shop{
    margin-top: 100px;
    width: 100%;
    display: inline-block;
}

#section-featured{
    background-image: url();
    background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
    margin: 0px;
    justify-content: center;
	margin-bottom: -75px;
}

#section-news{
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
    margin: 0px;
    width: 100%;
    height: auto;
    display: inline-block;
    position: relative;
    isolation: isolate;
}

#section-news:after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: -1;
}

.news-grid{
    display: grid;
    grid-template-columns: fit-content(50%) fit-content(auto);
    grid-template-rows: fit-content(50%) fit-content(auto) fit-content(auto);
    font-size: 28px;
    grid-gap: 50px;
    margin: 25px;
	justify-content: center;
    align-items: center;
}

.news-grid .shopbutton{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 25px;
    padding-bottom: 25px;
}

.slideshow-container-news{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    padding-bottom: 25px;
}

.news-text{
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    font-size: 20px;
}

.news-text .text{
	background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 25px;
}

.news-text ul{
    list-style: square;
    list-style-position: inside;
}

.news-text a{
    color: gray;
    transition: all 0.25s ease;
}

.news-text a:hover, .news-text a:active{
    color: darkgray;
}

.spacer{
    width: 100%;
}

.sections img{
	width: 100%;
	height: auto;
	vertical-align: middle;
	border-style: double;
	border-width: solid;
    /* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
}

.sections h1{
	font-size: 32px;
	font-weight: 200;
    text-shadow: 0 0 10px black,  0 0 25px black;
	text-align: center;
	padding-bottom: 10px;
	background-image: url("../images/site_assets/Festi/LeftArrow.png"), url("../images/site_assets/Festi/Ramlogo.png"), url("../images/site_assets/Festi/RightArrow.png");
	background-repeat: no-repeat;
	background-position: left, top, right;
	background-size: contain;
}

.news-text h1{
    background-image: none;
    /* color: rgba(139, 0, 0, 128); */
    color: rgba(212, 175, 55);
    font-size: 24px
}

.store-section{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 10px;
	border-style: none;
	text-align: left;
	width: 100%;
	padding: 10px;
	position: relative;
	transition: all 0.25s ease;
	background-color: transparent;
    scroll-margin: 20px;
}

#store-section-featured{
    display: flex;
    align-items: center;
    justify-content: center;
}

.Add-To-Cart, #cartButton, #cartButtonS, #cartButtonM, #cartButtonL, #cartButtonXL{
    background-image: linear-gradient(180deg, gold, saddlebrown);
    cursor: pointer;
    font-family: inherit;
    font-size: 24px;
    border-style: double;
	border-width: solid;
    /* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    color: black;
    padding: 10px;
    margin-top: 10px;
    transition: all 0.25s ease;
    display: inline-block;
}

.Add-To-Cart:hover, #cartButton:hover, #cartButtonS:hover, #cartButtonM:hover, #cartButtonL:hover, #cartButtonXL:hover{
    background-image: linear-gradient(180deg, gold, silver);
}

.product-section{
    padding: 15px;
    text-align: left;
    width: 100%;
    margin: 10px;
    transition: all 0.25s ease;
    text-shadow: 0 0 10px black,  0 0 25px black;
}

#options-preview{
    margin: auto;
    text-align: center;
    margin-bottom: 50%;
}

.product-section h2{
	padding-top: 10%;
    font-size: 40px;
}

.size-firmness-selection, .size-firmness-selection-3-pack{
    display: inline-flex;
    padding-bottom: 10px;
    width: 100%;
    float: left;
    transition: all 0.25s ease;
}

.size-firmness-selection h3{
    text-align: center;
    font-size: 16px;
	font-weight: 100;
    float: left;
}

.color-schemes{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(75px, 1fr));  
    grid-gap: 10px;
    width: 435px;
    height: 92px;
    border-style: double;
	border-width: solid;
    /* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    padding: 5px;
    margin-bottom: 30px;
    background: rgba(92, 88, 88, 0.6);
}

.custom-colors{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(75px, 1fr));  
    grid-gap: 10px;
    width: 435px;
    height: 174px;
    border-style: double;
	border-width: solid;
    /* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    padding: 5px;
    margin-bottom: 30px;
    background: rgba(92, 88, 88, 0.6);
}

.color-preview{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(75px, 1fr));  
    grid-gap: 10px;
    width: 435px;
    height: 261px;
    border-style: double;
	border-width: solid;
    /* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    padding: 5px;
    margin-bottom: 30px;
    background: rgba(92, 88, 88, 0.6);
}

.custom-colors{
    height: 435px;
}

.color-scheme, .shaft-color, .base-color{
    background-color: none;
    position: relative;
    float: left;
    width: 75px;
    height: 75px;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    transition: all 0.25s ease;
    top: 0px;
    right: 0px;
    font-size: 70px;
}

.color-scheme input, .shaft-color input, .base-color input{
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    background-color: inherit;
}

.checkmark{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
}

.checkmark i{
    position: absolute;
    top: 0%;
    left: 0%;
    color: white;
    text-shadow: 0 0 10px black,  0 0 25px black;
}

.color-scheme input:checked ~ .checkmark, .shaft-color input:checked ~ .checkmark, .base-color input:checked ~ .checkmark{
    visibility: visible;
}

.checkmark:after{
    visibility: hidden;
}

.color-scheme:hover, .shaft-color:hover, .base-color:hover, .color-scheme:active, .shaft-color:active, .base-color:active{
	top: -10px;
    right: 12px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
    width: 100px;
    height: 100px;
    z-index: 100;
    font-size: 100px;
}

.color-scheme .tooltip, .shaft-color .tooltip, .base-color .tooltip{
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 24px;
	font-weight: 200;
	padding-top: 10px;
    text-align: center;
    visibility: hidden;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 100;
    left: 50%;
    margin-left: -50%;
    transition: all 0.25s ease;
    bottom: 110%;
}

.color-scheme:hover .tooltip, .color-scheme:active .tooltip, .shaft-color:hover .tooltip, .base-color:hover .tooltip, .shaft-color:active .tooltip, .base-color:active .tooltip{
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.75);
    color: rgba(225, 225, 225, 1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.color-scheme:not(:hover) .tooltip, .shaft-color:not(:hover) .tooltip, .base-color:not(:hover) .tooltip{
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(212, 175, 55, 0);
    color: rgba(225, 225, 225, 0);
    visibility: hidden;
}

#color1_preview{
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
}

#label-color-1{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

#color2_preview{
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 2;
}

#label-color-2{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
}

#marbleCheckbox{
    width: 100%;
    height: 100%;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-end: 3;
    cursor: pointer;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
}

#label-marble{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
}

#green-glow-Checkbox{
    width: 100%;
    height: 100%;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-end: 3;
    cursor: pointer;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
}

#label-green-glow{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
}

#blue-glow-Checkbox{
    width: 100%;
    height: 100%;
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 3;
    cursor: pointer;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
}

#label-blue-glow{
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 3;
}


#mica-1-Checkbox{
    width: 100%;
    height: 100%;
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    cursor: pointer;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
}

#label-mica-1{
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 1;
}

#mica-2-Checkbox{
    width: 100%;
    height: 100%;
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 2;
    cursor: pointer;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
}

#label-mica-2{
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 2;
}

#reset{
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 3;
    cursor: pointer;
    font-family: inherit;
    font-size: 24px;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    background-color: lightgrey;
    color: black;
    transition: all 0.25s ease;
}

#reset-squishy{
    grid-column-start: 5;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 3;
    cursor: pointer;
    font-family: inherit;
    font-size: 24px;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    background-color: lightgrey;
    color: black;
    transition: all 0.25s ease;
}

#reset:hover, #reset-squishy:hover{
    background-color: white;
}


/*color schemes*/

.preview-container{
	max-width: 500px;
    max-height: 500px;
	width: 500px;
    height: 500px; 
	border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    transition: all 0.25s ease;
    background-color: transparent;
    display: block;
    position: relative;
    z-index: 8;
}

.preview-color-0, .preview-color-1, .preview-color-2, .preview-color-3, .preview-color-4, .preview-color-5, .preview-color-6, .preview-color-7, .preview-overlay{
	max-width: 500px;
    max-height: 500px;
    width: 100%;
    height: 100%; 
    background-color: transparent;
    display: block;
    position: absolute;
    left: 0;
    transition: all 0.25s ease;
}

.preview-color-0{
    top: 0;
    background-image: url("../images/Colors/Blank.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.preview-color-1{
    z-index: 1;
    top: 0px;
    position: absolute;
    width: 100%;
}

.preview-color-2{
    z-index: 2;
    top: 0px;
    background-image: url("../images/site_assets/MicaMask.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    visibility: hidden;
    width: 100%;
}

.preview-color-3{
    z-index: 3;
    bottom: 0px;
    position: absolute;
    width: 100%;
}

.preview-color-4{
    z-index: 4;
    bottom: 0px;
    background-image: url("../images/site_assets/MicaMask.png");
    background-repeat: no-repeat;
    background-size: auto;
    position: absolute;
    visibility: hidden;
    width: 100%;
}

.preview-color-5{
    top: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../images/Colors/marbleMasks/MarbleMask.png");
    z-index: 5;
    position: absolute;
    visibility: hidden;
    width: 100%;
}

.preview-color-6{
    z-index: 6;
    top: 0px;
    background-image: url( "../images/Colors/marbleMasks/MarbleMask_MicaMask2.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    visibility: hidden;
    width: 100%;
}

.preview-color-7{
    z-index: 7;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 100%;
}

.preview-overlay{
    top: 0;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    z-index: 8;
    width: 100%;
    height: 100%;
}

/*colors*/
#red{
    background-color: red;
}

#flesh-pink{
    background-color: #E6788B;
}

#orange{
    background-color: orange;
}

#neon-orange{
    background-color: #FF6700;
}

#yellow{
    background-color: yellow;
}

#dark-green{
    background-color: darkgreen;
}

#green{
    background-color: green;
}

#lime-green{
    background-color: limegreen;
}

#teal{
    background-color: teal;
}

#cyan{
    background-color: cyan;
}

#dark-red{
    background-color: darkred;
}

#brown{
    background-color: saddlebrown;
}

#blue{
    background-color: blue;
}

#purple{
    background-color: purple;
}

#black{
    background-color: #292E32;
}

#gold{
    background-color: gold;
}

#pink{
    background-color: hotpink;
}

#hot-pink{
    background-color: deeppink;
}

#light-purple{
    background-color: mediumpurple;
}

#light-pink{
    background-color: lightpink;
}

#white{
    background-color: white;
}

#light-grey{
    background-color: darkgray;
}

#dark-grey{
    background-color: grey;
}

#beige{
    background-color: burlywood;
}

#light-beige{
    background-color: beige;
}

.store-section-type{
    display: none;
}

/*email form*/
.email-form, .contact-sent{
	border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
	padding: 15px;
	text-align: left;
	width: 100%;
	margin: 10px;
	position: relative;
	transition: all 0.25s ease;
	background: rgba(92, 88, 88, 0.6);
    display: inline-block;
}

.email-form input{
    padding: 8px 12px;
    width: 50%;
    justify-content: center;
    display: block;
    font-family: sans-serif;
    font-size: 16px;
}

.email-form button, .contact-sent button{
    background-image: linear-gradient(180deg, gold, saddlebrown);
    cursor: pointer;
    font-family: inherit;
    font-size: 24px;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    color: black;
    padding: 10px;
    margin-top: 10px;
    width: 25%;
    transition: all 0.25s ease;
}

.email-form button:hover, .contact-sent button:hover{
    background-image: linear-gradient(180deg, gold, silver);
}

.email-form .email-message-box{
    margin-top: 20px;
    min-height: 150px;
    width: 100%;
    padding: 8px 12px;
    resize: vertical;
    overflow: auto;
    display: block;
    font-family: sans-serif;
    font-size: 16px;
}

/*Product Cards and Store*/

.searchbar{
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    padding: 16px;
    display: inline-block;
}

.searchbar input[type=text]{
    background-image: url("../images/site_assets/searchicon.png");
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px;
    padding-left: 40px;
    font-size: 17px;
    border: none;
    margin-left: auto;
    width: 100%;
}

.card{
    position: relative;
    float: left;
    width: 100%;
    border-style: double;
	border-width: solid;
	/* border-color: rgba(139, 0, 0, 128); */
    border-color: rgba(212, 175, 55);
    background: rgba(92, 88, 88, 0.6);
    transition: all 0.25s ease;
    top: 0px;
}

.card search-tags{
    display: none;
}

.card a{
    text-decoration: none;
}
.card h1 {
    background-image: url("../images/site_assets/Festi/bookend_mirror.png"), url("../images/site_assets/Festi/Ramlogo.png"), url("../images/site_assets/Festi/bookend.png");
	background-repeat: no-repeat;
	background-position: left, top, right;
	background-size: contain;
}

.card:not(.featured):hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
	background-color: #555;
    top: -10px;
}

.card .tooltip{
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 24px;
	font-weight: 200;
	padding-top: 10px;
    text-align: center;
    visibility: hidden;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 20%;
    left: 50%;
    margin-left: -50%;
    transition: all 0.25s ease;
}

.card:hover .tooltip, .card:active .tooltip{
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.75);
    color: rgba(225, 225, 225, 1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

.card:not(:hover) .tooltip{
    background-color: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    visibility: hidden;
}

/*Product page*/
.product-page{
    width: 100%;
    height: auto;
    display: inline-block;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
    position: relative;
    isolation: isolate;
}

#product-Stickers{
    background-image: url( "../images/backgrounds/background02.jpg");
    background-attachment: scroll;
    background-repeat: repeat;
	background-position: center top;
    background-size: 20%;
}

#product-Ram{
    background-image: url("../images/Character_Art/RAM.jpg");  
}

#product-Ekino{
    background-image: url("../images/Character_Art/Ekino_Art_Deco_Print_Color_Correct.jpg");  
}

#product-Grozzoroth{
    background-image: url("../images/Character_Art/Grozzoroth_Print.jpg");  
}

#product-Brutus{
    background-image: url( "../images/Character_Art/BrutusHRATfile_comp.jpg");  
}

#product-Xizzu{
    background-image: url("../images/Character_Art/1595981449.eyegis-garr_eyegisgarr_wyvern_toy-watermarked.jpg");  
}

#product-Matari{
    background-image: url("../images/Character_Art/BatPeenIsTheBest.jpg");  
}

#product-Razor{
    background-image: url("../images/Character_Art/Velociraptor-2_fin-watermark.jpg");  
}

#product-Zeke{
    background-image: url("../images/Character_Art/Toy-Phin-Final.jpg");  
}

#product-Kiki{
    background-image: url("../images/Character_Art/female-phin-BACK-2.jpg");  
}

#product-Kally{
    background-image: url("../images/Character_Art/Kally.jpg");  
}

#product-Cher{
    background-image: url("../images/Character_Art/cher.jpg");  
}



.product-page:after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: -1;
}

.product-desciption{
    height: 100%;
    width: 100%;
    display: block;
    color: #ffffff;
	text-align: left;
	font-size: 24px;
	font-style: normal;
	font-weight: lighter;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    text-shadow: 0 0 10px black,  0 0 25px black;
}

.product-desciption h1{
    font-family: 'Limelight', cursive;
	text-rendering: optimizeLegibility;
	font-size: 48px;
	font-weight: 200;
	text-align: center;
	padding-top: 10px;
}

.character-sticker-display{
    width: 100%;
    transition: all 0.25s ease;
}

.sticker-three-pack{
    padding: 15px;
    text-align: left;
    width: 100%;
    margin: 10px;
    align-content: center;
}

.sticker-three-pack .sticker-image, .sticker-image-single{
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: auto;
}

#three-pack-1{
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    width: 100%;
    height: 100%;
}

#three-pack-2
{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    width: 100%;
    height: 100%; 
}

#three-pack-3{
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    width: 100%;
    height: 100%;
}

.sticker-image figure{
    vertical-align: top;
    width: 32%;
    display: inline-block;
    text-align: center;
}

.sticker-image img{
    border: none;
}

.sticker-image-single figure{
    vertical-align: top;
    width: 100%;
    display: inline-block;
    text-align: center;
    padding-bottom: 10%;
}

.sticker-image-single img{
    border: none;
}


#sections-ekino {
	padding-top: 21%;
	background-image: url("../images/site_assets/Festi/Ekino.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-brutus {
	padding-top: 27%;
	background-image: url("../images/site_assets/Festi/Brutus.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-matari {
	padding-top: 20%;
	background-image: url("../images/site_assets/Festi/Bat.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-grozzoroth {
	padding-top: 24%;
	background-image: url("../images/site_assets/Festi/Grozzbanner.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-xizzu {
	padding-top: 28%;
	background-image: url("../images/site_assets/Festi/XizzuBanner.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-zeke {
	padding-top: 24%;
	background-image: url("../images/site_assets/Festi/dolphin.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-razor {
	padding-top: 30%;
	background-image: url("../images/site_assets/Festi/Raptor.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-ram {
	padding-top: 24%;
    background-image: url("../images/site_assets/Festi/Rambanner.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-cher {
	padding-top: 25%;
	background-image: url("../images/site_assets/Festi/Cher.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

#sections-kiki {
	padding-top: 25%;
	background-image: url("../images/site_assets/Festi/Kiki.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}



/*Text-only pages*/
.text-content-container{
	max-width: 1170;
	margin: 75px;
	color: #ffffff;
	text-align: left;
	font-size: 16px;
	font-style: normal;
	font-weight: lighter;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}

.text-content-container h1{
	font-size: 32px;
	font-weight: 200;
	text-align: left;
	padding-top: 10px;
}

.text-content-container h2{
	font-size: 24px;
	font-weight: 200;
	text-align: left;
	padding-top: 10px;
}

.text-content-container h3{
	font-size: 16px;
	font-weight: 200;
	text-align: left;
	padding-top: 10px;
}

/*Responsive Navbar*/
@media(max-width: 1350px){
	.navbar{
	background-image: none;
	}
}

/*Responsive Header*/
@media (max-width: 1000px){
    
    body{
        padding-top: 160px;
    }
	
	.toggle-button{
		display: flex;
	}

	.navbar-links{
		display: none;
		width: 100%;
		padding-top: 20px;
	}
	
	.navbar-links li:hover, .navbar-links li:active{
		top: -10px;
		background-color: #555;
	}
	
	.navbar{
		flex-direction: column;
        background-image: none;
	}
	
	.navbar-links ul{
		width: 100%;
		flex-direction: column;
	}
	
	.navbar-links li{
		margin-top: 6px;
		text-align: center;
	}
	
	.navbar-links li a{
		padding: 0.5rem 1rem;
	}
	
	.navbar-links.active{
		display: flex;
		height: auto;
	}
    
    .email-form{
	    text-align: center;
    }
    
    .preview-container{
	width: 440px;
    height: 440px; 
    }
    
    .info-bar{
    top: 160px;
    position: sticky;
    }
    
}

/*Responsive Slideshow*/
@media (max-width: 700px){
    
    .email-form input, .email-form button{
        width: 100%;
    }
    
	.button-next-news, .button-previous-news, .button-next-featured, .button-previous-featured{
		font-size: 20px;
        position: absolute;
	}
    
    .button-next, .button-previous{
		font-size: 20px;
    }

    .lines-preview{
	    position: absolute;
	    display: flex;
	    top: 100%;
        z-index: 100;
        max-width: 100%;
    }
	
	.line, .line-news, .line-featured{
		padding: 8px 8px;
	}
    
    .line-preview{
		padding: 2px 2px;
	}
    
    .slide-preview .tooltip{
        width: 100%;
        height: auto;
        left: 0%;
    }
    
}

/*Responsive Featured and News*/
@media(max-width: 1250px){
    
    #sections-shop{
        margin-top: 200px;
    }
    
    .color-scheme .tooltip, .shaft-color .tooltip, .base-color .tooltip{
        top: -100%;
        bottom: auto;
    }
    
    .card .tooltip{
        top: 0%;
        bottom: auto;
    }
    
    .bookend-left, .bookend-right{
	    display: none;
    }
    
    .news-grid{
        display: block;
    }
    
    .news-grid .shopbutton{
        width: 75%;
    }
}

@media(max-width: 1000px){
    
    #store-section-featured{
        display: none;
    }
    
    .slideshow-featured{
        display: flex;
    }
    
}

@media(max-width: 825px){
    
    .slideshow-container-news img{
        max-height: 425px;
    }
    
    .slideshow-container-news{
        grid-row-start: 3;
        grid-row-end: 3;
    }

    .news-text{
        padding-top: 10%;
        grid-row-start: 1;
        grid-row-end: 1;
    }
    
    .product-desciption{
        font-size: 75%;
    }
    
    .size-firmness-selection{
        transform: scale(.85) translate(-5%);
    }

    .color-schemes{
        transform: translate(5%);
        margin-right: 0;
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
        grid-template-rows: repeat(auto-fill, minmax(56px, 1fr));  
        grid-gap: 7px;
        width: 326px;
        height: 69px;
    }

    .custom-colors{
        transform: translate(5%);
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
        grid-template-rows: repeat(auto-fill, minmax(56px, 1fr));  
        grid-gap: 7px;
        width: 326px;
        height: 130px;
    }

    .color-preview{
        transform: translate(5%);
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
        grid-template-rows: repeat(auto-fill, minmax(56px, 1fr));  
        grid-gap: 7px;
        width: 326px;
        height: 195px;
    }

    .custom-colors{
        height: 326px;
    }

    .color-scheme, .shaft-color, .base-color{
        width: 56px;
        height: 56px;
        font-size: 52px;
    }

    .color-scheme input, .shaft-color input, .base-color input{
        width: 75%;
        height: 75%;
    }

    .checkmark{
        height: 75%;
        width: 75%;
    }

    .color-scheme:hover, .shaft-color:hover, .base-color:hover, .color-scheme:active, .shaft-color:active, .base-color:active{
        top: -7px;
        right: 11px;
        width: 75px;
        height: 75px;
        font-size: 75px;
    }
    
    #label-color-1{
        font-size: 75%;
    }

    #label-color-2{
        font-size: 75%;
    }

    #label-marble{
        font-size: 75%;
    }

    #label-green-glow{
        font-size: 75%;
    }

    #label-blue-glow{
        font-size: 75%;
    }

    #label-mica-1{
        font-size: 75%;
    }

    #label-mica-2{
        font-size: 75%;
    }

    #green-glow-Checkbox{
        width: 100%;
        height: 100%;
    }

    #blue-glow-Checkbox{
        width: 100%;
        height: 100%;
    }


    #mica-1-Checkbox{
        width: 100%;
        height: 100%;
    }

    #mica-2-Checkbox{
        width: 100%;
        height: 100%;
    }

    #reset-squishy{
        font-size: 75%;
    }
    
    #options-preview{
        margin-bottom: 0%;
    }
    
	.sections{
		padding-top: 10px;
		flex-wrap: wrap;
	}
    
	.section{
		width: 100%;
		margin-bottom: 10px;
	}
    
    .slideshow-container{
        display: block;
    }
    
    .hero{
        display: none;
    }
    
    #sections-shop{
        margin-top: 200px;
    }
    
    .sticker-image-single{
        grid-template-columns: 100%;
        grid-template-rows: 33% 33% 33%; 
        width: 100%;
    }
    
    .sticker-three-pack .sticker-image{
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%; 
        width: 100%;
    }
    
    .size-firmness-selection-3-pack{
         display: inline-block;
    }

    #three-pack-1{
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 1;
        width: 75%;
        height: 75%;        
        margin-left: auto;
    }

    #three-pack-2{
        grid-column-start: 2;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 1;
        width: 75%;
        height: 75%; 
        margin-right: auto;
    }

    #three-pack-3{
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 2;
        width: 50%;
        height: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    
}

/*Responsive Footer*/
@media(max-width: 1250px){
	.footer-col{
		width: 50%;
		margin-bottom: 30px;
	}
}

@media(max-width: 574px){
	.footer-col{
		width: 100%;
		margin-bottom: 30px;
	}
}

/*Responsive Shop Buttons*/
@media(max-width: 1250px){
	.shopbuttons{
		padding-top: 10px;
        flex-wrap: wrap;
	}
	
	.shopbutton{
		width: 50%;
		margin-bottom: 10px;
	}
    
    .shopbuttons-store{
		padding-top: 0px;
	}
    
	.shopbutton-store{
		width: 25%;
		margin-bottom: 0px;
	}
    
    .shopbuttons-container-store{
        padding-top: 0%;
        display: inline-block;
        flex-wrap: nowrap;
    }
    
    .searchbar{
        float: right;
        padding-bottom: 10px;
        width: 50%;
    }
    
}

@media(max-width: 574px){
	.shopbuttons{
		padding-top: 10px;
        flex-wrap: wrap;
	}
    
	.shopbutton{
		width: 100%;
		margin-bottom: 10px;
	}
    
    .shopbuttons-store{
		padding-top: 0px;
	}
    
	.shopbutton-store{
		display: none;
	}
    
    .searchbar{
        float: none;
        padding-bottom: 10px;
        width: 100%;
    }
    
    .shopbuttons-container-store{
    top: 160px;
    position: sticky;
    }
    
    .info-bar{
    top: 50px;
    position: sticky;
    }
    
    #sections-shop{
    margin-top:  0px;
    }
    
}

/*Global*/
a{
	color: #ffffff;
}

ul{
	list-style: none;
}

nav{
	flex: 1;
	text-align: right;
}

h1{
	color: #ffffff;
	font-size: clamp(2.011rem, 2.778vw + 1.456rem, 3.713rem);
}

p{
	color: #ffffff;
}

select{
    display: inline-block;
    padding: 10px;
    width: auto;
    box-sizing: border-box;
    font-size: 16px;
    margin-left: 5px;
    margin-right: 15px;
}